サポート » プラグイン » MW WP Formのチェックボックスに連動させて表示、非表示を切り替えたい

  • 解決済 mountain22

    (@jpairb)


    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件中)
  • こんにちは

    WordPress の jQuery では $ ショートカットが使えないので、$ を使用する場合は下記のようにするといいかと思います。

    jQuery(function($) {
      $("#checkbox-1").change(function() {
        $(".box").toggle();
      });
    });

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

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

    • この返信は9 ヶ月、 3 週間前に  mountain22 さんが編集しました。

    こんにちは

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

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

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

    https://techacademy.jp/magazine/14581

    mwform_checkbox の ID には、枝番 (-1, -2 …) が付与されます。
    ページのソースを確認してみてください。

    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の読み込み方が間違っているのでしょうか。

    • この返信は9 ヶ月、 3 週間前に  mountain22 さんが編集しました。

    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' );

    ishitaka様

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

    <div class="box">チェックした時に表示</div>

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

    では、どうでしょうか。

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

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

    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' ) );

    では、どうでしょうか。

    • この返信は9 ヶ月、 3 週間前に  ishitaka さんが編集しました。

    一度解決したのにお手数です。
    教えていただいたコードでは動きませんでした。
    MWFORMと固定ページの編集画面で以下のように記載したのですが。

    <script type="text/javascript">
    wp_enqueue_script( 'form-open', get_stylesheet_directory_uri() . '/assets/js/form-open.js', array( 'jquery' ) );
    </script>

     面倒であれば、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' );

    こんなかんじでしょうか。

    下記ページを一読ください。
    https://wpdocs.osdn.jp/関数リファレンス/wp_enqueue_script

    今回のコードでJSファイルも動きました!ありがとうございます。
    ご指摘のページも読み、勉強させていただきます。
    大変お手数をおかけしました。

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

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

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

    もし、解決策等ありましたらご教示いただけませんでしょうか。

    • この返信は9 ヶ月、 3 週間前に  mountain22 さんが編集しました。
    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);
    });

    ではどうでしょうか。

    なお、コードはあくまでもサンプルです。そのままでは動作しないかもしれません。ご自身で理解した上でコーディングしてください。

    • この返信は9 ヶ月、 3 週間前に  ishitaka さんが編集しました。
15件の返信を表示中 - 1 - 15件目 (全40件中)
  • トピック「MW WP Formのチェックボックスに連動させて表示、非表示を切り替えたい」には新たに返信することはできません。