Disable button onclick to prevent double submition

Today I had an simple task: to disable a button after a click to prevent double submitting the form data. I wanted to solve it as simple as possible. So here’s the final solution

<form method="POST" action="">
<input type="submit" value="Submit" name="submitBtn" onclick="this.disabled=true;this.form.submit();" >
</form>

It works like a charm – it disables the submit button and it submits the data.

NOTE
I have found a interesting bug in Chrome. My input button had its name set to “submit” (name=”submit”), but then chrome was reporting following error:

Uncaught TypeError: Property 'submit' of object #<HTMLFormElement> is not a function generate-form.php:onclick

The reason for the error when trying to call form.submit() is that your submit button is called “submit”. This means that the “submit” property of your Form object is now a reference to the submit button, overriding the “submit” method of the form’s prototype. Renaming the submit button allowed me to call the submit() method without that error, so I renamed it to “submitBtn”.

Tags: disable button onclick, onclick disable button, uncaught typeerror: property \submit\ of object #<htmlformelement> is not a function, asp:Button onclick disable, chrome disables form buttons on submit, html onclick disable button, how to disable button on click, how to disable html button after function call, disable a click, prevent multiple click on button click html, html prevent-click-highlight, visual c onclick disable button, html input disable onclick, htm javascript disable button on click, how to stop clicking of button in html, asp net double click prevent techniques example, disableonclick, disable optionbutton on double click, disable button when input cross clicked, disable button after submit javascript chrome, desactivate click buttom edit in xtragridcontrol, when button clicked disable button in javascript
How to backup data on second HDD using Google Drive
How to edit .po language files in WordPress themes

Comments

  1. Thanks, nice and straight forward

  2. button gets disabled but does not submit the data.

Leave a Reply

Your email address will not be published / Required fields are marked *