Member Avatar for chineerat

Hi!
I am trying to store multiple text values into an array when a check box is checked.
for example when row1 checkbox is checked the values row1col1 and row1col2 are stored in an array. note however row1col1 and row1col2 are editable and not readonly.
for example:

<table border="1"> <form id="form1" name="form1" method="post" action="">   
<tr>    
<td>row1       <input type="checkbox" name="row1" id="row1" /> (when checked the text fields are editable)         </td>   
  <td>       <input name="col1" type="text" id="col1" value="row1col1" /></td>    
 <td>       <input name="col2" type="text" id="col2" value="row1col2" /></td>  </tr>     
 <tr>     <td>row2       <input type="checkbox" name="row2" id="row2" />(when checked the text fields are editable)            </td>     
<td>       <input name="r2c1" type="text" id="r2c1" value="row2col1" /></td>    
 <td>       <input name="r2c2" type="text" id="r2c2" value="row2col2" /></td>  </tr>  
</form> 
 </table>

can anyone help?

  • 2 Contributors
  • 3 Replies
  • 187 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by Airshow

Dani AI

Generated

Because you want a snapshot of the editable fields when the form is submitted, collect the checked rows and their current values in the form's submit handler and send that snapshot to the server (either as a hidden input containing JSON, or by sending it via AJAX). This avoids relying on in-memory arrays that disappear on a full-page refresh — a point raised — and keeps the server-side parsing straightforward.

A minimal, safer HTML structure (unique names/classes, plus one hidden carrier field):

<form id="form1" method="post" action="/submit">
  <table>
    <tr data-index="1">
      <td><input type="checkbox" class="row-check"></td>
      <td><input type="text" name="rows[1][col1]" class="col col1" value="row1col1"></td>
      <td><input type="text" name="rows[1][col2]" class="col col2" value="row1col2"></td>
    </tr>
    <!-- more rows -->
  </table>

  <input type="hidden" id="selectedRowsJson" name="selectedRowsJson" value="">
  <button type="submit">Submit</button>
</form>

Collect and serialize at submit time; also toggle editability when the row checkbox changes:

// enable/disable text inputs when checkbox changes
document.querySelectorAll('.row-check').forEach(chk => {
  chk.addEventListener('change', () => {
    const tr = chk.closest('tr');
    tr.querySelectorAll('input[type="text"]').forEach(i => i.disabled = !chk.checked);
  });
});

// on submit, build snapshot and put JSON into hidden field
document.getElementById('form1').addEventListener('submit', function () {
  const snapshot = [];
  document.querySelectorAll('tr[data-index]').forEach(tr => {
    const chk = tr.querySelector('.row-check');
    if (chk && chk.checked) {
      snapshot.push({
        col1: tr.querySelector('.col1').value,
        col2: tr.querySelector('.col2').value
      });
    }
  });
  document.getElementById('selectedRowsJson').value = JSON.stringify(snapshot);
  // allow normal submit (or preventDefault() and send via AJAX instead)
});

Notes and troubleshooting: avoid duplicate IDs (use classes or indexed names), choose JSON for flexible server parsing (or disable inputs in unselected rows so only selected-row fields are posted), and remember to handle the hidden JSON on the server (parse JSON into arrays/objects). This gives a deterministic "snapshot at submit" behavior that matches what asked for while addressing the page-reload concern raised.

Recommended Answers

All 3 Replies

Member Avatar for Airshow

Chineerat,

It depends on the purpose of the array.

Is is to store a snapshot or the history of values in the input fields?

  • Snapshot: We would overwrite each entry when it is updated.
  • History: We would add new entries without destroying anything.

Airshow

Member Avatar for chineerat

Thanks Airshow for you interest.

I would like store a snapshot of the values, or to put it across better: I would like to store the values of the "checked row" at the time of submission.

Hope that explains it better.

Member Avatar for Airshow

With a regular HTML form submission the whole page (including the javascript environment) will be refreshed, hence any javascript arrays/values/objects will be lost and unavailable to the refreshed page.

There's are number of possible solutions :

  • Save the values in a cookie and read them back. This is fairly easy but not a particularly good solution.
  • Make an AJAX request instead of submitting the form. This would be a major change as it would require server-side as well as client-side programming. The advantage would be that the page remains intact, therfore no need to save/recreate your "checked row" status as it's already very reliably stored in the DOM (the checkboxes themselves).
  • Server-side, write the page with apprioriate rows already checked. This is the solution to go for if you are going to stick with a regualr form submission.

Airshow

Edited by Airshow because: n/a
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.