HTML 提交 table 取决于复选框

Question

我有一个 table 分页，允许最终用户在 table 本身中内联修改。

我正在使用一个提交按钮，它使用 SSJS 重定向和保存输入。

我的 table 可能有 5k+ 条记录，table 将被分页。

我只想更新选中复选框的记录。

我正在使用这个 link 来测试 https://www.w3schools.com/html/tryit.asp?filename=tryhtml_form_submit

使用此代码：

 <!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>

所以这是可行的，因为在 SSJS 中我们可以检查哪些具有检查的值，但我担心一旦 5k+ 记录在 table.

内就会出现性能问题

有没有办法只提交选中复选框的记录？还是有什么不可告人的逻辑？

Answer 1

如果您只想在复选框被选中时提交表单，您可以为 'submit' 事件添加一个事件侦听器，并在复选框未被选中时防止默认，如下所示：

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

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

这样只有复选框被选中时表单才会提交。

这个问题似乎已在此处解决 Submit only non empty inputs

HTML 提交 table 取决于复选框

HTML Submit table dependent upon checkbox

html

javascript

ssjs