php - 来自 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

查看问题:-

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