Member Avatar for 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" />
Edited by vishnu05
  • 3 Contributors
  • 2 Replies
  • 199 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by Troy III

Dani AI

Generated

Quick summary and recommendations (short, practical):

  • Two simple, robust choices: wrap the inputs in a <fieldset> and toggle that fieldset’s disabled property (recommended), or iterate the form’s elements and set each element’s .disabled property.
  • ’s jQuery idea is fine if you already use jQuery. ’s suggestion to put disabled on the <form> is unreliable — the standard way to disable a group is <fieldset disabled>, or disable individual controls.
  • Important: controls with disabled are not submitted with the form. Use readonly for text inputs if you still need their values posted, or copy values into hidden inputs before submit.

Example (HTML + vanilla JS toggle — put your table inside the fieldset):

<form id="opForm">
  <fieldset id="dataField" disabled>
    <!-- your table and inputs go here -->
  </fieldset>

  <button type="button" id="editBtn">Edit</button>
  <button type="submit">Save</button>
</form>
const field = document.getElementById('dataField');
const editBtn = document.getElementById('editBtn');

editBtn.addEventListener('click', () => {
  field.disabled = false;               // enable all controls inside
  const first = field.querySelector('input, textarea, select');
  if (first) first.focus();             // move focus to first field
});
document.getElementById('opForm').addEventListener('submit', () => {
  field.disabled = true;                // re-disable on submit (optional)
});

Troubleshooting & tips

  • If you need form data when fields look “disabled”, make text inputs readOnly instead of disabled, or mirror values into hidden inputs before submit.
  • Style the disabled state with :disabled to ensure a clear visual (some user agents already grey them).
  • Never rely on client-side disabling for security — always validate on the server.
  • If you want the edit state to persist across reloads, save a boolean in localStorage and apply it on load.

This approach keeps markup simple, works without external libraries, and avoids browser quirks from trying to disable the <form> element itself.

Recommended Answers

All 2 Replies

Member Avatar for 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/

Edited by JorgeM
Member Avatar for 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">

Edited by Troy III
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.