来自 html 表单输入 DOM 参考的意外输出

Question

无论我选择什么单选按钮，控制台输出始终是“bcdab”，即使我什么都不选择。

我做错了什么？为什么我的选择不起作用？

<form name="quiz">
  <input type="radio" name="1" value="a"/>
  <input type="radio" name="1" value="b"/>
  <input type="radio" name="1" value="c"/>
  <input type="radio" name="1" value="d"/> <br/>
  ...
  <input type="radio" name="5" value="a"/> 
  <input type="radio" name="5" value="b"/> 
  <input type="radio" name="5" value="c"/> 
  <input type="radio" name="5" value="d"/> <br/>
  <button type="button" onclick="gradeQuiz();">Submit Quiz</button>
</form>

<script>
  function gradeQuiz(){
    var xhr=new XMLHttpRequest();
    var q=document.forms[0].elements;
    ...
    xhr.send("&1="+q['1'].value+
             "&2="+q['2'].value+
             "&3="+q['3'].value+
             "&4="+q['4'].value+
             "&5="+q['5'].value);
    ...
    console.log(xhr.ResponseText);
  }
</script>

<?php
  $choices=array($_POST['1'],$_POST['2'],$_POST['3'],$_POST['4'],$_POST['5']);
  echo(implode($choices));
?>

Answer 1

一种更简单的方法：-

var q1 = document.querySelector('input[name = "1"]:checked');
var q2 = document.querySelector('input[name = "2"]:checked');
var q3 = document.querySelector('input[name = "3"]:checked');
var q4 = document.querySelector('input[name = "4"]:checked');
var q5 = document.querySelector('input[name = "5"]:checked');

终于：-

xhr.send(
"&1="+q1.value+
"&2="+q2.value+
"&3="+q3.value+
"&4="+q4.value+
"&5="+q5.value
);

Answer 2

看到问题：-

xhr.send("&1="+q['1'].value+
             "&2="+q['2'].value+
             "&3="+q['3'].value+
             "&4="+q['4'].value+
             "&5="+q['5'].value);

当你使用q['1'] - 它调用第二个<input> 那个值是b 然后：-

q['2'].value= 'c';
q['3'].value= 'd';
q['4'].value= 'a';
q['5'].value= 'b';

所以最后你得到了值bcdab

解决方案：-

function gradeQuiz(){
var xhr=new XMLHttpRequest();
for (i=0;i<document.getElementsByName('1').length;i++) { if(document.getElementsByName('1')[i].checked){ val1= document.getElementsByName('1')[i].value; } }
for (i=0;i<document.getElementsByName('2').length;i++) { if(document.getElementsByName('2')[i].checked){ val2= document.getElementsByName('2')[i].value; } }
for (i=0;i<document.getElementsByName('3').length;i++) { if(document.getElementsByName('3')[i].checked){ val3= document.getElementsByName('3')[i].value; } }
for (i=0;i<document.getElementsByName('4').length;i++) { if(document.getElementsByName('4')[i].checked){ val4= document.getElementsByName('4')[i].value; } }
for (i=0;i<document.getElementsByName('5').length;i++) { if(document.getElementsByName('5')[i].checked){ val5= document.getElementsByName('5')[i].value; } }
...
 }

最后：-

xhr.send("&1="+val1+
"&2="+val2+
"&3="+val3+
"&4="+val4+
"&5="+val5);