javascripthtmlssjs

HTML Submit table dependent upon checkbox

I have a table that is paginated that will allow end users to modify inline in the table itself.

I am using a submit button that redirects and saves the input with SSJS.

My table could potentially have 5k+ records and the table will be paginated.

I would like to only update records that have a checkbox that is checked.

I am using this link to test https://www.w3schools.com/html/tryit.asp?filename=tryhtml_form_submit

with this code:

 <!DOCTYPE html>
    <html>
    <body>
    
    <h2>HTML Forms</h2>
    
    <form action="/action_page.php">
    
    <table>
    <tr>
    <td>
    Check for save
    </td>
      <td>
      First name
      </td>
      <td>
    Last Name  
      </td>
      </tr>
    
      <tr>
      <td>
        <input type="checkbox" id="horns" name="feature" value="horns" />
      </td>
      <td>
      <input type="text" name="firstname" value="Mic1key">
      </td>
      <td>
      <input type="text" name="lastname" value="Mouse">
      </td>
    </tr>
      <tr>
      <td>
      <input type="checkbox" id="horns" name="feature" value="horns" />
      </td>
      <td>
      <input type="text" name="firstname" value="Mic1key">
      </td>
      <td>
      <input type="text" name="lastname" value="Mouse">
      </td>
    </tr>
      </table>
      <input type="submit" value="Submit">
    </form> 
    </body>
    </html>

so this works because in the SSJS we can check which ones have a value of checked but I have a fear of performance issues once 5k+ records are within the table.

Is there anyway to just submit just the records where the checkbox is checked? or is there any ulterior logic?

Solution

  • If you are only wanting the form to submit when the checkbox is checked, you can add an event listener for the 'submit' event and prevent default if the checkbox is unchecked like so:

    let submitButton = document.getElementById('mySubmitBtn');
let checkbox = document.getElementById('myCheckbox');

submitButton.addEventListener('submit', function(e){
    if(!checkbox.checked){
        e.preventDefault();
    }
});

    This way the form will only submit if the checkbox is checked.

    This question looks like it was addressed here Submit only non empty inputs