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