Question

I have a form with radio buttons in it. Before the form submits I need to check that 10 radio buttons are checked. This code does the trick (i.e. I get the alert back when 10 have been checked) but I can’t work out where to put my return true and return false statements to stop it or let it submit if my count has reached 10.

  $('.submit').click(function () {
      var radios = $(':radio');
      var count = 0;
      $.each(radios, function () {
          if ($(this).is(':checked')) {
              count++;
              alert(count);
          }

          if (count === 10) {
              alert('hi')
              return true;
          }
      })
      return false;
})

At the moment the return false at the bottom stops the form submitting even when the count is 10 but I need to return false in there to stop the form submitting right away.

Hope this makes sense.

Answer 1

Use event.preventDefault() instead of return false;. Also, use the submit event instead of the click event:

var the_form = $('#theformid');
the_form.submit(function (event) {
    var radios = the_form.find(':radio:checked');
    if (radios.length !== 10) {
        event.preventDefault();
        // provide feedback here.
    }
});

If you attach to the click event, your form can still be submitted using the keyboard.