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”.

This post helped you out? Why not buy me a coffee?

Amount
Your message for me
Tags: disable button onclick, onclick disable button, uncaught typeerror: property \submit\ of object #<htmlformelement> is not a function, javascript disable button onclick, onclick link diable input javascipt, javascript onclick disable button, onclick disable, disable button on click, onclick event button disable, html prevent button double click, html prevent onclick event, java objec disable onclick, javascirpt diable button onclick, javascript disable button click, javascript disable button from click, prevent double click on html button, javascript how to prevent button click, javascript set input disabled onclick, html onclick event disable, html disable clic, click button once and disable permanentlyin html, disable a tag text onclick, disable double click html, disable double click on onclick, disable html button on click, disable onclick, disable submit button on click, disable the parent onclick event in javascript, disabling a button, how to disable button inside onclick method, how to disable button mouseup event, how to disable onclick event in jsp, how to temporarily disable a button html, html button prevent click, html disable button on click
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 *