Question

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>
Was it helpful?

Solution

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.

OTHER TIPS

Try this:

function ischecked(formData, jqForm, options)
{
    return $('input[name=answer]').is('checked');
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top