html/jquery - 跨多个表 td 时表单不提交答案

【问题标题】：html/jquery - form doesnt submit when its across multiple table td'shtml/jquery - 跨多个表 td 时表单不提交
【发布时间】：2018-10-07 02:23:59
【问题描述】：

我将行动态附加到我的 html 表中，该表包含 id 为“update”的表单，提交时我想从多个选择中发送值，id 为 #myselect，textarea 为 id 为“#note”。我还使用引导程序来设置文档元素的样式。

但是当我的两个元素都在单独的表格单元格中时出现问题，提交按钮出现在表单之外，因此它不会触发提交操作。

“#deleteit”表单工作正常，但“#update”在提交时不执行任何操作

$('#mytable > tbody').append("<tr><td>1</td><td>name</td><td><form id='update'><select multiple class='form-control' id='myselect' name='myselects'><option>test1</option><option>test2</option></select></td><td><textarea class='form-control' id='note' name='notes' rows='3'></textarea></td><td><button type='submit' class='btn btn-info btn-sm'>update</button></form></td><td><form id='deleteit' method='post'><button type='submit' class='btn btn-danger btn-sm'>delete</button></form></td></tr>");

$(document).on('submit', '#update', function(e) {
  alert("update form submitted")
  return false
});

$(document).on('submit', '#deleteit', function(e) {
  alert("delete form submitted")
  return false
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="mytable">
  <tbody>

  </tbody>
</table>

【问题讨论】：

更新按钮在表单内..
所以你认为。查看呈现的代码 - 您的 HTML 无效：<tr><td>1</td><td>name</td><td><form id="update"><select multiple="" class="form-control" id="myselect" name="myselects"><option>test1</option><option>test2</option></select></form></td><td><textarea class="form-control" id="note" name="notes" rows="3"></textarea></td><td><button type="submit" class="btn btn-info btn-sm">update</button></td><td><form id="deleteit" method="post"><button type="submit" class="btn btn-danger btn-sm">delete</button></form></td></tr>
问题是 - 为什么它在表单之外呈现“更新”按钮，或者为什么早于它应该出现在 DOM 中
您不能跨表格单元格附加表单。它将关闭它认为有效的表单。而是将表单包裹在行或表格周围，并有一个提交和一个按钮

标签： jquery html forms

【解决方案1】：

您的 HTML 无效。

用那个替换它：

<tr>
  <td>1</td>
  <td>name</td>
  <td>
    <form id='update'>
      <select multiple class='form-control' id='myselect' name='myselects'>
        <option>test1</option>
        <option>test2</option>
      </select> 
      <textarea class='form-control' id='note' name='notes' rows='3'></textarea> 
      <button type='submit' class='btn btn-info btn-sm'>update</button> 
    </form>
  </td>
  <td>
    <form id='deleteit' method='post'><button type='submit' class='btn btn-danger btn-sm'>delete</button></form>
  </td>
</tr>

您的更新事件将被触发。

工作示例：

<table id="mytable">
  <tbody>

  </tbody>
</table>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script>
  $('#mytable > tbody').append("<tr><td>1</td><td>name</td><td> <form id='update'> <select multiple class='form-control' id='myselect' name='myselects'> <option>test1</option> <option>test2</option> </select> <textarea class='form-control' id='note' name='notes' rows='3'></textarea> <button type='submit' class='btn btn-info btn-sm'>update</button> </form> </td><td> <form id='deleteit' method='post'><button type='submit' class='btn btn-danger btn-sm'>delete</button></form> </td></tr>");

  $(document).on('submit', '#update', function(e) {
    alert("update form submitted");
    return false;
  });

  $(document).on('submit', '#deleteit', function(e) {
    alert("delete form submitted");
    return false;
  });
</script>

【讨论】：