Need to Create a Javascript Function To Determine the Value of a Radio Button Upon Submission

Question

There are 3 radio buttons (2008, 2011, 2014) and a Next button. Can someone help me write some javascript code so I can determine when the Next button is clicked, that a radio button was selected and if so which value was it? I would like to use the values 2008, 2011, or 2014. Thank you.

<div class="modal-answer-block five ng-binding ng-scope"
 ng-repeat="option in vm.vars.q1options track by $index"> <input
 type="radio" id="q1-a0" name="q1-a0" ng-value="5"
 ng-model="vm.vars.q1selected" class="ng-pristine ng-valid ng-empty
 ng-touched" value="5"> <br> <br> 2008 </div> <div
 class="modal-answer-block five ng-binding ng-scope" ng-repeat="option
 in vm.vars.q1options track by $index"> <input type="radio" id="q1-a1"
 name="q1-a1" ng-value="4" ng-model="vm.vars.q1selected"
 class="ng-pristine ng-valid ng-empty ng-touched" value="4"> <br> <br>
 2011 </div> <div class="modal-answer-block five ng-binding ng-scope"
 ng-repeat="option in vm.vars.q1options track by $index"> <input
 type="radio" id="q1-a2" name="q1-a2" ng-value="3"
 ng-model="vm.vars.q1selected" class="ng-pristine ng-valid ng-empty
 ng-touched" value="3"> <br> <br> 2014 </div> <button
 class="modal-next" ng-click="savePanel($event, 1);">NEXT</button>

Answer 1

Form Controls

If you are not using Angular you should simplify your HTML -- it's a disaster. The following demo uses Event Delegation by registering events on an ancestor tag (form). By doing this, all descendant or nested tags (radios and button) within the ancestor tag can react to events the ancestor tag is registered to. Basically one tag to handle events for an unlimited amount of tags.

Referencing the tags is made possible by HTMLFormControlsCollection and HTMLFormElement interfaces. The Event Object properties are:

• event.target Points to the clicked or changed tag. (radios and button)

• event.currentTarget Points to the tag registered to the events. (form)

• event.type The current triggered event. (click and change)

---

Demo

Details commented in demo

// Reference the form
var main = document.forms.main;

// Callback function -- pass the Event Object
function formControls(event) {
  // Clicked or changed tag (button or radio)
  var tgt = event.target;
  // Tag registered to an event (form)
  var cur = event.currentTarget;
  // Event type (click or change)
  var evt = event.type;

  /*
  Pass the event type
  in case the event is 'change'
    if the changed tag is a radio
    log its value
  in case the event is 'clicked'
    if the clicked tag is a button
    log its id
  if its anything other than what was previously mentioned
  do nothing.
  */
  switch (evt) {
    case 'change':
      if (tgt.name === 'rad') {
        console.log(tgt.value);
      }
      break;
    case 'click':
      if (tgt.tagName === 'BUTTON') {
        console.log(tgt.id);
      }
      break;
    default:
      break;
  }
}

/*
Register the click and change events on the form
callback function is formControls()
*/
main.onchange = formControls;
main.onclick = formControls;

<form id='main'>
  <input id='rad0' class='rad' name='rad' type='radio' value='2008'>
  <label for='rad0'>2008</label><br>
  <input id='rad1' class='rad' name='rad' type='radio' value='2011'>
  <label for='rad1'>2011</label><br>
  <input id='rad2' class='rad' name='rad' type='radio' value='2014'>
  <label for='rad2'>2014</label><br>
  <button id='next' type='button'>Next</button>
</form>

Answer 2

Use .addEventListener() to do something when the button is clicked. Then use document.querySelectorAll() to get all the radio buttons. To make your code more effecient, inside the selector, you can use :checked so that you only get the checked radio buttons - not all of them.

document.getElementById("next").addEventListener("click", function() {
  var values = document.querySelectorAll('.radio_button:checked');
  var output = [];
  
  for (var i = 0; i < values.length; i++) {
    output.push(values[i].value);
  };
  
  console.log(output);
});

<div class="modal-answer-block five ng-binding ng-scope" ng-repeat="option in vm.vars.q1options track by $index"> <input type="radio" id="q1-a0" name="q1-a0" ng-value="5" ng-model="vm.vars.q1selected" class="ng-pristine ng-valid ng-empty
 ng-touched radio_button" value="2008"> <br> <br> 2008 </div>
<div class="modal-answer-block five ng-binding ng-scope" ng-repeat="option
 in vm.vars.q1options track by $index"> <input type="radio" id="q1-a1" name="q1-a1" ng-value="4" ng-model="vm.vars.q1selected" class="ng-pristine ng-valid ng-empty ng-touched radio_button" value="2011"> <br> <br> 2011 </div>
<div class="modal-answer-block five ng-binding ng-scope" ng-repeat="option in vm.vars.q1options track by $index">
  <input type="radio" id="q1-a2" name="q1-a2" ng-value="3" ng-model="vm.vars.q1selected" class="ng-pristine ng-valid ng-empty
 ng-touched radio_button" value="2014"> <br> <br> 2014 </div> <button class="modal-next" ng-click="savePanel($event, 1);" id="next">NEXT</button>