CODEWITHSUNDEEP
jqueryhtmlforms
Ghanshyamji Gupta
Ghanshyamji Gupta

Reputation: 429

Validate a form to ensure atleast one radio button is checked in a group

I am making a form with radio buttons in it. I am able to validate all other input except radio button. I got a accepted solution for this in this site

Using JQuery to check if no radio button in a group has been checked

but this is not working for me

http://jsfiddle.net/ghan_123/trr185L2/2/

my code

<input type='radio' name='datetime' value='1'>1
<input type='radio' name='datetime' value='2'>2
<input type='radio' name='datetime' value='3'>3
<input type='radio' name='datetime' value='4'>4
<input type='radio' name='datetime' value='5'>5
<br><button id='buttonnew'>validate</button>

jquery

$(document).ready(function(){
    $("#buttonnew").click(function(){

        var selection=document.querySelector('input[name="datetime"]:checked').value;
    // my method    
if(selection=='')
        {
            alert('please select a value');
        }
        else
        {
            alert('your selected value is '+selection);
        }
// end my method

        //  other method ( given in this site link above) 

  if (!$("input[name='datetime']:checked").val()) {
   alert('Nothing is checked!');
}
else {
  alert('One of the radio buttons is checked!');
}    
       // end other method   



    });
});

when nothing is checked no alert message appears. else both give alert message on select one of these.

Upvotes: 5

Views: 1359

Answers (3)

Norlihazmey Ghazali
Norlihazmey Ghazali

Reputation: 9060

Simply use this solution :

$(document).ready(function () {
 $("#buttonnew").click(function () {
    // variable for increament value
    var inc = 0;
    // loop over all of radio button
    $('[name="datetime"]').each(function () {
        // if any of radio button was checked
        // then increase inc variable to one value
        if ($(this).is(':checked')) inc++;
    });
    // if variable stay with 0 value
    // so, we know that no radio button was clicked
    if (inc == 0) {
        alert('Please check one');
        return;
    }

    // continue your another action
 });
});

DEMO

Upvotes: 1

Guruprasad J Rao
Guruprasad J Rao

Reputation: 29683

The problem here was you were trying to get value of radio button when none was checked and it used to you error on console. So first you need to check whether anything is checked and if yes then assign the value else assign empty value as below:

DEMO

$(document).ready(function(){
    $("#buttonnew").click(function(){
        var selection=document.querySelector('input[name="datetime"]:checked')!=null?
                      document.querySelector('input[name="datetime"]:checked').value:"";
        //Conditional operator
       if(selection!='')
        {
            alert('your selected value is '+selection);
        }
        else
        {
            alert('please select a time slot');
        }
    });
});

Upvotes: 1

Umesh Sehta
Umesh Sehta

Reputation: 10659

Try this one. I think you want something like this.

$(document).ready(function(){
    $("#buttonnew").click(function(){

        var chek=document.querySelector('input[name="datetime"]:checked');
        if(chek!=null){
        var selection=document.querySelector('input[name="datetime"]:checked').value;
        console.log(selection);
    // my method    
if(selection=='')
        {
            alert('please select a time slot');
        }
        else
        {
            alert('your selected value is '+selection);
        }
        }
// end my mehod

        //  other method  
  if (!$("input[name='datetime']:checked").val()) {
   alert('Nothing is checked!');
}
else {
  alert('One of the radio buttons is checked!');
}      
       // end other method   



    });
});

jsfiddle example: http://jsfiddle.net/ghan_123/trr185L2/2/

Upvotes: 1

Related Questions