Prevent Users from Submitting a Form Twice (Demo #1)

This technique uses the client-side onclick event to disable the clicked subit button and update its button text. To test it out, go ahead and click the Submit button. It will become disabled and its text will change to "Submitted". (Note: this page's form doesn't submit anywhere... but in a real example, the form submission would be occurring while the button is disabled...)

 


Click the button to see how it can be disabled and have its text changed when clicked...


Source:
<script>
   function DisableButton(b)
   {
      b.disabled = true;
      b.value = 'Submitting';
      b.form.submit();
   }
</script>

&;ltp>
   Click the button to see how it can be disabled and
   have its text changed when clicked...
</p>

&;ltp>
   <input type="submit" name="SubmitButton" id="SubmitButton"
          value="Submit"
          onclick="DisableButton(this);" />
</p>


[Return to the article...]