Check if multiple radio buttons are checked

Question

I'm not very good at Javascript, so I would like to ask help with the following: I have a form, which has multiple radio groups (generated by php code, so I don't know their names OR how many will appear), and I need to check whether they are selected or not. If not I want to show the user which question was not answered (no alert message, but it can be in text form or the question letters turning red).

I've tried googling the problem, but none of the previous answers were good to use in my case.

Here is my code so far:

function formCheck(formID) {
var eLabel=document.getElementById(formID).getElementsByTagName("label");
var radionames=[];
var eInput=document.getElementById(formID).getElementsByTagName("input");
var checker=true;
for (var i=0; i<eInput.length; i++) {
 if (eInput[i].checked) {
  radionames.push(eInput[i].name);
 }
}
for (var i=0; i<eInput.length; i++) {
 for (var j=0; j<radionames.length; j++) {
  if (eInput[i]==radionames[j]) {
  checker=true;
  }
  else {
  alert();
  checker=false;
  }
 }
}
return checker;

}

<form method="post" action="something.php" id="form1" name="form1">
<div class="que">que 1</div>
<div class="answ"><label><input name="2" value="7" type="radio">Answer 1</label></div>
<div class="answ"><label><input name="2" value="5" type="radio">Answer 2</label></div>
<div class="answ"><label><input name="2" value="8" type="radio">Answer 3</label></div>
<div class="answ"><label><input name="2" value="6" type="radio">Answer 4</label></div>
<div class="que">que 2</div>
<div class="answ"><label><input name="1" value="4" type="radio">Answer 1</label></div>
<div class="answ"><label><input name="1" value="1" type="radio">Answer 2</label></div>
<div class="answ"><label><input name="1" value="2" type="radio">Answer 3</label></div>
<div class="answ"><label><input name="1" value="3" type="radio">Answer 4</label></div>

<input class="submit_button" value="Submit the form" onclick="return formCheck('form1');" type="submit">
</form>

I wanted to create an array with the checked input "group" names, and compare it to all the input group names... the remaining ones will show the error (red text, a message, doesn't matter). The problem is this code doesn't really do anything that I can see, and shows the something.php even if I don't have anything checked... If this is not a good method, I'm open to any suggestions.

(I don't want to use jQuery, and the code has to run on older browsers too.)

Sorry for my english, it's not my native language & Thanks for your help in advance! A.

Answer 1

in second For loop in javascript :

use this line :

if (eInput[i].value == radionames[j]) {

instead of : if (eInput[i] == radionames[j]) {

you must realy get the value of eInput[i]

Answer 2

You can use document.querySelectorAll to get all input. You can also fine tune it by passing the type of input. Then filter out the name from the group of radio buttons

function getCheckedButton() {
  var tempNames = [];
  // get all radio button and loop through it to get it's name.
  // use a tempArray to keep unique names
  var radios = document.querySelectorAll('input').forEach(function(item) {
  // if the name is not present then and only then adding name to the array  
  if (tempNames.indexOf(item.name) === -1) {
      tempNames.push(item.name)
    }
  })
  // now looping through temp array
  for (var i = 0; i < tempNames.length; i++) {
    // using the name to select the radio button group to check if any of radio 
    // button in this group is checked or not
    // if not checked then it will give null
    if (document.querySelector('input[name="' + tempNames[i] + '"]:checked') !== null) {
      console.log(document.querySelector('input[name="' + tempNames[i] + '"]:checked').value)
    } else {
      console.log("Radio button of group value " + tempNames[i] + " is unchecked")

    }

  }
}

<div class="que">
  que 1</div>
<div class="answ">
  <label>
    <input name="2" value="7" type="radio">Answer 1</label>
</div>
<div class="answ">
  <label>
    <input name="2" value="5" type="radio">Answer 2</label>
</div>
<div class="answ">
  <label>
    <input name="2" value="8" type="radio">Answer 3</label>
</div>
<div class="answ">
  <label>
    <input name="2" value="6" type="radio">Answer 4</label>
</div>
<div class="que">que 2</div>
<div class="answ">
  <label>
    <input name="1" value="4" type="radio">Answer 1</label>
</div>
<div class="answ">
  <label>
    <input name="1" value="1" type="radio">Answer 2</label>
</div>
<div class="answ">
  <label>
    <input name="1" value="2" type="radio">Answer 3</label>
</div>
<div class="answ">
  <label>
    <input name="1" value="3" type="radio">Answer 4</label>
</div>
<button onclick="getCheckedButton()">Get checked buttons</button>