Recipe 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) for more recipes that combine JavaScript and CSS.