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>