Неожиданный вывод из ссылки DOM формы ввода HTML

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