CODEWITHSUNDEEP
jqueryfadeoutpreventdefaultdouble-submit-prevention
Greg Neid
Greg Neid

Reputation: 23

jQuery fadeOut in .submit()

The code below is to prevent double click submissions and it seems to work. It prevents the double submission of data, but the fadeOut is not executed. Anyone know why? After the submission, the submit button, if pressed will cause the fadeOut to execute.

$("#form1").submit(function() { 
     $("#form1Submit").click(function(event){ 
         event.preventDefault();
         $("#form1Submit").fadeOut("slow"); 
     });
});

Upvotes: 1

Views: 2583

Answers (1)

johntayl
johntayl

Reputation: 140

The fade out is not executed because upon submission of #form1 the click event is only then being bound to #form1submit. The first time the submit button is clicked, the form is submitted and then the event is bound. (If the form is just doing a postback, the event will never be bound due to a page refresh)

You can simply swap the submit and click, once the submit button is clicked, the button fades and then continues on to form submission.

$("#form1Submit").click(function(event) {
    event.preventDefault();
    $(this).fadeOut("slow", function(){
        //Once button has faded, invoke the form submission
        $("#form1").submit();
    });
});

Upvotes: 2

Related Questions