Multiple radio button forms, single groups, can't retrieve values

Question

I have been scouring the net for an answer to this, and have not found anything useful. I'm programming a quiz on a single web-page. I have not one form with multiple radio button groups, but multiple forms, each with their own radio button group.

Every time I run my code to grab the values from each form, I get no further than the first group; thereafter, the second iteration of my function call says my variable for the form fields is undefined.

Example of calls to form value retrieval code:

function submit_quiz(){
 var one, two, three;
 one = getRadioValue(document.getElementById("ans1"), "a1");
 alert(one);
 one = getRadioValue(document.getElementById("ans2"), "a2");
 alert(two);
 one = getRadioValue(document.getElementById("ans3"), "a3");
 alert(three);
}
function getRadioValue(form, name){
 var val;
 var i;

 var f = form;
 var n = name;

 radios = f.elements[n];
 len = radios.length;

 for(i=0; i<len; i++){
  if(radios[i].checked){
    val = radios[i].value;
    break;
  }
 }
 return val;
}

Example of code for forms and radio buttons:

<ol class="quiz_question">
  <li id="q1">
    <p>According to Sun Tzu, the study of war is what to the state?</p>
    <form class="answer_selections" id="ans1">
    <input name="a1" value="1" type="radio" />A useless endeavor to be avoided.<br />
    <input name="a1" value="2" type="radio" />Too costly to be of any practical use.<br />
    <input name="a1" value="3" type="radio" />A matter of life and death.<br />
    <input name="a1" value="4" type="radio" />Important to the state's wealth.<br />
    </form>
  </li>
  <li id="q2">
    <p>Sun Tzu says long wars have what effect?</p>
    <form class="answer_selections" id="ans2">
    <input name="a2" value="1" type="radio" />Both the state's wealth, and the army's strength wane.<br />
    <input name="a2" value="2" type="radio" />Then enemy's strenght is steadily ground into nothing.<br />
    <input name="a2" value="3" type="radio" />Both sides will eventually choose a mutually agreable peace.<br />
    <input name="a2" value="4" type="radio" />There will be no effect as the war will become a stalemate.<br />
    </form>
  </li>
  <li id="q3">
    <p>If your army is five times as big as your enemies, what is your best course of action?</p>
    <form class="answer_selections" id="ans3">
    <input name="a3" value="1" type="radio" />Attempt to surround and destroy the enemy's forces.<br />
    <input name="a3" value="2" type="radio" />Pull back, and wait for a better opportunity to attack.<br />
    <input name="a3" value="3" type="radio" />Split your forces in two, and send one to attack the enemy's rear.<br />
    <input name="a3" value="4" type="radio" />Attack immediatly, unless the enemy holds some other serious advantage.<br />
    </form>
  </li>

Answer 1

Could not find the button to submit the quiz. So have to add a button and attach listener onclick to it.

Also there is no need of passing the form id, Since the the name of radio buttons are different, document.getElementsByName can be use to get radio button of that name. Then loop by the node list to find the checked button.

Also in your function submit_quiz you are alerting two & three variable,but they are actually undefined.

var one, two, three; //Declared variable
 one = getRadioValue(document.getElementById("ans1"), "a1"); // Assigned to one
 alert(one);
//Assigned to one again but not two
     one = getRadioValue(document.getElementById("ans2"), "a2");
     alert(two); // alerting two but two in unassinged
   // Assigned to one again ,but alerting three
     one = getRadioValue(document.getElementById("ans3"), "a3");
     alert(three); //three is unassigned

document.getElementById("submitQuiz").onclick =function(){
 submit_quiz();
}

function submit_quiz(){
 var one, two, three;
 one = getRadioValue("a1");
 alert(one);
 two = getRadioValue("a2");
 alert(two);
 three = getRadioValue("a3");
 alert(three);
}



function getRadioValue(name){
var val =""
var _getCheckedRadio = document.getElementsByName(name);
for(var i =0;i<_getCheckedRadio.length;i++){
 if (_getCheckedRadio[i].checked ){
  val = _getCheckedRadio[i].value;
 }
}
 return val;
}

jsFiddle