使用javascript错误自动提交表单

Question

我正在使用单选按钮提交表单，只有带有单选按钮的第一条记录正在工作，而另一条记录却没有

示例小提琴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的元素。

改用查询选择器：

尝试这个：

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。 具有相同的ID将导致更多问题，并可能影响性能。

Answer 2

Use jquery  

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

Answer 3

只能有一个具有相同值的id 。 我建议您使用类，而不要使用代码段中的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> 

。

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个ID的JS代码，

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函数，仅包含表单提交，

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

使用onclick事件调用该函数，

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