質問 > フロント機能 > チェックボックスを変更した際にsubmitしたい |
フロント機能
スレッド表示 | 新しいものから | 前のトピック | 次のトピック | 下へ |
投稿者 | スレッド |
---|---|
nanana723 |
投稿日時: 2023/4/6 1:23
対応状況: 開発中
|
常連 登録日: 2023/4/6 居住地: 投稿: 34 |
チェックボックスを変更した際にsubmitしたい ▼テンプレート
[EC-CUBE] 4.1.2 [レンタルサーバ] Xserver [PHP] 7.4.33 [データベース] MySQL [WEBサーバ] Apache [ブラウザ] chrome [現象] チェックボックスのチェックを変更した際にsubmitするような動きを作りたいのですが、上手くいきません。 【twigソース】 {% block javascript %} <script> // チェックボックスクリックで検索 $('#checkboxid').change(function() { $(this).submit(); }); </script> {% endblock %} {% block main %} <div class="ec-searchnavRole px-0"> <form name="form1" id="form1" method="get" action="?"> {{ form_widget(form, {'id': 'checkboxid' })}} <div class="input-group-append"> <button class="btn bdrs-0 bgc-main c-white" type="submit"> <i data-feather="search" width="14" height="14"></i> </button> </div> </form> <略> 【出力されているソース】 <script> // チェックボックスクリックで検索 $('#checkboxid').change(function() { $(this).submit(); }); </script> <div class="ec-searchnavRole px-0"> <form name="form1" id="form1" method="get" action="?"> <div id="checkboxid"><div><label class="">商品検索</label> <div id="checkboxid"> <input type="checkbox" id="checkboxid_0" name="checkboxid[]" value="1" /> <label for="checkboxid_0"> <span>チェック1</span> </label> <input type="checkbox" id="checkboxid_1" name="checkboxid[]" value="2" /> <label for="checkboxid_1"> <span>チェック2</span> </label> </div> </div> <input type="hidden" id="_token" name="_token" value="n3zbofv5Ph3HS5-iaNZARGkkxynvETEnyb_hA5R--XY" /></div> <div class="input-group-append"> <button class="btn bdrs-0 bgc-main c-white" type="submit"> <i data-feather="search" width="14" height="14"></i> </button> </div> </form> <略> submitのボタンをクリックすればsubmitされますが、チェックボックスを変更しても全く反応がありません。 アドバイスを頂けますと幸いです。 よろしくお願いいたします。 |
mcontact |
投稿日時: 2023/4/6 9:58
対応状況: −−−
|
神 登録日: 2022/1/22 居住地: 投稿: 1240 |
Re: チェックボックスを変更した際にsubmitしたい ブラウザのデベロッパーツールで、チェックボックスを変更した際に想定の動作がしているか確認すると良いと思います。
|
nanana723 |
投稿日時: 2023/4/7 2:49
対応状況: −−−
|
常連 登録日: 2023/4/6 居住地: 投稿: 34 |
Re: チェックボックスを変更した際にsubmitしたい ご回答いただき、ありがとうございます。
デベロッパーツールで確認したところ、javascript自体が反応していなかったのですが、下記のようにjavascriptを変更したところ、コンソールログが吐き出されるようになりました。 {% block javascript %} <script> $(document).on('change', 'input[name="checkboxid[]"]', function() { console.log('クリック'); }); </script> {% endblock %} どうやら、動的に追加したチェックボックスの操作をするためにはこの書き方でないとだめだったようです。 参照サイト https://www.flatflag.nir87.com/checkbox-1286 javascriptが動けば、やりたいことができそうです。 ありがとうございました! |
スレッド表示 | 新しいものから | 前のトピック | 次のトピック | トップ |