Share this page 

Disable/Enable a FORMTag(s): Form


The first example will gray out a given form and disabled its components. 
<html>
<script type="text/javascript">
function grayer(formId, yesNo) {
   var f = document.getElementById(formId), s, opacity;
   s = f.style;
   opacity = yesNo? '40' : '100';
   s.opacity = s.MozOpacity = s.KhtmlOpacity = opacity/100;
   s.filter = 'alpha(opacity='+opacity+')';
   for(var i=0; i<f.length; i++) f[i].disabled = yesNo;
}
window.onload=function(){grayer('f_1',true);}; // disabled by default
</script>
<style type="text/css">
form {  _height: 1%; /* hack IE */
         padding: 10px; background:#ff5;
      }
</style>
<body>

<button onclick="grayer('f_1',false);">
Enable Form 1</button>
<button onclick="grayer('f_1',true);">
Disable Form 1</button>

<p>
<form id="f_1" action="#" onsubmit="return false;">
<p>Form 1 : <input name="test" type="text"> <input type="submit">
</form>

</body>
</html>
Try it here :

Form 1 :

A simpler solution is to scan the form's control and set the disabled attribute for the INPUT (type=text or type=submit) and TEXTAREA components (but not BUTTON). 
<script type="text/javascript">
  function disableform(formId) {
     var f = document.forms[formId].getElementsByTagName('input');
     for (var i=0;i<f.length;i++)
         f[i].disabled=true
     var f = document.forms[0].getElementsByTagName('textarea');
     for (var i=0;i<f.length;i++)
         f[i].disabled=true
  }

    function enableform(formId) {
       var f = document.forms[formId].getElementsByTagName('input');
       for (var i=0;i<f.length;i++)
           f[i].disabled=false
       var f = document.forms[0].getElementsByTagName('textarea');
       for (var i=0;i<f.length;i++)
           f[i].disabled=false
    }
</script>

<p>
<form id="testform2" action="#" onsubmit="return false;">
<p>Form 2 : <input name="test" type="text"> <input type="submit"></form>
</p>
<button onclick="enableform('testform2');">
Enable Form 2</button>
<button onclick="disableform('testform2');">
Disable Form 2</button>
Try it here :

Form 2 :

mail_outline
Send comment, question or suggestion to howto@rgagnon.com