Using a repeatable Javascript function to validate multiple radio button groups

Question

I have looked through many different questions here (as well as through Google) and have not been able to find an answer which comes close to what I am looking for.

I have a form (set up using tables) which has multiple radio button groups that I am trying to validate using JS. I know that I could write a function for each group which would accomplish the desired task however I am trying to simplify my JS script using as few functions as possible so here goes.

I am trying to write a function that will check which radio button is selected and perform a different task depending on which selection is made.

HTML Code:

    <tr>
        <td class="left"><span class="required">*</span>Only approved Ingredients Used:</td>
        <td>
            <label><input name="approve" type="radio" required id="approve_0" value="Yes">Yes</label>
            <label><input name="approve" type="radio" required id="approve_1" value="No">No</label>
        </td>
    </tr>

For each section like this (and I have around 15 of these sections) I am trying to us an "onChange="somefunction()" call which will result in an error message "(label name) must be completed" as well as cause a text box to appear for the user to input "corrective actions" in before submitting the form.

Any help would be greatly appreciated

I also would like to stay away from jquery

score 1 · Answer 1 · answered Jan 08 '16 at 10:43

var submit = document.getElementById('submit');
var approve = document.getElementsByClassName('approve');

function approveRad() {
  var selected = false;
  for (var i = 0; i < approve.length; i++) {
    if (approve[i].checked) {
      selected = true;
      break;
    }
  }
  if (!selected) {
    alert(approve.id + " must be completed");
    return;
  }

}

tr {
  width: 30%;
}
input {
  outline: 1px solid blue;
}

<form action="return false">
  <table>

    <tr>
      <td class="left"><span class="required">*</span>Only approved Ingredients Used:</td>
      <td>
    </tr>
    <tr>
      <td>
        <label>
          <input name="approve" class="approve" type="radio" required id="approve_0" value="Yes">Yes</label>
        <label>
          <input name="approve" class="approve" type="radio" required id="approve_1" value="No">No</label>

        <td>
    </tr>
    <tr>
      <td>
        <label>
          <input name="approve" class="approve" type="radio" required id="approve_2" value="Yes">Yes</label>
        <label>
          <input name="approve" class="approve" type="radio" required id="approve_3" value="No">No</label>

      </td>
    </tr>
    <tr>
      <td>
        <label>
          <input name="approve" class="approve" type="radio" required id="approve_4" value="Yes">Yes</label>
        <label>
          <input name="approve" class="approve" type="radio" required id="approve_5" value="No">No</label>

      </td>
    </tr>
    <tr>
      <td>
        <label>
          <input name="approve" class="approve" type="radio" required id="approve_6" value="Yes">Yes</label>
        <label>
          <input name="approve" class="approve" type="radio" required id="approve_7" value="No">No</label>



      </td>
    </tr>
  </table>
  <input id="submit" type="submit" value="Submit" onsubmit="approveRad();" />
</form>

zer00ne · Accepted Answer · 2015-11-08T05:16:53.197

0

JavaScript isn't really needed. You need to wrap your inputs in a form element then you'll see that required will work. Note: I disabled the JS.

UPDATE

Reread your post so I expanded upon the code, but I'm missing something... :\

var submit = document.getElementById('submit');
var approve = document.getElementsByClassName('approve');

function approveRad() {
  var selected = false;
  for (var i = 0; i < approve.length; i++) {
    if (approve[i].checked) {
      selected = true;
      break;
    }
  }
  if (!selected) {
    alert(approve.id + " must be completed");
    return;
  }

}

tr {
  width: 30%;
}
input {
  outline: 1px solid blue;
}

<form action="return false">
  <table>

    <tr>
      <td class="left"><span class="required">*</span>Only approved Ingredients Used:</td>
      <td>
    </tr>
    <tr>
      <td>
        <label>
          <input name="approve" class="approve" type="radio" required id="approve_0" value="Yes">Yes</label>
        <label>
          <input name="approve" class="approve" type="radio" required id="approve_1" value="No">No</label>

        <td>
    </tr>
    <tr>
      <td>
        <label>
          <input name="approve" class="approve" type="radio" required id="approve_2" value="Yes">Yes</label>
        <label>
          <input name="approve" class="approve" type="radio" required id="approve_3" value="No">No</label>

      </td>
    </tr>
    <tr>
      <td>
        <label>
          <input name="approve" class="approve" type="radio" required id="approve_4" value="Yes">Yes</label>
        <label>
          <input name="approve" class="approve" type="radio" required id="approve_5" value="No">No</label>

      </td>
    </tr>
    <tr>
      <td>
        <label>
          <input name="approve" class="approve" type="radio" required id="approve_6" value="Yes">Yes</label>
        <label>
          <input name="approve" class="approve" type="radio" required id="approve_7" value="No">No</label>



      </td>
    </tr>
  </table>
  <input id="submit" type="submit" value="Submit" onsubmit="approveRad();" />
