Disable Form Buttons on Submit

Sometimes a web server may be slow to responsd from a form submit, thus giving a user the opportunity and motive to press the button again. Rarely does this produce good results, so I use this technique to prevent the situation.

When any submit button is pressed the entire page is covered with a translucent <DIV> that slightly dims the content and prevents any of the on-screen controls from being touched during the wait for a server response. Simple, clean and effective.

Note that it does rely on JQUERY, so do take care to put a reference to this in your page header <SCRIPT> area.

Place this piece of <STYLE> in your page, I typically have it in my page header function:

<style>
  .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%;
    z-index: 999;
    filter:alpha(opacity=15);
    -moz-opacity: 0.25;
    padding-top: 20%;
    background: rgb(110, 110, 110);
    background: rgba(110, 110, 110, .2);
  }
</style>

Place this <DIV> and <SCRIPT> after all of your page output, I typically make it the last thing in my page footer function:

<div align="center" id="FreezePane" class="FreezePaneOff"></div>
<script type="text/javascript">
  $('input:submit').click(function FreezeScreen(){
     scroll(0,0);
     var outerPane = document.getElementById("FreezePane");
     if (outerPane) outerPane.className = "FreezePaneOn";
  })
</script>

This technique performs well in virtually every browser and in situations ranging from an instant response to a long delay.