0

How would I select the answers for each question with javascript? For example getting all the q1, q2 and so on.

I have tried:

    document.getElementById(formResults)[input = "q1"] 

but doesn't seem to work.

Here's the code:

     <form id="formResult">
      <h1>Q1) According to the old proverb all roads lead to which capital city</h1>
      <input type="radio" name="q1" value="a" id="q1a"> London <br />
      <input type="radio" name="q1" value="b" id="q1b"> Rome <br />
      <input type="radio" name="q1" value="c" id="q1c"> New York <br />


      <h1>Q2) The name of which football club is an anagram of `Red Admiral`?</h1>
      <input type="radio" name="q2" value="a" id="q2a"> Red Devils <br />
      <input type="radio" name="q2" value="b" id="q2b"> Real Madrid <br />
      <input type="radio" name="q2" value="c" id="q2c"> Roma <br />


      <h1>Q3) In what year was Google launched on the web?</h1>
      <input type="radio" name="q3" value="a" id="q3a"> 1998 <br />
      <input type="radio" name="q3" value="b" id="q3b"> 1995 <br />
      <input type="radio" name="q3" value="c" id="q3c"> 2001 <br />


      <h1>Q4) In computing what is Ram short for?</h1>
      <input type="radio" name="q4" value="a" id="q4a"> Random Access Memory <br />
      <input type="radio" name="q4" value="b" id="q4b"> Real Access Memory <br />
      <input type="radio" name="q4" value="c" id="q4c"> Rough Access Memory <br />


      <h1>Q5) What does HTML stand for?</h1>
      <input type="radio" name="q5" value="a" id="q5a"> Hyperlinks and Text Markup Language <br />
      <input type="radio" name="q5" value="b" id="q5b"> Home Tool Markup Language <br />
      <input type="radio" name="q5" value="c" id="q5c"> Hyper Text Markup Language <br />


      <input type="submit" value= "Check answers">


    </form>

Thanks in advance

5 Answers 5

1

You can use getElementsByName to find all the radio buttons with a particular name:

document.getElementById('formResult').getElementsByName('q1')

You can also use document.querySelectorAll

document.querySelectorAll('#formResult [name=q1]');
Sign up to request clarification or add additional context in comments.

3 Comments

Given that formResult is a form and the name of the controls is a valid identifier: document.getElementById('formResult').q1 will do, as will document.forms.formResult.q1, and so on. ;-)
I thought about mentioning that, but I consider that a legacy of the last century, and wince whenever I see code like it.
Yeah, but I don't like to promote it, so I won't put it in my answer.
1

One way you can check this with pure javascript.

(function() {
  function testAnswers() {
    var arr = ["q1", "q2", "q3", "q4", "q5"];
    for (var i = 0; i < arr.length; i++) {
      var radios = document.getElementsByName(arr[i]);
      for (var y = 0; y < radios.length; y++) {
        if (radios[y].checked) {
          console.log("Option " + arr[i] + " answer is " + radios[y].value);
        }
      }
    }
  }

  var btnCheck = document.getElementById('btnCheck');
  btnCheck.addEventListener('click', function() {
    testAnswers();
  }, false);
})();
<form id="formResult">
  <h1>Q1) According to the old proverb all roads lead to which capital city</h1>
  <input type="radio" name="q1" value="a" id="q1a">London
  <br />
  <input type="radio" name="q1" value="b" id="q1b">Rome
  <br />
  <input type="radio" name="q1" value="c" id="q1c">New York
  <br />


  <h1>Q2) The name of which football club is an anagram of `Red Admiral`?</h1>
  <input type="radio" name="q2" value="a" id="q2a">Red Devils
  <br />
  <input type="radio" name="q2" value="b" id="q2b">Real Madrid
  <br />
  <input type="radio" name="q2" value="c" id="q2c">Roma
  <br />


  <h1>Q3) In what year was Google launched on the web?</h1>
  <input type="radio" name="q3" value="a" id="q3a">1998
  <br />
  <input type="radio" name="q3" value="b" id="q3b">1995
  <br />
  <input type="radio" name="q3" value="c" id="q3c">2001
  <br />


  <h1>Q4) In computing what is Ram short for?</h1>
  <input type="radio" name="q4" value="a" id="q4a">Random Access Memory
  <br />
  <input type="radio" name="q4" value="b" id="q4b">Real Access Memory
  <br />
  <input type="radio" name="q4" value="c" id="q4c">Rough Access Memory
  <br />


  <h1>Q5) What does HTML stand for?</h1>
  <input type="radio" name="q5" value="a" id="q5a">Hyperlinks and Text Markup Language
  <br />
  <input type="radio" name="q5" value="b" id="q5b">Home Tool Markup Language
  <br />
  <input type="radio" name="q5" value="c" id="q5c">Hyper Text Markup Language
  <br />


  <input id="btnCheck" type="button" value="Check answers">
</form>

Check your console after selecting the answers for each questions.

Comments

0

One option, depending on what sort of browser support you need, would be:

document.querySelectorAll('input[name="q1"]')

3 Comments

The browser support issue is hardly an issue at all. It's fully supported back to IE9, and IE8 supports it with CSS2.1 selectors. So unless you absolutely need to support IE7, or FF3, you're pretty much good. Query Selector Support
There is also: document.querySelectorAll('input[name^=q]:checked'), but browser support is a little more limited. ;-)
@RobG And even still, you could probably get that to work using the CSS2.1 |= selector if you desperately needed the browser support, though I agree CSS3 selectors are much more elegant. :)
0

It depends on how backward compatible you want to be. In modern browsers you can use:

document.querySelectorAll('input[name^=q]:checked')

to get a static collection of the inputs whose name starts with "q" and are checked. If a fallback is required (and if IE is to be supported that's a good idea) you can use a simpler selector and loop:

var inputs = document.querySelectorAll('input');

but in that case you may as well just use getElementsByTagName:

var inputs = document.getElementsByTagName('input');
for (var i=0, iLen=inputs.length; i<iLen; i++) {
  var el = inputs[i];
  if (/^q/.test(el.name) && el.checked) {
    // do something with el.value
    console.log(el.name + ':' + el.value);
  }
}

which will work in any browser back to around IE 5. To support old browsers, if you have an ES5 polyfill for forEach you might do:

Array.prototype.call(document.getElementsByTagName('input'), function(el) {
  if (/^q/.test(el.name) && el.checked) {
    // do something with el.value
    console.log(el.name + ':' + el.value);
  }
});

or similar with map, reduce, filter, whatever suits.

You can also loop over all controls in the form using its elements collection:

var formElements = document.forms.formResult.elements;

Over to you. :-)

Comments

0

https://jsfiddle.net/ahmadasjad/fs38f3wu/1/

CheckValue = function(evt){

var formObj = document.getElementById('formResult');
//console.log(formObj);
var myForm = document.getElementById("myForm");
//Extract Each Element Value
for (var i = 0; i < formObj.elements.length; i++) {
    console.log(formObj.elements[i].value);
}

//Extract only selected value. 
for (i = 0; i < formObj.length; i++) {
    if (formObj[i].checked) {
        console.log(formObj[i].value);
    }
}
return false;
}

It's just an example. I don't know what,when and how you need in actual. Customize it according to your need

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.