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?

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?

• javascript
• jquery

Share Follow asked Jun 1, 2011 at 12:58 cethceth 45.3k6363 gold badges189189 silver badges300300 bronze badges 1

• 1 possible duplicate of What is the best approach for (client-side) disabling of a submit button? – Felix Kling Commented Jun 1, 2011 at 13:00

Add a ment  | 

7 Answers 7

Sorted by: Reset to default 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.

Try

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

and then

$("input.submit").removeAttr('disabled');

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

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

Live Demo

In JQuery you can do it like

$(".submit").click(function() {
  $(".submit").attr("disabled","disabled");
  //Post your form here..
});

you can disable in jquery like this:

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

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>

You can disable double form submit like this:

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