Form submission is one of the most commonly used actions in modern websites. Double or duplicate record entry is one of the big pain when user click on the submit button or refresh the page. It is quite scary and risky depending on data sensivity. If submission is not handled properly it can cause data lost even it can wipe up all records in the tables. This issue can be handled in many ways.
Rather than dealing with this problem server side, eating up your CPU process time, it is much easier and better to deal with this problem in client side using JavaScript however server side process and control is more secure. When we talk javascript, what it a better way to write it other than using jQuery?! If you are not familiar with jQuery then head on to jQuery website. I am sure you will love it, and become addicted like me
So this Friday’s quick tip is disabling form submit button on its click or preventing double form submission by disabling submit button.
Consider we have this HTML form in our code:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Page Title</title> <script type="text/javascript" src="jquery-1.6.2.min.js"></script> </head> <body> <form id="myform" action="someUrl.php" method="get"> <input name="username" /> <!-- some more form fields --> <input id="submit" type="submit" /> </form> </body> </html>
Place the following code in the head section of the html page. Here is a jQuery code that disables submit button on form submission:
<script type="text/javascript">
$('#myform').submit(function(){
$('input[type=submit]', this).attr('disabled', 'disabled');
});
</script>
The above jQuery code binds a submit event to our #myform form, then finds its submit button and disables it.
disable submit button on form submission for all forms on your page.
<script type="text/javascript">
// Find ALL <form> tags on your page
$('form').submit(function(){
// On submit disable its submit button
$('input[type=submit]', this).attr('disabled', 'disabled');
});
</javascript>
Enjoy!