</form>

edited Nov 08 '15 at 05:16

answered Nov 08 '15 at 03:48

zer00ne

41,936
6
41
68

The difficulty with this code is that you have all of the radio buttons part of the same radio group were I have multiple groups with "the same two options" within them. Again I am trying to determine if the "Yes" or "No" option has been selected in order to determine whether or not an explanation is needed. – Dragonman86 Nov 14 '15 at 05:11
You change the radios' `name` attribute for each group, and instead of using `getElementsByName` use `querySelectorAll('input[type="radio"]')`. You weren't very clear about individual groups and don't have a live demo. Let me know if you don't understand. – zer00ne Nov 14 '15 at 07:05
with the call `querySelectorAll('input[type="radio"]')`would this grab all radio buttons at one time, or only the group for which the call was originated for? – Dragonman86 Nov 14 '15 at 07:25
All of them are collected as a static HTMLCollection. When sorting it out, notice the id of the radios, *YES* is the even numbered id (includes 0) and the *NO* are odd numbered ids. – zer00ne Nov 14 '15 at 07:40
Ok, I understand that when I (or the user) hits the 'submit' button that the form would then collect all of this information and pars it through the function. Is there a way to do the parsing (on a case by case basis) while the form is being filled out (i.e. using `onChange()` for each radio group? – Dragonman86 Nov 14 '15 at 07:49
Hmm...yeah you can use a [`callback`](https://api.jquery.com/category/callbacks-object/) to process when `change` is triggered have the data stored in a variable, then [`push`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push) it into an array. While data is accumulating maybe leverage [AJAX's `defered`](http://api.jquery.com/jquery.ajax/). You prbably want to use [JSON.stringify](http://stackoverflow.com/questions/17785592/difference-between-json-stringify-and-json-parse) as well. I'm not well versed in that area, I'm only a front-end developer. :-/ – zer00ne Nov 14 '15 at 10:55
Thank you for the help zer00ne, unfortunately at this point in time I am only working with JS as I have not yet delved into AJAX or JSON yet. As my skill set expands I may be able to eventually solve this issue but for the time being I will just have to settle for a PhP validation or JS validation upon form submission. – Dragonman86 Nov 14 '15 at 19:49

score 0 · Answer 3 · answered Nov 08 '15 at 06:09

When you Select a radio button then call a javascript function and pass the name of that radio button a type. And On the basis of that passed parameter you can distinguish the category of the radio button and in javascript function use if and else for code seperation

<head>
    <script  type="text/javascript">
         function clicked(type){
              if(type == 'company'){
                     var selectedRadio = document.getElementsByName(type);
                     for (i=0; i<selectedRadio.length; i++){
                            if(selectedRadio[i].checked == true)
                                 alert('you select  ' + selectedRadio[i].value);
                     }
               }else if(type == 'post'){
                     var selectedRadio = document.getElementsByName(type);
                     for (i=0; i<selectedRadio.length; i++){
                            if (selectedRadio[i].checked == true)
                                alert('you select  ' + selectedRadio[i].value);
                     }
               }

          }
    </script>

</head>

<body>    
<form>
Select company :
<br>
  <input type="radio"  id="company" name="company" value="TCS" onclick="clicked('company')"> TCS
  <br>
  <input type="radio"  id="company" name="company" value="WIPRO" onclick="clicked('company')"> WIPRO
 <hr>
Select Desigination :
<br>
  <input type="radio"   id="post"  name="post" value="manager"  onclick="clicked('post')" >manager
  <br>
  <input type="radio"  id="post" name="post" value="developer"  onclick="clicked('post')">developer
</form>
<hr>





</body>
</html>

Using a repeatable Javascript function to validate multiple radio button groups

3 Answers3