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

解決済 river
(@jpairb)

5年、 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();
})
})

15件の返信を表示中 - 1 - 15件目 (全40件中)

1 2 3 →

ishitaka
(@ishitaka)

5年、 9ヶ月前
こんにちは

WordPress の jQuery では $ ショートカットが使えないので、$ を使用する場合は下記のようにするといいかと思います。
```
jQuery(function($) {
  $("#checkbox-1").change(function() {
    $(".box").toggle();
  });
});
```
トピック投稿者 river
(@jpairb)

5年、 9ヶ月前
早速の返信ありがとうございます。
正常に稼働している別のjsファイルを見ると、ご指摘の通りjQuery(function($) になっていました。基本的なミスで恐縮です。

ただ、教えていただいたコードを、#checkbox-1を#checkboxにして、試したのですが反応がありませんでした。
念のために、mwform編集画面と、mwformショートコードを貼っている固定ページに、<script type=”text/javascript”></script>で挟んで直接コードを記載してみましたが同じでした。
- この返信は5年、 9ヶ月前にriverが編集しました。
munyagu
(@munyagu)

5年、 9ヶ月前

こんにちは

mwformの編集画面や固定ページの中に書くと、改行位置に自動的にpタグやなんかが入って JavaScript としての体をなさなくなってしまいます。

<script>と`</script>の間にある改行を全部削除するか、外部ファイルとして読み込んで下さい。

また、JavaScript が動かないときは以下のサイトなどを参考にデバッグされるといいと思います。

https://techacademy.jp/magazine/14581

ishitaka
(@ishitaka)

5年、 9ヶ月前

mwform_checkbox の ID には、枝番 (-1, -2 …) が付与されます。
ページのソースを確認してみてください。
トピック投稿者 river
(@jpairb)

5年、 9ヶ月前
ishitaka様、munyagu様　ご丁寧にご返信ありがとうございます。
ソースでIDがcheckbox-1になっていることが確認できました。
しかし、ファイルを変更してみましたが動作しません。
教えていただいたコードをコピーしてform-open.jsというファイルにして、子テーマ/assets/jsにアップ。
function.phpに以下コードを記載しています。（現在、動作している他のjsファイルと同様の方法です）

【function.php】
add_action( ‘wp_enqueue_scripts’, function() {
wp_enqueue_script(
get_stylesheet(),
get_theme_file_uri( ‘/assets/js/form-open.js’ ),
[ get_template() ],
false,
true
);
} );

【form-open.js】
jQuery(function($) {
$(“#checkbox-1”).change(function() {
$(“.box”).toggle();
});
});

開発者ツールのconsoleで確認したら、何もエラーが出ておらず、全く読み込んでいないかもしれないと、以下のコードでMWFORMや固定ページに直接記載したところ404エラーが出ていました。
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js”></script>
<script src=”/assets/js/form-open.js”></script>

基本的なことで恐縮ですが、JSの読み込み方が間違っているのでしょうか。
- この返信は5年、 9ヶ月前にriverが編集しました。
ishitaka
(@ishitaka)

5年、 9ヶ月前
wp_add_inline_script() を使用するのはどうでしょうか。

functions.php に、
```
function my_enqueue_scripts_mwwpform() {
	$script = <<<SCRIPT
jQuery(function($) {
  $("#checkbox-1").change(function() {
    $(".box").toggle();
  });
});
SCRIPT;
	//wp_add_inline_script( 'jquery-core', $script );
	wp_add_inline_script( 'mw-wp-form', $script );
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts_mwwpform' );
```
トピック投稿者 river
(@jpairb)

5年、 9ヶ月前

ishitaka様

チェックの有無で動くようになりました！
ただ、チェック有→非表示　無し→表示　と逆の動きになってしまいました。
手取り足取りになって申し訳ございません。何が間違っているか教えていただけましたらありがたいです。

ishitaka
(@ishitaka)

5年、 9ヶ月前

<div class="box">チェックした時に表示</div>
↓
<div class="box" style="display: none;">チェックした時に表示</div>

では、どうでしょうか。

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

5年、 9ヶ月前

できました！　最後の部分は単純なCSSだけでよかったのですね。
wp_add_inline_script()を入れたのは、MWFORMだと一般的なものと同じでは動かないからなのでしょうか。

以前も別件でお世話になりました。お忙しいところ、本当にありがとうございました。
ishitaka
(@ishitaka)

5年、 9ヶ月前
wp_add_inline_script()を入れたのは、MWFORMだと一般的なものと同じでは動かないからなのでしょうか。

<script src="/assets/js/form-open.js"></script>

URL (src) が正しくないためだと思います。

wp_enqueue_script( 'form-open', get_stylesheet_directory_uri() . '/assets/js/form-open.js', array( 'jquery', 'mw-wp-form' ) );

では、どうでしょうか。
- この返信は5年、 9ヶ月前にishitakaが編集しました。
トピック投稿者 river
(@jpairb)

5年、 9ヶ月前
一度解決したのにお手数です。
教えていただいたコードでは動きませんでした。
MWFORMと固定ページの編集画面で以下のように記載したのですが。
```
<script type="text/javascript">
wp_enqueue_script( 'form-open', get_stylesheet_directory_uri() . '/assets/js/form-open.js', array( 'jquery' ) );
</script>
```
　面倒であれば、function.phpの記載を使わせていただきます。
ishitaka
(@ishitaka)

5年、 9ヶ月前
```
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' );
```
こんなかんじでしょうか。

下記ページを一読ください。
https://wpdocs.osdn.jp/関数リファレンス/wp_enqueue_script
トピック投稿者 river
(@jpairb)

5年、 9ヶ月前

今回のコードでJSファイルも動きました！ありがとうございます。
ご指摘のページも読み、勉強させていただきます。
大変お手数をおかけしました。
トピック投稿者 river
(@jpairb)

5年、 9ヶ月前
一旦解決したのですが、実際にフォームを稼働させた際に問題が起きてしまいました。
先にチェックを入れるとテキストが表示されるコードをご教示いただきましたが、実際にはテキスト部分に別の選択項目（ラジオボタン）を入れる必要があり、試みたところ、チェックの有無による最初の表示はうまくいったのですが、確認画面に移行した際に、その内容が反映されませんでした。

①イベントＡにチェック（チェックボックス・1項目）
②食事を選択するリストＢが表示（ラジオボタン・複数項目）
③選択肢の中から１つにチェック
④確認画面へ移行

④の際にイベントＡのチェックが反映されますが、Ｂは反映されませんでした。
前の画面に戻ると、ＡにチェックするとＢが消え、チェックを外すと表示と、動作が逆になってしまいました。
遷移が絡むと、動作が思うようにいかないようです。

もし、解決策等ありましたらご教示いただけませんでしょうか。
- この返信は5年、 9ヶ月前にriverが編集しました。
ishitaka
(@ishitaka)

5年、 9ヶ月前
```
jQuery(function($) {
	var
		checkbox = $("#checkbox-1"),
		checkbox_change = function () {
			if (checkbox.length) {
				if (checkbox.prop("checked")) {
					$(".box").show();
				} else {
					$(".box").hide();
				}
			} else {
				if ($('input[name="ivent[data]"').length) {
					$(".box").show();
				} else {
					$(".box").hide();
				}
			}
		};
	checkbox_change();
	checkbox.change(checkbox_change);
});
```
ではどうでしょうか。

なお、コードはあくまでもサンプルです。そのままでは動作しないかもしれません。ご自身で理解した上でコーディングしてください。
- この返信は5年、 9ヶ月前にishitakaが編集しました。