0

I'm using the jQuery Form plugin to do an 'ajax' submit of my form, which consists of about 4 radio selects. However, I want the form to not submit if none of the radio buttons have been selected.

Here's my attempt so far, helped by so code I've found in another SO answer and the plugin docs:

$(document).ready(function() {

    var options = { target: '#response',
                    type: 'get',
                    beforeSubmit: ischecked
                    }

    $('#answer').ajaxForm(options);

});


function ischecked(formData, jqForm, options){


    if ($('input:radio', $('#answer').is(':checked')))
    {
            return true;
    }
    else
    {
        return false;
    }
}

I'm sure that the callback ischecked is getting executed ( alert()s will fire, etc ), but the code itself does not appear to be detecting that no radio buttons are selected, and the form continues to be submitted.

Here's the HTML form:

<form action="score.php" id="answer">
    <div style="margin-top: 0pt;" class="ans">
        <input type="hidden" value="127" name="question_id"/>
        <input type="hidden" value="f5043d5122cec6eb981c9a2fc7a0a653" name="user_id"/>
        <input type="hidden" value="36" name="question_key"/>
        <input type="hidden" value="37" name="next_key"/>

        <ul id="answers">
            <li>
                <label>
                    <input type="radio" value="464" name="answer_id"/> mod_rewrite                         </label>
            </li>
            <li>
                <label>
                    <input type="radio" value="465" name="answer_id"/> XML Site Map                         </label>
            </li>
            <li>
                <label>
                    <input type="radio" value="466" name="answer_id"/> Tiny URL                         </label>
            </li>
            <li>
                <label>
                    <input type="radio" value="467" name="answer_id"/> both a) and b)                         </label>
            </li>
            <li>
                <label>
                    <input type="radio" value="468" name="answer_id"/> a), b) and c) can all be used to make it easier for Google to index your dynamically generated URLs.                         </label>
            </li>
                            </ul>
    </div>
    <input type="submit" value="Submit Answer and Get Result" id="answer_submission"/>
</form>

2 Answers 2

2

All jQuery methods return an array, if it can not find a match, it will return an empty array. If you check an 'empty' array with 'if', it will return true.

Try

function ischecked(formData, jqForm, options)
{
    return $('input[name="answer_id"]:checked').length > 0; //Checking that the number of checked items are more than zero. 

    //You should also be able to use $('#answers input:checked'). 

}

EDIT: Updated the code after author posted HTML.

4
  • when i do alert($('#answer:checked').length) it's always 0, even if i have one of the radio boxes selected.
    – Ian
    Jul 21, 2009 at 23:16
  • If your radio buttons are grouped by using the name 'myGroup', try $('input[name="myGroup"]:checked').length Jul 21, 2009 at 23:20
  • yes, checking by the input name now returns the correct number of 'checked' buttons.
    – Ian
    Jul 21, 2009 at 23:23
  • You can also use your #answers selector. The only difference is that you have to add input:checked. See comment in my answer. Jul 21, 2009 at 23:24
2

Try this:

function ischecked(formData, jqForm, options)
{
    return $('input[name=answer]').is('checked');
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.