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();" >
It works like a charm – it disables the submit button and it submits the data.
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, button onclick disable
Today, while I was working with jQuery I ran on this error “Uncaught SyntaxError: Unexpected end of input” while troubleshooting my code in Chrome. And since Chrome it didn’t report error on any specific line I had to Google for it 🙂