skip to Main Content

I am currently using a nice bit of JavaScript code to remove the ‘readonly’ and ‘disabled’ attributes from several form fields in a single form for ‘editing/updating’ purposes.

The code works fine when I only have a single form on a page. But I would like to be able to have multiple forms on a single page, each with its own ‘edit button’, which should remove only the attributes from its respective form.

In the example forms I have posted… I included a ‘form_1’ and a ‘form_2’. With each form having its own edit button (respectively; editBt_1 and editBtn_2).

I have tried several things to modify the JS code, so the individual edit buttons would only remove the attributes from their respective forms. But so far, I have not been able to do so respectively.

Any ideas would be helpful at this point.

const button = document.querySelector('#editBtn_1');
const elements = document.querySelectorAll('input, textarea, select');

button.addEventListener('click', () => {
  elements.forEach((element) => {
    element.removeAttribute('readonly');
    element.removeAttribute('disabled');
  });
});
<h2>Form One</h2>

<form id="form_1" action="nextPage_1.php" method="POST">
  <input type="text" name="dataField_A" readonly /><br /><br />

  <input type="text" name="dataField_B" readonly /><br /><br />

  <button form="none" id="editBtn_1" name="editBtn_1">Edit</button>

  <button type="submit" form="form_1" id="form_1_Btn" name="form_1_Btn">
        Submit
      </button>
</form>
<br />

<h2>Form Two</h2>

<form id="form_2" action="nextPage_2.php" method="POST">
  <input type="text" name="dataField_C" readonly /><br /><br />

  <select name="dataSelect_D" disabled>
    <option value="D1">D1</option>
    <option value="D2">D1</option>
    <option value="D3">D1</option>
  </select><br /><br />

  <textarea name="textarea_E" readonly></textarea><br /><br />

  <button form="none" id="editBtn_2" name="editBtn_2">Edit</button>

  <button type="submit" form="form_2" id="form_2_Btn" name="form_2_Btn">
        Submit
      </button>
</form>
<br />

2

Answers


  1. document.querySelectorAll will capture elements within the second form, so we need to limit it to the form.

    const elements = button.form.querySelectorAll("input, textarea, select");
    

    Also remove the form="none" attribute from the button or set it to match the form’s id

    <button type="button" id="editBtn_1" name="editBtn_1">Edit</button>
    
    Login or Signup to reply.
  2. You can use the event object from the button click event to access its parent element (which is the form element in your example code) and use a foreach loop to loop thru each child element to remove its attributes:

    const buttons = document.querySelectorAll('button[id^="editBtn_"]');
    
    buttons.forEach((button) => {
      button.addEventListener('click', (e) => {
        const form = e.currentTarget.parentElement;
        Array.from(form.elements).forEach((el) => {
          el.removeAttribute('readonly');
          el.removeAttribute('disabled');
        });
      });
    });
    <h2>Form One</h2>
    
    <form id="form_1" action="nextPage_1.php" method="POST">
      <input type="text" name="dataField_A" readonly /><br /><br />
    
      <input type="text" name="dataField_B" readonly /><br /><br />
    
      <button form="none" id="editBtn_1" name="editBtn_1">Edit</button>
    
      <button type="submit" form="form_1" id="form_1_Btn" name="form_1_Btn">
            Submit
          </button>
    </form>
    <br />
    
    <h2>Form Two</h2>
    
    <form id="form_2" action="nextPage_2.php" method="POST">
      <input type="text" name="dataField_C" readonly /><br /><br />
    
      <select name="dataSelect_D" disabled>
        <option value="D1">D1</option>
        <option value="D2">D2</option>
        <option value="D3">D3</option>
        <option value="D4">D4</option>
      </select><br /><br />
    
      <textarea name="textarea_E" readonly></textarea><br /><br />
    
      <button form="none" id="editBtn_2" name="editBtn_2">Edit</button>
    
      <button type="submit" form="form_2" id="form_2_Btn" name="form_2_Btn">
            Submit
          </button>
    </form>
    <br />
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search