jQuery: Check, if any radio-button isn't checked

Question

I refer to this question. Trying to use this snipped, but "my" markup is very ugly and I cannot change it.

<form method="post">
  <table cellspacing="0" cellpadding="0" border="0" width="100%">
    <tr>
      <td style="padding-left:20px; padding-right:20px">
        <table cellspacing="3" cellpadding="2" border="0" width="100%">
          <tr>
            <td valign="top">1.</td>
            <td valign="top" colspan="2">Question</td>
          </tr>
          <tr>
            <td></td>
            <td width="5"><input value="question1_yes" name="question1" id="question1_yes" type="radio" /></td>
            <td><label for="question1_yes">Yes</label></td>
          </tr>
          <tr>
            <td></td>
            <td><input value="question1_no" name="question1" id="question1_no" type="radio" /></td>
            <td><label for="question1_no">No</label></td>
          </tr>
          <tr>
            <td></td>
            <td><input value="question1_dont_know" name="question1" id="question1_dont_know" type="radio" /></td>
            <td><label for="question1_dont_know">Don't know</label></td>
          </tr>
        </table>
      </td>
    </tr>
    <tr>
      <td style="padding-left:20px; padding-right:20px">
        <table cellspacing="3" cellpadding="2" border="0" width="100%">
          <tr>
            <td valign="top">2.</td>
            <td valign="top" colspan="2">Question</td>
          </tr>
          <tr>
            <td></td>
            <td width="5"><input value="question2_yes" name="question2" id="question2_yes" type="radio" /></td>
            <td><label for="question2_yes">Yes</label></td>
          </tr>
          <tr>
            <td></td>
            <td><input value="question2_no" name="question2" id="question2_no" type="radio" /></td>
            <td><label for="question2_no">No</label></td>
          </tr>
          <tr>
            <td></td>
            <td><input value="question2_dont_know" name="question2" id="question2_dont_know" type="radio" /></td>
            <td><label for="question2_dont_know">Don't know</label></td>
          </tr>
        </table>
      </td>
    </tr>
    <tr>
      <td style="padding-left:20px; padding-right:20px">
        <table cellspacing="3" cellpadding="2" border="0" width="100%">
          <tr>
            <td valign="top">3.</td>
            <td valign="top" colspan="2">Question</td>
          </tr>
          <tr>
            <td></td>
            <td width="5"><input value="question3_yes" name="question1" id="question3_yes" type="radio" /></td>
            <td><label for="question3_yes">Yes</label></td>
          </tr>
          <tr>
            <td></td>
            <td><input value="question3_no" name="question1" id="question3_no" type="radio" /></td>
            <td><label for="question3_no">No</label></td>
          </tr>
          <tr>
            <td></td>
            <td><input value="question3_dont_know" name="question3" id="question1_dont_know" type="radio" /></td>
            <td><label for="question3_dont_know">Don't know</label></td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
  <input type="submit">
</form>

How do I have to change this snipped?

Robin Leboeuf · Answer 1 · 2014-03-19T16:01:15.530

0

if your markup is fixed and considering every question is nested in a table, you can just check the number of checked input and compare it to the number of tables (in your main table) you have, something like this:

$('form').on('submit',function(e){
    // Counting number of questions
    arrayQuestions = new Array();
    $('input[type=radio').each(function(){
        arrayQuestions.push(this.name);
    });

    jQuery.unique( arrayQuestions );
    nbQuestion = arrayQuestions.length;
    nbAnsweredQuestion = $('input[type=radio]:checked').length;
    if(nbAnsweredQuestion < nbQuestion) {
         alert('You must answer every question');
         e.preventDefault();
    }
});

See the fiddle DEMO HERE

EDIT

Note that in your third question, the two first answer have the name "question1", probably a typo...

EDIT2

Adding jQuery.unique to improve the question counting (so as it's not based on tables anymore)

edited Mar 19 '14 at 16:01

answered Mar 19 '14 at 15:44

Robin Leboeuf

2,096
1
13
14

Thank you. Unfortunately there are some other tables which contain different content. And yes, it's a typo. Sorry. – santa Mar 19 '14 at 15:49
You can replace the table count by juste adding a class to your questions wrapper, it will work :) – Robin Leboeuf Mar 19 '14 at 15:53
I edited the fiddle, using a different way, without modifying the markup, just using jQuery.unique to get the number of questions, have a look – Robin Leboeuf Mar 19 '14 at 16:01

score 0 · Answer 2 · answered Mar 19 '14 at 15:46

If you are trying to make sure that all the radio buttons have at least one value, here is what I would do:

