MW WP Formのチェックボックスに連動させて表示、非表示を切り替えたい

解決済 river
(@jpairb)

4年、 9ヶ月前

MW WP Formを使わせていただいています。
jQueryを利用し、フォームでチェックボックスのチェックの有り、無しに連動させて、表示、非表示の切り替えを行いたいです。
以下のサイトを参考に後述のコードをmwform編集画面に記載しましたが、テキスト「チェックした時に表示」が表示されたままで動きがありません。
https://qiita.com/kazu56/items/9112737c9511148c5cfe

WP初心者で根本的なことが間違っているかもしれませんが、どなたかご教示いただけましたら幸いです。

WordPressはVer5.0.2です。
サイトでは、lightbox.jsなど jQueryプラグインは問題なく動作しています。今回もlightbox.jsと同様のやり方（function.phpに記載）でjsファイルを呼び出しています。

【mwform編集画面での記載内容】
[mwform_checkbox name=”ivent” children=”参加する” id=”checkbox”]
<div class=”box”>チェックした時に表示</div>

【jQuery】外部ファイル（子テーマ）
$(function(){
$(‘#checkbox’).change(function(){
$(‘.box’).toggle();
})
})

10件の返信を表示中 - 31 - 40件目 (全40件中)

← 1 2 3

トピック投稿者 river
(@jpairb)

4年、 9ヶ月前
年越しの慌ただしい時期に長らくお時間を取らせてしまい、申し訳ございませんでした。

チェックボックスＡと同時にBやCをチェックすると、下記のelse以下も一緒に適用されてしまい、確認画面の.boxを消してしまうのだと思います。対処が分からず、いいところまでいったと思ったのですがお手上げのようです。同一グループを分割したのが複雑にしてしまったようですね。
```
// #checkbpox1 なし（確認画面）

	// 値が d の要素が存在するかどうか？
	if ($('input[value="d"]').length) {
		$(".box").show(); // .box を表示
	} else {
		$(".box").hide(); // .box を非表示
```
恐縮です。コメントで１つお聞きしたいのですが、
```
} else {
	// #checkbpox1 なし（確認画面）
```
の部分は、id=checkbox-1にチェックが入っていないという理解でよいでしょうか。
id=checkbox-1は要素dのみだけなので、// 値が d の要素が存在するかどうか？は同じ条件にならないでしょうか。
- この返信は4年、 9ヶ月前にriverが編集しました。
- この返信は4年、 9ヶ月前にriverが編集しました。
- この返信は4年、 9ヶ月前にriverが編集しました。
- この返信は4年、 9ヶ月前にriverが編集しました。
- この返信は4年、 9ヶ月前にriverが編集しました。
- この返信は4年、 9ヶ月前にriverが編集しました。
- この返信は4年、 9ヶ月前にriverが編集しました。
ishitaka
(@ishitaka)

4年、 9ヶ月前
id=checkbox-1にチェックが入っていないという理解でよいでしょうか。

確認画面には、チェックの有無に関係なく #checkbpox-1 は存在しません。
値が d の input 要素が存在する場合に、チェックされたと判定しています。

繰り返しになりますが、確認画面のソースをご確認ください。
- この返信は4年、 9ヶ月前にishitakaが編集しました。
- この返信は4年、 9ヶ月前にishitakaが編集しました。
トピック投稿者 river
(@jpairb)

4年、 9ヶ月前

知識不足でいろいろとご迷惑をおかけしました。
本当にありがとうございました。
ishitaka
(@ishitaka)

