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...

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

      position: absolute;
      top: 0px;
      left: 0px;
      visibility: visible;
      display: block;
      width: 100%;
      height: 100%;
      background-color: #666;
      z-index: 999;
      padding-top: 20%;

      text-align: center;
      width: 66%;
      background-color: #171;
      color: White;
      font-size: large;
      border: dashed 2px #111;
      padding: 9px;

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

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

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

[Return to the article...]