Technology: JavaScript
Level: Intermediate
Depth: Brief
For any form, clicking the “Submit” button twice results in the submission of the form two times. This results in the duplicate backend logic and is so a flaw.
This situation can be safeguarded with either client-side or server-side logic. Depending upon the server-side programming language, we can employ our back-end logics to detect the multiple submission of the same form and act similarly. This should not be of any problem. So in this post, I will throw in some code related to client-side JavaScript.
| Code | Remarks |
| <input type=”submit” value=”Submit” onClick=”this.onClick=new Function(‘return false;’);” > | The button doesn’t submit the form again |
| <input type=”submit” value=”Submit” onClick=”this.disabled=true” /> | The submit button is disabled once it’s been pressed the first time |
| <input type=”submit” value=”Submit” onClick=”this.value=’Processing…’” /> | The user is notified that the form is under process. But doesn’t do anything to prevent the re-submission |
| <script type=”text/javascript” language=”JavaScript”><!–
start_over_at = 3; counter = 0; function monitor() { counter++; if(counter >= start_over_at) { counter = 1; } if(counter > 1) { return false; } return true; } // –></script> <input type=”submit” value=”Submit” onClick=”return monitor() ” /> |
This script allows the submission to go through if the user clicks more than a specified number of times |
Some useful links:
0 Responses to “Preventing multiple form submission”