I want to prevent double click on my submit button. How do I do that? I tried different codes but nothing works at this time. Here is what I have for now:
And JavaScript for the click handler (assuming you can use jQuery):
function onSaveButtonClick(me) {
$(me).prev("div").show();
$(me).attr("disabled","disabled");
return true;
}
Inside this click handler, I will call client side validators and usually submit the form using $("form").submit(). If you rely on the button's default behavior for submitting the form be sure to return true from the handler.
The only option is to disable the button once the user clicks it or hit the enter button. But then you have to enable the button back on "asynchronous submit" or on validation errors in order to allow the user to submit the form again. You have already
achieved the solution in your code of disabling the submit button. now you have to place your code to enable it.
Please refer the following link for more options, but all of the options are directly or indirectly try to do the same thing you have done.
I want to prevent double click on my submit button. How do I do that? I tried different codes but nothing works at this time. Here is what I have for now:
The issue is related to the form.submit() method, after submit the form, the page reload and the same with the submit button, so the disabled attribute not working.
I suggest you could try to use the Asp.net Server Button control to submit the form, then use the Enabled property to disable the button. Code as below:
MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
None
0 Points
2 Posts
Disable double click on submit button
Oct 12, 2016 07:44 PM|spider1212|LINK
Hi,
I want to prevent double click on my submit button. How do I do that? I tried different codes but nothing works at this time. Here is what I have for now:
<INPUT TYPE="submit" NAME="Submit" VALUE="Submit" onclick="form.submit(); javascript=this.disabled = true;">
Contributor
6864 Points
1980 Posts
Re: Disable double click on submit button
Oct 12, 2016 08:50 PM|RichardY|LINK
You are close but I don't think the JavaScript in the onclick attribute is correct.
I like to show a progress spinner and either hide or disable the button. I use markup like this:
<div class="page-actions clearfix"> <div class="progress-image-container float-left"> <span class="loading-image-large"></span> </div> <button type="submit" id="save-button" onclick="onSaveButtonClick(this)" class="primary-action">Save</button> </div>Css like this:
.float-left { float:left; } .progress-image-container { display: none; } .loading-image-large { display: inline-block; width: 32px; height: 32px; background-repeat: no-repeat; background-image: url(Your_GIF) }And JavaScript for the click handler (assuming you can use jQuery):
function onSaveButtonClick(me) { $(me).prev("div").show(); $(me).attr("disabled","disabled"); return true; }Inside this click handler, I will call client side validators and usually submit the form using $("form").submit(). If you rely on the button's default behavior for submitting the form be sure to return true from the handler.
None
0 Points
2 Posts
Re: Disable double click on submit button
Oct 13, 2016 07:06 PM|spider1212|LINK
Thanks RichardY
I tried this but it did not work for me.
Contributor
3290 Points
866 Posts
Re: Disable double click on submit button
Oct 13, 2016 07:23 PM|senthilwaits|LINK
spider1212,
The only option is to disable the button once the user clicks it or hit the enter button. But then you have to enable the button back on "asynchronous submit" or on validation errors in order to allow the user to submit the form again. You have already achieved the solution in your code of disabling the submit button. now you have to place your code to enable it.
Please refer the following link for more options, but all of the options are directly or indirectly try to do the same thing you have done.
http://www.the-art-of-web.com/javascript/doublesubmit/
Senthil Kumar Sundaram
Contributor
6864 Points
1980 Posts
Re: Disable double click on submit button
Oct 13, 2016 07:23 PM|RichardY|LINK
What did not work? Show me your relevant code and any errors.
All-Star
45081 Points
6887 Posts
Microsoft
Re: Disable double click on submit button
Nov 07, 2016 11:40 AM|Zhi Lv - MSFT|LINK
Hi spider1212,
The issue is related to the form.submit() method, after submit the form, the page reload and the same with the submit button, so the disabled attribute not working.
I suggest you could try to use the Asp.net Server Button control to submit the form, then use the Enabled property to disable the button. Code as below:
code behind:
protected void btn_Click(object sender, EventArgs e) { btn.Enabled = false; }Best regards,
Dillion
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.