Select tag clickable under the above transparent div layer

It bothers me a lot, when I can’t find a solution for a problem that do not depend on me… Anywway here is the problem and the work-around solution I found.

Let’s say you have a form on the page, with some <select> tags.

Now, you want that on the onclick event of the submit,  a semi transparent DIV appears above the form, in order to block the user to change the data on the form.

The .html (or whatever you are using) should be like:

<script language=”JavaScript”>
function show(layer_ref) {

  if (document.all) { //for IE 4 or 5 (or 6 beta)
    eval( “document.all.” + layer_ref + “.style.display = ‘block’”);
  }
  if (document.layers) { //for NETSCAPE 4 or below
    document.layers[layer_ref].display = ‘block’;
  }
  if (document.getElementById &&!document.all) {
    myel = document.getElementById(layer_ref);
    myel.style.display = ‘block’;
  }
}
</script>
<div id=”form1″>
 <form>
  <select name=”test”>
   <option>test</option>
  </select>
  <input type=”submit” onclick=”javascript:show(’waiting’);”>
 </form>
</div>
<div id=”waiting” style=”display:none;”>
</div>

In the css, you should put

#waiting {
 position:absolute;
 width: 100%;
 height: 100%;
 top:0;
 left:0;
 background: #cccccc;
 z-index:2;
 -moz-opacity:0.5;
 opacity:0.5;
 filter: Alpha(opacity:80);

}

The problem will immediately appear when you launch the page and click on the submit…

Actually, the select tag will remain active, even if it is under the “waiting” layer.

The only solution I found, is to hide the DIV form1… so, from the above code you should change only:

onclick=”javascript:show(’waiting’);hide(’form1′);”

and of course add the new hide javascript function (just change ‘block’ with ‘none’):

function hide(layer_ref) {

  if (document.all) { //for IE 4 or 5 (or 6 beta)
    eval( “document.all.” + layer_ref + “.style.display = ‘none’”);
  }
  if (document.layers) { //for NETSCAPE 4 or below
    document.layers[layer_ref].display = ‘none’;
  }
  if (document.getElementById &&!document.all) {
    myel = document.getElementById(layer_ref);
    myel.style.display = ‘none’;
  }
}

I am very curious to know if somebody could solve this issue differently, LET ME KNOW!!!