jquery submit form problem

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.

Stephen · Accepted Answer · 2010-11-23 15:32:33Z

3

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.

edited Nov 23, 2010 at 15:32

answered Nov 23, 2010 at 15:25

Stephen

19k10 gold badges62 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ken Redler · Accepted Answer · 2010-11-23 17:46:19Z

2

Try something like this:

$('.submit').click( function(){
  return $('#yourform :radio:checked').length == 10;
});

Hopefully there's a container id like #yourform you can use to make the selector more specific, as above.

Edit: As per your comment, if you want to intercept the form submission reliably (e.g., even when submitted without the button being clicked), as others have suggested you should attach behavior to the form's submit event.

$('#yourform').submit( function(e){
  var hasTen = $(this).find(':radio:checked').length == 10;
  if( !hasTen ){
    e.preventDefault();
    alert('Please check ten boxes.');
  }
});

edited Nov 23, 2010 at 17:46

answered Nov 23, 2010 at 15:23

Ken Redler

23.9k8 gold badges60 silver badges69 bronze badges

1 Comment

Mike Rifgin Over a year ago

That's great. Very succinct...but I need to provide an alert if 10 haven't been checked so I need something with an if. event.preventDefault() looks like the badger.

Tommaso Barbugli · Accepted Answer · 2010-11-23 15:39:50Z

0

Why do you check the count inside the iteration ? You should solve it by putting the check outside the each func.

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

  if (count == 10) {
          return true;
          alert("great!");
  }
  return false;
})

I also suggest you to use console.log(msg) instead of alert(msg), way much better to debug ;)

EDIT: I see now your comment about the alert, I thought it was there for debug purposes that's why a told you about the console.log ;)

edited Nov 23, 2010 at 15:39

answered Nov 23, 2010 at 15:30

Tommaso Barbugli

12.1k2 gold badges46 silver badges42 bronze badges

Collectives™ on Stack Overflow

jquery submit form problem

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related