javascript - Prevent submit while jQuery effect is running - Stack Overflow

admin管理员组

文章数量:1400089

I have this issue that when user clicks a button (in this case, a submit button) multiple times, jQuery will keep playing the animation effects until it has pleted the count of clicks the user has imputed.

This can get quite overwhelming.

How can jQuery tell if it's currently executing an animation to a particular element, so I can prevent user from submitting while the elements effect is still in play?

Notes: the submit button is in a file. Form handling is relayed via AJAX this jQuery is inside the ajax called file.

Here is the main files code:

$('#login_form').submit(function(e) {
        $.post(
               "ajax.php",
               { user: $('[name="username"]').val(), pw: $('[name="password"]').val() },
               function(resposeText) { $('#login_form_response').html(resposeText); },
               "html"
               );
        e.preventDefault();
    });

Here is the code (in ajax'ed' file):

$('#login_form_response').html('Username or Password is inaccurate!')
.slideDown()
.delay(3500)
.slideUp(1500);

I have this issue that when user clicks a button (in this case, a submit button) multiple times, jQuery will keep playing the animation effects until it has pleted the count of clicks the user has imputed.

This can get quite overwhelming.

How can jQuery tell if it's currently executing an animation to a particular element, so I can prevent user from submitting while the elements effect is still in play?

Notes: the submit button is in a file. Form handling is relayed via AJAX this jQuery is inside the ajax called file.

Here is the main files code:

$('#login_form').submit(function(e) {
        $.post(
               "ajax.php",
               { user: $('[name="username"]').val(), pw: $('[name="password"]').val() },
               function(resposeText) { $('#login_form_response').html(resposeText); },
               "html"
               );
        e.preventDefault();
    });

Here is the code (in ajax'ed' file):

$('#login_form_response').html('Username or Password is inaccurate!')
.slideDown()
.delay(3500)
.slideUp(1500);

• javascript
• jquery

Share Improve this question Follow edited Aug 11, 2011 at 20:08 IzzyCooper asked Aug 11, 2011 at 19:54 IzzyCooperIzzyCooper 59611 gold badge55 silver badges1515 bronze badges 2

• 1 Do you want to prevent the submission? or to delay it until the animation is finished? – Madara's Ghost Commented Aug 11, 2011 at 19:56
• Under normal circumstances, jQuery delays the second animation until the first animation is plete. I want to prevent the second animation pletely! – IzzyCooper Commented Aug 11, 2011 at 19:57

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 7

You could unbind the event-handler just before starting the animation, and in the callback function of the animation, just bind the handler again.

$('#button').unbind('click');

$('#animated_element').animate({ animation, stuff}, 1000, function(){
   $('#button').bind('click', handlerFunc);
});

Note:

This is a way to prevent submitting when you are using a customized button (div, or a link), which has an event handler binded to it. It does not work on pure html <input type="submit" /> - buttons, because after unbinding, the standard-submit is going to take effect. I prefer to use customized buttons, mainly because of styling (especially for IE7 and such).

If you want to use a pure html-submit button, you'll have to disable the button (and disabling submit over "enter") or set a flag, that prevents submitting, as other users have already stated in their answers!

Disable the submit button until the animation finishes.

$('animatingElementSelector').animate({height: 200px;}, slow, function() { //ENABLE BUTTON HERE });

var isAnimationRunning;


jQuery('#myForm').bind('submit',function(e){

   if(isAnimationRunning)
    {
        e.preventDefault();
    }
});

Create a variable isAnimationRunning let it know, animation running or not. If running then ignore submit.

http://jsfiddle/praveen_prasad/cfvRf/

On demo click start animation and then try to submit!!

Edit 1

Some ppl have suggested unbinding click of submit button, that wont work. If a submit button is inside a form, clicking it will submit the form, you dont bind click event to submit form, its just pure html, so unbinding wont help in stopping submit event. check this demo

Edit 2 Some ppl have suggested disable the submit button during the animation. That wont always work either, consider a situation where user types something in text box and press enter key, form will be submitted(some browsers will) regardless of submit button being disabled.

Just add disabling button when it clicked :) or hide... or both of this... hide and disable

Try this:

$('#login_form').submit(function(e) {
        $('input[type=submit]', this).attr('disabled', 'disabled').attr('style','opacity: 0.5; filter: alpha(opacity = 50); ');
        $.post(
               "ajax.php",
               { user: $('[name="username"]').val(), pw: $('[name="password"]').val() },
               function(resposeText) { $('#login_form_response').html(resposeText); },
               "html"
               );
        e.preventDefault();
    });

本文标签： javascriptPrevent submit while jQuery effect is runningStack Overflow