5.5. Setting Up a Submit-Once-Only Button
Problem
You want to keep people from clicking the Submit button more than once.
Solution
First create a class for keeping the button from being displayed:
.buttonSubmitHide { display: none; }
Then use the following JavaScript programmed to switch styles by class selectors:
<script language="JavaScript" type="text/javascript"> function classChange(styleChange,item) { item.className = styleChange; } </script>
Now trigger the function by using an onsubmit
event to remove the Submit button from the
web document:
<h2>Order Confirmation</h2> <form action="login.php" method="post" onsubmit="classChange('buttonSubmitHide',submit); return true"> <div align="center"> <p>Are you sure you want to purchase 12 cans of soda over the Web?</p> <label for="uname">Final Price:</label> <input type="text" name="uname" id="uname" value="$7.95" /> <br /> (includes tax, s+h extra)<br /> <input type="submit" name="submit" value="submit" class="buttonSubmit" /> </div> </form>
Discussion
The JavaScript function in the Solution triggers a change in which a
style is applied to the element. You must use the
form’s onsubmit
event to execute
the function so that the form’s action will still be
executed. If the function were triggered with an
onclick
event on the Submit button, some browsers
would execute only the class-changing function. Then, because the
button is no longer visible, the user would not be able to trigger
the form.
See Also
JavaScript and DHTML Cookbook (O’Reilly) ...
Get CSS Cookbook now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.