check for empty radio input

Question

I want to check if the user selects a radio button. I have coded this:

HTML

<form action="myServlet" method="post">
        <input type="radio" id="rating-input-1-5" name="ratingInput1" value="5">
        <input type="radio" id="rating-input-1-4" name="ratingInput1" value="4">
        <input type="radio" id="rating-input-1-3" name="ratingInput1" value="4">        
        //etc
<button type="submit" class="myButton" onclick="sendSuccess()">Submit</button>
</form>

JS

   function sendSuccess(){

        var len = document.formRate.ratingInput1.length;
        var flag;

        for(i=0; i<len; i++){
            if (document.formRate.ratingInput[i].checked){
                flag = true;
            }
            else{
                flag = false;
                break;
            }   
        }

        if(flag === false){
            console.log('noooooo');
            return false;
        }else{
            console.log('yesssss');
        }
    }

But its not working.

Solution 1

Working demo http://jsfiddle.net/cXPYQ/

Hope this fit your needs :) Code

  $("form").submit(function () {
    var flag = true;
    $(':radio').each(function () {
        name = $(this).attr('name');
        if (flag && !$(':radio[name="' + name + '"]:checked').length) {
            alert(name + ' group not checked');
            flag = false;
        }
    });
    return flag;
});

Solution 2

You can do it with jQuery using Attribute Equals Selector [name="value"] to find radio button with same name and :checked to get only checked elements. You can use length to check if you get any checked radio button or not. The length will be zero of none of radio button is checked and will be greater then zero if one or more radio button is checked.

Live Demo

if($('[name=ratingInput1]:checked').length)
     console.log('Yes');
else
     console.log('No');

Solution 3

try this

<form name="formRate" action="myServlet" method="post">
    <input type="radio" id="rating-input-1-5" name="ratingInput1" value="5">
    <input type="radio" id="rating-input-1-4" name="ratingInput1" value="4">
    <input type="radio" id="rating-input-1-3" name="ratingInput1" value="4">        
    <button type="submit" class="myButton" onclick="return sendSuccess();">Submit</button>
</form>

function sendSuccess(){

var flag = false;

var len = $('input:radio[name="ratingInput1"]:checked').size();

    if(len == 0){
        console.log('noooooo');
        flag = false;
    }else{
        console.log('yesssss');
        flag = true;
    }
return flag;
}

Comments

[BrownEyes]

I don't really follow what you're trying to achieve, do you want a console.log once a radio button is check, or do you want it when the button is clicked?

[yaylitzis]

i just want to know, if the user doesn't select anything.

[Ahmad]

You also need to return false or preventDefault in the function, otherwise form will continue submission

[yaylitzis]

formRate: just forgot to take it off..