4

I have a form which upload a big file to server. Something like this:

<form id="myform" action="myaction.php">
  <p>
    <!--fields -->
  </p>
  <input type="submit" class="submit" value="Send" />
</form>

I need to prevent the user resubmit the form while the previous processing is not ready. How can I disable submit button before processing and enable the button after submit action?

ceth
  • 44,198
  • 62
  • 180
  • 289
  • 1
    possible duplicate of [What is the best approach for (client-side) disabling of a submit button?](http://stackoverflow.com/questions/46079/what-is-the-best-approach-for-client-side-disabling-of-a-submit-button) – Felix Kling Jun 01 '11 at 13:00

7 Answers7

2

Try

$("input.submit").attr('disabled', 'disabled');

and then 

$("input.submit").removeAttr('disabled');
Karl-Bjørnar Øie
  • 5,554
  • 1
  • 24
  • 30
2

The correct way to do this in jQuery, as of version 1.6, is with the new prop() method.

Also important is that you attach the event to the form's submit event, NOT to the submit button itself. That way if someone hits enter while filling out the form, like I'm sure we all do, the button will still be disabled.

Correct code:

$("#myform").submit(function() {
    $("#myform .submit").prop('disabled', true);
}

If you really want to block access to the form being submitted multiple times, you would stop the form from being submitted too, not just disable the button:

var myform = $("#myform");
myform.submit(function() {
    if($.data(myform.get(0), 'submitting') {
        return false;
    }

    $.data(myform.get(0), 'submitting', true);
    $(".submit", myform).prop('disabled', true);
});

All other solutions are WRONG! :)

Just kidding, they'll work too, but this will catch more exceptional logic and handles the property correctly.

Jordan
  • 31,971
  • 6
  • 56
  • 67
  • heh, I was wondering if it would be considered a property or not. +1. – Loktar Jun 01 '11 at 13:06
  • Keep in mind [`.data()` is accessible via your object already as well](http://api.jquery.com/data/), e.g. `myform.data('submitting')` which is easier to parse in most cases. The global access version can be simpler for the multiple form case as well, e.g. `$.data(this, 'submitting')`, allowing it to work on many forms at once in an ajax style situation. – Nick Craver Jun 01 '11 at 13:48
  • Just want to check. Is it correct that 'disabled' automatically will set to false after end of sumbiting? – ceth Jun 03 '11 at 07:36
  • @demas you will have to code that in. I assume you're talking about if the form failed client-side validation? If it failed, you would have to set disabled to false manually. If the page is actually refreshed or re-navigated to, then yes, the button would be enabled again. – Jordan Jun 04 '11 at 01:23
  • Good answer, you're missing a bracket on this line `if($.data(myform.get(0), 'submitting') {` – nmit026 Oct 04 '16 at 03:09
  • Thanks @nmit026, I fixed it – Jordan Oct 05 '16 at 14:30
1

You can add the attribute disabled="true" to the element after they click it.

$('.submit').click(function(){$(this).attr('disabled',true)});

Live Demo

Loktar
  • 34,764
  • 7
  • 90
  • 104
1

In JQuery you can do it like

$(".submit").click(function() {
  $(".submit").attr("disabled","disabled");
  //Post your form here..
});
Muhammad Ummar
  • 3,541
  • 6
  • 40
  • 71
  • Well, it is a question. How can submit my form from js? – ceth Jun 01 '11 at 13:03
  • This solution doesn't take the form submit event into account. See my answer. – Jordan Jun 01 '11 at 13:06
  • 1
    @Jordan, It will fire the event, on button press, @demas you can easily submit your form in javascript use `document.formname.submit()` – Muhammad Ummar Jun 01 '11 at 13:14
  • what I mean is that all you're doing is disabling the button, but someone could easily just hit enter on any text field and the form will still submit. – Jordan Jun 01 '11 at 13:15
0

you can disable in jquery like this: 

$(".submit").attr("disabled","disabled");
Glenn Ferrie
  • 10,290
  • 3
  • 42
  • 73
0

Assuming you have jQuery available.

<form id="myform" action="myaction.php" onsubmit="submitForm();">
  <p>
    <!--fields -->
  </p>
  <input id="submit_button" type="submit" class="submit" value="Send" />
</form>

<script>
    function submitForm(){
         $("#submit_button").attr("disabled","disabled");
    }
</script>
Gabriel Spiteri
  • 4,896
  • 12
  • 43
  • 58
0

You can disable double form submit like this:

<form id="myform" action="myaction.php" onsubmit="this.onsubmit=function(){return false;}">
baotuo
  • 64
  • 4