var radio_names = ['question1','question2'];
var form_data = $('form').serializeArray();//Use a better selector by using an ID?
$.each(form_data,function(index,input){
    var radio_index = radio_names.indexOf(input.name)
    if(radio_index>-1 && input.value!='')//If it is a radio we monitor, and not empty of value
        radio_names.splice(radio_index, 1);//Remove it from the list, so we know which we are missing
});
if(radio_names.length>0)//We did not fill all radio, display list of unfilled ones
alert(radio_names);

In english now: We list the radio we want to monitor, serialize the form into an array so it is easier to play with. Loop through the array to check the inputs in it and remove the radio we find. Once done, we should be left with an empty list of radios... If not, shout to warn the user.

score 0 · Accepted Answer · answered Mar 19 '14 at 15:54

check this demo

I have correct name question3 in the third question(was question1)

I have insert class to find table(on table class="table") and on question (class="question")

<form method="post">
  <table cellspacing="0" cellpadding="0" border="0" width="100%">
    <tr>
      <td style="padding-left:20px; padding-right:20px">
        <table cellspacing="3" cellpadding="2" border="0" width="100%" class="table">
          <tr>
            <td valign="top">1.</td>
            <td valign="top" class="question" colspan="2">Question</td>
          </tr> 
          <tr>
            <td></td>
            <td width="5"><input value="question1_yes" name="question1" id="question1_yes" type="radio" /></td>
            <td><label for="question1_yes">Yes</label></td>
          </tr>
          <tr>
            <td></td>
            <td><input value="question1_no" name="question1" id="question1_no" type="radio" /></td>
            <td><label for="question1_no">No</label></td>
          </tr>
          <tr>
            <td></td>
            <td><input value="question1_dont_know" name="question1" id="question1_dont_know" type="radio" /></td>
            <td><label for="question1_dont_know">Don't know</label></td>
          </tr>
        </table>
      </td>
    </tr>
    <tr>
      <td style="padding-left:20px; padding-right:20px">
        <table cellspacing="3" cellpadding="2" border="0" width="100%" class="table">
          <tr>
            <td valign="top">2.</td>
            <td valign="top" class="question" colspan="2">Question</td>
          </tr>
          <tr>
            <td></td>
            <td width="5"><input value="question2_yes" name="question2" id="question2_yes" type="radio" /></td>
            <td><label for="question2_yes">Yes</label></td>
          </tr>
          <tr>
            <td></td>
            <td><input value="question2_no" name="question2" id="question2_no" type="radio" /></td>
            <td><label for="question2_no">No</label></td>
          </tr>
          <tr>
            <td></td>
            <td><input value="question2_dont_know" name="question2" id="question2_dont_know" type="radio" /></td>
            <td><label for="question2_dont_know">Don't know</label></td>
          </tr>
        </table>
      </td>
    </tr>
    <tr>
      <td style="padding-left:20px; padding-right:20px">
        <table cellspacing="3" cellpadding="2" border="0" width="100%" class="table">
          <tr>
            <td valign="top">3.</td>
            <td valign="top" class="question" colspan="2">Question</td>
          </tr>
          <tr>
            <td></td>
            <td width="5"><input value="question3_yes" name="question3" id="question3_yes" type="radio" /></td>
            <td><label for="question3_yes">Yes</label></td>
          </tr>
          <tr>
            <td></td>
            <td><input value="question3_no" name="question3" id="question3_no" type="radio" /></td>
            <td><label for="question3_no">No</label></td>
          </tr>
          <tr>
            <td></td>
            <td><input value="question3_dont_know" name="question3" id="question1_dont_know" type="radio" /></td>
            <td><label for="question3_dont_know">Don't know</label></td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
  <input type="submit">
</form>

js

$(document).on('submit', 'form', function () {

    var validate = true;
    var unanswered = new Array();

    // Loop through available sets
    $('.table').each(function () {
        // Question text
        var question = $(this).find(".question");
        // Validate
        if (!$(this).find('input').is(':checked')) {
            // Didn't validate ... dispaly alert or do something
            unanswered.push(question.text());
            question.css('color', 'red'); // Highlight unanswered question
            validate = false;
        }
    });

    if (unanswered.length > 0) {
        msg = "Please answer the following questions:\n" + unanswered.join('\n'); 
        alert(msg);
    }
    return validate;
});

fiddle http://jsfiddle.net/ZjmD5/

Only one thing left: How to add the ordinal numerals to the questions? — santa, Mar 19 '14 at 16:11
you can add another class to the number and retrive with $(".noQuestion").text Otherwise update this line unanswered.push($(question).prev().text() + question.text()); I have updated the fiddle — user3401335, Mar 19 '14 at 16:14

jQuery: Check, if any radio-button isn't checked

3 Answers3