Prevent double submission of forms in jQuery

Question

I have an form that takes a little while for the server to process. I need to ensure that the user waits and does not attempt to resubmit the form by clicking the button again. I tried using the following jQuery code:

<script type="text/javascript">
$(document).ready(function(){
    $("form#my_form").submit(function(){
      $('input').attr('disabled','disabled');
      $('a').attr('disabled','disabled');
       return true;
        })
    });
</script>

When I try this in Firefox everything gets disabled but the form is not submitted with any of the POST data it is supposed to include. I can't use jQuery to submit the form because I need the button to be submitted with the form as there are multiple submit buttons and I determine which was used by which one's value is included in the POST. I need the form to be submitted as it usually is and I need to disable everything right after that happens.

Thanks!

Answer 1

...but the form is not submitted with any of the POST data it is supposed to include.

Correct. Disabled form element names/values will not be sent to the server. You should set them as readonly elements.

Also, anchors cannot be disabled like that. You will need to either remove their HREFs (not recommended) or prevent their default behaviour (better way), e.g.:

<script type="text/javascript">
$(document).ready(function(){
    $("form#my_form").submit(function(){
      $('input').attr('readonly', true);
      $('input[type=submit]').attr("disabled", "disabled");
      $('a').unbind("click").click(function(e) {
          e.preventDefault();
          // or return false;
      });
    });
</script>

Answer 2

Disable them after 50 ms or so, so that the browser has all the time to submit the form with all necessary parameters.

<script type="text/javascript">
    $(document).ready(function(){
        $("form#my_form").submit(function(){
            setTimeout(function() {
                $('input').attr('disabled', 'disabled');
                $('a').attr('disabled', 'disabled');
            }, 50);
        })
    });
</script>