views:

556

answers:

2

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>
+1  A: 

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.

SolutionYogi
when i do alert($('#answer:checked').length) it's always 0, even if i have one of the radio boxes selected.
Ian
Could you post your HTML?
SolutionYogi
If your radio buttons are grouped by using the name 'myGroup', try$('input[name="myGroup"]:checked').length
SolutionYogi
yes, checking by the input name now returns the correct number of 'checked' buttons.
Ian
You can also use your #answers selector. The only difference is that you have to add input:checked. See comment in my answer.
SolutionYogi
thanks a lot, that works great. :)
Ian
+1  A: 

Try this:

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