4年、 9ヶ月前
if ($('input[name="ivent[data]"]').length) {
↓
if ($('input[value="d"]').length) {
↓
```
var ivents = $('input[name="ivent[data]"]').val().split(',');
if ($.inArray('d', ivents) >= 0) {
```
では、どうでしょうか？
トピック投稿者 river
(@jpairb)

4年、 9ヶ月前

明けましておめでとうございます。再度のご返信ありがとうございます。

いただいたコードでうまく動きました！

前のやりとりの後、調べて条件分岐を色々と変えてやってみましたが、うまくいきませんでした。
コーディングは内容を理解せず、コピペだけでやっていると、全然応用できないと痛感しています。
本当にありがとうございました。
トピック投稿者 river
(@jpairb)

4年、 9ヶ月前
何度もの質問で本当に申し訳ございません。

jsファイルをご教示いただいた下記コード（function.phpに記載）で読み込んでいるのですが、これによって、MWFORMで使用しているデイトピッカー（カレンダーで選択）が機能しなくなってしまったようです。（この記載を外すと機能する）
下記コードはform-open.jsを読む込みためだけの内容のように思いますが、なぜ影響したか不明です。これを回避する方法はありませんでしょうか。

●function.php
```
function theme_enqueue_styles() {
	wp_enqueue_script( 'form-open', get_stylesheet_directory_uri() . '/assets/js/form-open.js', array( 'jquery', 'mw-wp-form' ) );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
```
●開発者ツールでのエラー表示
```
Uncaught TypeError: Cannot read property 'split' of undefined
    at checkbox_change (form-open.js?ver=5.0.2:27)
    at HTMLDocument.<anonymous> (form-open.js?ver=5.0.2:41)
    at i (jquery.js?ver=1.12.4:2)
    at Object.fireWith [as resolveWith] (jquery.js?ver=1.12.4:2)
    at Function.ready (jquery.js?ver=1.12.4:2)
    at HTMLDocument.K (jquery.js?ver=1.12.4:2)
```
ishitaka
(@ishitaka)

4年、 9ヶ月前
提示のコードではそのようなエラーはでないと思いますが・・・

違うと思いますが、
```
var ivents = $('input[name="ivent[data]"]').val().split(',');
if ($.inArray('d', ivents) >= 0) {
```
↓
```
var ivents = $('input[name="ivent[data]"]');
if (ivents.length && $.inArray('d', ivents.val().split(',')) >= 0) {
```
では、どうでしょうか？

確認画面の HTML および form-open.js はどのようなコードでしょうか？
トピック投稿者 river
(@jpairb)

4年、 9ヶ月前
申し訳ございません、説明が不十分でした。
form-open.js を使用しているMWFORMのページは正常に動作しています。
日付を選択できるデイトピッカー（MWFORM標準）を使っているのは別のページで、MWFORMのidが違います。そのページの入力画面でデイトピッカーが使えなくなりました。
エラー表示は、そのページのものです。
function.phpの記述(以下）を削除すると、デイトピッカーが機能するので、この記述が影響したと思われます。
```
function theme_enqueue_styles() {
	wp_enqueue_script( 'form-open', get_stylesheet_directory_uri() . '/assets/js/form-open.js', array( 'jquery', 'mw-wp-form' ) );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
```
もしかすると、テーマのJS読み込みが関係していますでしょうか。そうであれば、テーマ関係のサポートに問い合わせようと思いますが。
ishitaka
(@ishitaka)

4年、 9ヶ月前
スクリプトを対象のページだけ組み込むようにするか、スクリプトで対象ページか判定するといいかと思います。
```
function theme_enqueue_styles() {
	if ( is_page( 'contact' ) ) {
		wp_enqueue_script( 'form-open', get_stylesheet_directory_uri() . '/assets/js/form-open.js', array( 'jquery', 'mw-wp-form' ) );
	}
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
```
または、
```
jQuery(function($) {
	var
		checkbox = $("#checkbox-1"),
		ivents = $('input[name="ivent[data]"]'),
		checkbox_change = function () {
			if (checkbox.length) {
				// お問い合わせページ
				if (checkbox.prop("checked")) {
					$(".box").show();
				} else {
					$(".box").hide();
				}
			} else if (ivents.length)
				// 確認ページ
				if ($.inArray('d', ivents.val().split(',')) >= 0) {
					$(".box").show();
				} else {
					$(".box").hide();
				}
			} else {
				// その他のページ
			}
		};
	checkbox_change();
	checkbox.change(checkbox_change);
});
```
- この返信は4年、 9ヶ月前にishitakaが編集しました。
トピック投稿者 river
(@jpairb)

4年、 9ヶ月前
ご教示の通り、対象ページ指定で、他ページでカレンダー選択が機能するようになりました。
度々の質問にもかかわらず、的確、ご丁寧なご返答をいただき、誠にありがとうございました。
- この返信は4年、 9ヶ月前にriverが編集しました。

10件の返信を表示中 - 31 - 40件目 (全40件中)

← 1 2 3

トピック「MW WP Formのチェックボックスに連動させて表示、非表示を切り替えたい」には新たに返信することはできません。

トピックタグ

表示