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的元素。

改为使用查询选择器：

试试这个：

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具有相同的值。我建议你使用class而不是Code Snippet中给出的id

＆＃13;

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

＆＃13;

<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>

＆＃13;

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函数，只包含表单submit，

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

使用onclick事件调用该函数，

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

自动提交表单使用javascript错误

4 个答案: