バージョン選択

フォーラム

メニュー

オンライン状況

56 人のユーザが現在オンラインです。 (47 人のユーザが フォーラム を参照しています。)
登録ユーザ: 0
ゲスト: 56
もっと...

サイト内検索

質問 > フロント機能 > チェックボックスを変更した際に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したい
ブラウザのデベロッパーツールで、チェックボックスを変更した際に想定の動作がしているか確認すると良いと思います。


----------------
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
EC-CUBEインテグレートパートナー【ゴールド】ランク
M&I Works
URL: https://miworks.biz/
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

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が動けば、やりたいことができそうです。
ありがとうございました!
スレッド表示 | 新しいものから 前のトピック | 次のトピック | トップ


 



ログイン


EC-CUBE公式 Amazon Payプラグイン

統計情報

総メンバー数は88,290名です
総投稿数は109,689件です

投稿数ランキング

1
seasoft
7365
2
468
3217
3
AMUAMU
2712
4
nanasess
2303
5
umebius
2085
6
yuh
1818
7
h_tanaka
1610
8
red
1568
9
mcontact
1240
10
tsuji
958
11
fukap
907
12
shutta
835
13
tao_s
796
14 ramrun 789
15 karin 689
16 sumida 641
17
homan
633
18 DELIGHT 572
19
patapata
502
20
flealog
485


ネットショップの壺

EC-CUBEインテグレートパートナー

Copyright© EC-CUBE CO.,LTD. All Rights Reserved.