チェックボックス変更時にsubmitしたいが、他の要素の変更時にもsubmitされてしまう（JS）

Question

JSでチェックボックスが変更された場合に、フォームを送信させたいと思っています。
addEventListenerを使って下記のようなコードを書いたところ、チェックボックス変更時にフォーム送信がなされるという処理は実現できました。
しかし、下記のように、同じform内に複数の入力ボックスやラジオボタンなどがあるのですが、それらを変更したときにも、勝手にフォームが送信されてしまいます。

どこがいけないのでしょうか。
ご指導お願いいたします。

★すみません、投稿時に少しミスをしているかもしれません。修正中です。
→修正しました。

HTMLの構成

<form id="basic_form" method="get" action="－－－－" name="basic_search">
	<input type="text" ～～>

	<input type="radio" name="－－" value="and" >and
	<input type="radio" name="－－" value="or" >or

    <div id="checkbox_id">
        <input  type="checkbox" name="codeType" value="---" > 
        <input  type="checkbox" name="codeType" value="---" > 
        <input  type="checkbox" name="codeType" value="---" > 
    </div>
</form>

JS

document.forms.basic_search.codeType.forEach(function(){
    addEventListener("change",function(){
        document.forms.basic_search.submit();
    })
});

現象

ラジオボタンやその他のテキストボックスを変更しても、submitが実行される。

Comments

[defghi1977]

コードの辻褄が合っていません. コードを見直し, 正しいものを提示願います.

[m.ts10806]

そもそもなぜチェックボックスchangeで送信させたいのでしょうか？大目的部分も提示されたほうがより適切な回答がつくように思います。

Answer 1

チェックボックスの変更時にsubmitしたいのなら、

<INPUT TYPE=CHECKBOX ONCHANGE="document.forms.basic_search.submit();">

のように、チェックボックスにOnChangeを指定するほうが、動作が理解しやすいです。
また、特定のチェックボックスでだけsubmitされるようにするのも簡単です。

eventListenerだと、いろいろなchangeに反応しますから、質問のような動作になります。

Comments

[退会済みユーザー]

ありがとうございます！

Answer 2

下記コードでチェックボックスが発するchangeイベントでのみフォームがサブミットされます.
おそらく, 提示したコード以外の部分で不具合を生じているものと考えられるため, これ以上のアドバイスは不可能です.

<form id="basic_form" method="get" action="">
    <input type="text">
    <input type="radio" name="a" value="and" >and
    <input type="radio" name="a" value="or" >or
    <div id="checkbox_id">
        <input id="checkbox_id1"  type="checkbox" name="b" value="B" > 
        <input id="checkbox_id2"  type="checkbox" name="c" value="C" > 
        <input id="checkbox_id3"  type="checkbox" name="d" value="D" > 
    </div>
</form>
<script>
document.getElementById("checkbox_id").addEventListener("change", function(e){
  document.forms.basic_form.submit();
});
</script>

Comments

[退会済みユーザー]

ありがとうございます！ やはり他の部分に不具合があるようです。js自体をもう少し勉強してみます。

Answer 3

こんな感じですね

window.addEventListener('DOMContentLoaded', function(e){
  Array.prototype.forEach.call(document.querySelectorAll('#basic_form [name=codeType]'),function(x){
    x.addEventListener('change',function(e){
      e.target.form.submit();
    });
  });
});

<form id="basic_form" >
<input type="text" name="t1">
<input type="radio" name="r1" value="and" >and
<input type="radio" name="r1" value="or" >or

<div id="checkbox_id">
<input  type="checkbox" name="codeType" value="1"> 
<input  type="checkbox" name="codeType" value="2"> 
<input  type="checkbox" name="codeType" value="3"> 
</div>
</form>

Comments

[退会済みユーザー]

ありがとうございます！