jquery : submitting a form twice

Question

I'm creating a registration form for a client for an event they're hosting. The basic user details are submitted to a third-party system (ie name, email etc.) but the rest of the fields need to be sent via email to the client.

I need something like this to happen :

1. List item
2. user fills out form
3. jquery bvalidator checks the form for required fields
4. form is submitted (via ajax) to a seperate page where an email is sent to client
5. form is then submitted (regular POST method) to third-party system
6. on success user is passed back to a 'thank you' url.

Here is the code I've tried using, but it gets caught in a loop repeatedly submitting itself to the 'email' page, and never submits to the external url.

If I replace the $('#form1').submit(); with an alert it submits only once to the email page and then displays the alert correctly.

var myvalidator = $('#form1').bValidator(optionsGrey);

$('#form1').submit(function() {
  if (myvalidator.isValid()) {

    $.ajax({
      data: $('#form1').serialize(),
      type: "POST",
      url: "email_send.asp",
      success: function() {
        $('#form1').submit();
      }
    });
  }
  return false;
});

Any suggestions as to how I can fix this?

Answer 1

Try:

$('#form1').unbind('submit').submit();

Answer 2

try unbinding submit event on your success: method of your ajax call by calling unbind

$('#form1').unbind('submit'); 
$('#form1')[0].submit(); // call native submit

http://api.jquery.com/unbind/

Answer 3

You can use unbind() to revert to the default behaviour.

var myvalidator = $('#form1').bValidator(optionsGrey);

$('#form1').submit(function() {

    if(myvalidator.isValid()) {

        $.ajax({
            data: $('#form1').serialize(),
            type: "POST",
            url: "email_send.asp",
            success: function(){
                $('#form1').unbind('submit');
                $('#form1').submit();
            }
        });

    }

    return false;

});