1

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"); 
     });
});
Ram
  • 143,282
  • 16
  • 168
  • 197
Greg Neid
  • 23
  • 1
  • 8
  • 1
    If the idea is to prevent double submission, why not fade it out when the form is submitted the first time, rather than if they try to click it after submitting? – BenM Mar 04 '13 at 12:59

1 Answers1

2

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();
    });
});
johntayl
  • 140
  • 2
  • 8