自動javascriptのエラー

Question

私は、フォーム、ラジオボタンで最初のレコードのみを提出するラジオ・ボタンを使用しています

を使用してフォームを送信すると、他のものをしない取り組んでいる

example Fiddle http://jsfiddle.net/sjs96/q9a6v4ma/1/

<form id="searchid" method="post" action="test.php"> 

    <label><input name="search" id="radio" type="radio">test1</label><br> 
    <label><input name="search" id="radio" type="radio">test2</label><br> 
    <label><input name="search" id="radio" type="radio">test3</label> 

</form> 

JS：

var form = document.getElementById("searchid"); 
document.getElementById("radio").addEventListener("click", function() { 
    form.submit(); 
}); 

Answer 1

一つだけid同じ値を持つがあることができ、フォームが提出しています。私はあなたがクラスを使用することをお勧めし、代わりのコードスニペットに

$(document).ready(function() { 
 
    var form = document.getElementById("searchid"); 
 
    $('.radio').click(function(){ 
 
     form.submit(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form id="searchid" name='myForm' method="post" action="test.php"> 
 

 
          <label><input name="search" class="radio" type="radio">test1</label><br> 
 
          <label><input name="search" class="radio" type="radio">test2</label><br> 
 
          <label><input name="search" class="radio" type="radio">test3</label> 
 
       </form>

を与えられたidを。

Answer 2

同じIDを持つ複数の要素を持つことはできません。代わりに

使用クエリセレクタ：、また、あなたのラジオのための

使用異なるIDを

var form = document.getElementById("searchid"); 
var currEl = document.querySelectorAll(".radio"); 
for (var i = 0; i < currEl.lenght; i++) { 
    currEl[ i ].addEventListener("click", function() { 
     form.submit(); 
}); 
} 

：

これを試してみてください。同じIDを使用すると、さらに問題が発生し、パフォーマンスに影響を与える可能性があります。

Answer 3

Use jquery 

var form = document.getElementById("searchid"); 
     $('input[type=radio]').on("click", function() { 
      form.submit(); 
     }); 

Answer 4

入力タグに同じIDを使用しないでください。

<label><input name="search" id="radio1" type="radio">test1</label><br> 
<label><input name="search" id="radio2" type="radio">test2</label><br> 
<label><input name="search" id="radio3" type="radio">test3</label> 

変更これら3つのIDS、動的な無線の

var form = document.getElementById("searchid"); 
document.getElementById("radio1").addEventListener("click", function() { 
    form.submit(); 
}); 

document.getElementById("radio2").addEventListener("click", function() { 
    form.submit(); 
}); 

document.getElementById("radio3").addEventListener("click", function() { 
    form.submit(); 
}); 

のためのJSコードは、以下のようにそれを行います。

jsの関数を作成し、唯一のonclickイベントで機能

var form = document.getElementById("searchid"); 
function myFunction() { 
    form.submit();    
} 

呼び出し、

<label><input name="search" type="radio" onclick = "myFunction()">test</label>