CODEWITHSUNDEEP
javascriptjqueryonsubmit
Nick
Nick

Reputation: 417

On submit, do animation and wait to complete, then submit

$('form').submit(function(e) {

    e.preventDefault();

    $('.thing').fadeOut('slow', function() {

        $('form').submit();

    });

});

Do you see the dilemma here? I'm trying to fade out a div when a form is submitted, then wait for the animation to complete, then actually submit the form.

But once I prevent the default behavior, animate the div, then try submit the form, the script loops back around, hits preventDefault() and avoids submitting again.

I would use onClick for the initial event, but I want pressing the enter key to work as well. Is this possible? Thanks!

Upvotes: 1

Views: 398

Answers (2)

PHP Geek
PHP Geek

Reputation: 4033

You can use:

$('form').bind('submit' , function(e) {
 e.preventDefault();
  $('.thing').fadeOut('slow', function() {
   $('form').unbind();
  });
});

Bind and then unbind

Upvotes: 1

Chris Riebschlager
Chris Riebschlager

Reputation: 1333

You can remove the submit binding after it's been fired.

$('form').submit(function(e) {
    e.preventDefault();
    $('form').off();
    $('.thing').fadeOut('slow', function() {
        $('form').submit();
    });
});

Upvotes: 1

Related Questions