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

This technique "freezes" the screen by bringing a hidden <div> to the foreground, covering the entire screen and preventing the user from interacting with elements behind the <div>.(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 "freeze" the screen...


Source:
<style type="text/css">
   .FreezePaneOff
   {
      visibility: hidden;
      display: none;
      position: absolute;
      top: -100px;
      left: -100px;
   }

   .FreezePaneOn
   {
      position: absolute;
      top: 0px;
      left: 0px;
      visibility: visible;
      display: block;
      width: 100%;
      height: 100%;
      background-color: #666;
      z-index: 999;
      filter:alpha(opacity=85);
      -moz-opacity:0.85;
      padding-top: 20%;
   }

   .InnerFreezePane
   {
      text-align: center;
      width: 66%;
      background-color: #171;
      color: White;
      font-size: large;
      border: dashed 2px #111;
      padding: 9px;
   }
</style>


<script language="JavaScript">
   function FreezeScreen(msg) {
      scroll(0,0);
      var outerPane = document.getElementById('FreezePane');
      var innerPane = document.getElementById('InnerFreezePane');
      if (outerPane) outerPane.className = 'FreezePaneOn';
      if (innerPane) innerPane.innerHTML = msg;
   }
</script>



<p>
   <input type="submit" name="SubmitButton" id="SubmitButton"
          value="Submit"
          onclick="FreezeScreen('Your Data is Being Processed...');" />
</p>



<div align="center" id="FreezePane" class="FreezePaneOff">
   <div id="InnerFreezePane" class="InnerFreezePane"> </div>
</div>


[Return to the article...]