How to disable submit button once it has been click?

Question

Hello All,

I am having a submit button at the end of the form.

I have added the condition onClick="this.disabled=true; this.value='Sending…'; this.form.submit();" in the submit button, but when it moves to the next page, the parameters did not pass and null values are passed.

Can you please help

Answer 1

I don't think you need this.form.submit(). The disabling code should run, then it will pass on the click which will click the form.

Answer 2

Probably you're submitting the form twice. Remove the this.form.submit() or add return false at the end.

you should end up with onClick="this.disabled=true; this.value='Sending…';"

Answer 3

Your question is confusing and you really should post some code, but this should work:

onClick="this.disabled=true; this.value='Sending...'; submitForm(); return false;"

I think that when you use this.form.submit() it's doing what happens naturally when you click the submit button. If you want same-page submit, you should look into using AJAX in the submitForm() method (above).

Also, returning false at the end of the onClick attribute value suppresses the default event from firing (in this case submitting the form).

Answer 4

Disabled HTML forms elements aren't sent along with the post/get values when you submit the form. So if you disable your submit button once clicked and that this submit button have the name attribute set, It will not be sent in the post/get values since the element is now disabled. This is normal behavior.

One of the way to overcome this problem is using hidden form elements.

Answer 5

If you disable the button, then its name=value pair will indeed not be sent as parameter. But the remnant of the parameters should be sent (as long as their respective input elements and the parent form are not disabled). Likely you're testing the button only or the other input fields or even the form are disabled?

Answer 6

You should first submit your form and then change the value of your submit:

onClick="this.form.submit(); this.disabled=true; this.value='Sending…'; "

Answer 7

Thanks all for your answers

but I just thought of another way, can I do something:

when the user clicks on the submit button a jquery message will be shown sending or submitting ? and will redirect to the next page?

Answer 8

Thanks all for your answers

but I just thought of another way, can I do something:

when the user clicks on the submit button a jquery message will be shown sending or submitting ? and will redirect to the next page?

Answer 9

the trick is to delayed the button to be disabled, and submit the form you can use window.setTimeout('this.disabled=true',0); yes even with 0 MS is working

Answer 10

Using JQuery, you can do this..

$("#submitbutton").click(
   function() {
      alert("Sending...");
      window.location.replace("path to url");
   }
);