CODEWITHSUNDEEP
javascript
Drew
Drew

Reputation: 111

Selecting inputs in javascript

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

Upvotes: 0

Views: 79

Answers (5)

Ahmad Asjad
Ahmad Asjad

Reputation: 823

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

Upvotes: 0

RobG
RobG

Reputation: 147513

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. :-)

Upvotes: 0

choz
choz

Reputation: 17898

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.

Upvotes: 1

Ken Bellows
Ken Bellows

Reputation: 6942

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

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

Upvotes: 0

Barmar
Barmar

Reputation: 782488

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

Upvotes: 1

Related Questions