how to disable form and if I clicked a button it should be enable..

[vishnu05]

Hello, I am creating a from with 13 rows and 11 columns. and I have a button "EDIT". The from should be disabled and if I clicked the edit button all the fields in the form should be enabled. As I am new to JavaScript It would be really great if you help me in this case.
I had mentioned the code below.

    <table class="auto-style15" style="width: 100%; height: 100%;">
<tr>
    <td class="auto-style11" rowspan="2" style="width: 70px"><strong>Operation No</strong></td>
    <td class="auto-style22" rowspan="2" style="width: 156px"><strong>Fixture No</strong></td>
    <td class="auto-style22" rowspan="2" style="width: 55px"><strong>Rev</strong></td>
    <td class="auto-style22" colspan="5"><strong>Status</strong></td>
    <td class="auto-style22" rowspan="2" style="width: 59px"><strong>Storage</strong></td>
    <td class="auto-style22" rowspan="2" style="width: 42px"><strong>ChecksTo Be<br />
    Done</strong></td>
    <td class="auto-style22" rowspan="2" style="width: 154px"><strong>Remarks</strong></td>
</tr>
<tr>
    <td class="auto-style11" style="width: 62px"><strong>Design (y/n)</strong></td>
    <td class="auto-style11" style="width: 15px"><strong>Manufacturing 
    </strong> </td>
    <td class="auto-style11" style="width: 57px"><strong>Verification</strong></td>
    <td class="auto-style11" style="width: 44px"><strong>Assembly</strong></td>
    <td class="auto-style11" style="width: 33px"><strong>Validation</strong></td>
</tr>
    <td class="auto-style7" style="width: 70px">
    <input name="Text266" type="text" style="width: 70px" /></td>
    <td class="auto-style7" style="width: 156px">
    <input name="Text135" style="width: 150px" type="text" /></td>
    <td class="auto-style7" style="width: 55px">
    <input name="Text148" style="width: 50px" type="text" /></td>
    <td class="auto-style7" style="width: 62px">
    <input name="Text194" style="width: 60px" type="text" /></td>
    <td class="auto-style7" style="width: 15px">
    <input name="Text204" style="width: 90px" type="text" /></td>
    <td class="auto-style7" style="width: 57px">
    <input name="Text215" style="width: 90px" type="text" /></td>
    <td class="auto-style7" style="width: 44px">
    <input name="Text228" style="width: 60px" type="text" /></td>
    <td class="auto-style7" style="width: 33px">
    <input name="Text227" style="width: 60px" type="text" /></td>
    <td class="auto-style7" style="width: 59px">
    <input name="Text163" style="width: 50px" type="text" /></td>
    <td class="auto-style7" style="width: 42px">
    <input name="Text164" style="width: 50px" type="text" /></td>
    <td class="auto-style7" style="width: 154px">
    <input name="Text286" style="width: 200px" type="text" /></td>
</tr>
</table>

<input name="Button1" type="button" value="edit" class="auto-style12" /> 

[JorgeM]

You can accomplish this using several methods. Here is a quick an easy one, i think... you will need jQuery though. assign your button an id='edit'.

<input name="Button1" type="button" value="edit" class="auto-style12" id="edit" /> 

<script>
$(document).ready(function(){
      $('input[type=text]').attr("disabled", "disabled");
      $('#edit').click(function(event){
          event.preventDefault();
          $('input').removeAttr("disabled");
      }); 
});
</script>

What this script does is that upon page load, all of your input elements of type="text" will be disabled. When you click on the button with an id="edit", the disabled attribute is removed from those input elements.

demo - http://jsfiddle.net/qqn7D/

[Troy III]

...for IE versions you simply do <form disabled ... > .... </form> and the form including all its elements will gray out and be disbled until you decide to enable them again <input type="button" value="edit" onclick="document.forms[0].disabled=false">