如何使用jQuery提交表单而不刷新然后添加另一个表格行

Posted 2023-05-09

【中文标题】如何使用jQuery提交表单而不刷新然后添加另一个表格行

【英文标题】：How to use jQuery to submit a form without refreshing and then add another table row

【发布时间】：2021-08-15 01:04:02

【问题描述】：

我正在为我的工作设置一个输入表单项目，对于某些表，用户需要能够在进入下一个表单之前插入多个数据行。我在表格中设置了表格，表格单元格中有输入组，如下所示：

$("#addRow").submit(function() 
  $("#tableData").each(function() 
    var tds = '<tr>';
    jQuery.each($('tr:last td', this), function() 
      tds += '<td>' + $(this).html() + '</td>';
    );
    tds += '</tr>';
    if ($('tbody', this).length > 0) 
      $('tbody', this).append(tds);
     else 
      $(this).append(tds);
    
  );
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form action='/costs_hours' method="POST">
  <h1 class="text-center mb-3">Costs and Hours</h1>
  <div class="card border-secondary w-100 text-light" style="background-color: #333f48">

    <div class="card-body w-100 text-end">
      <table id="tableData" class="table text-light text-center mt-3">
        <thead>
          <tr>
            <th scope="col">Project ID</th>
            <th scope="col">Implementation or Annual</th>
            <th scope="col">Category</th>
            <th scope="col">Costs</th>
            <th scope="col">Hours</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>
              <div class="input-group mb-3">
                <input name="project_id" type="text" class="form-control">
              </div>
            </td>
            <td>
              <div class="input-group mb-3">
                <div class="input-group mb-3">
                  <select name="imp_or_ann" class="form-select" id="inputGroupSelect01">
                    <option disabled selected>Choose...</option>
                    <option>Implementation</option>
                    <option>Annual</option>
                  </select>
                </div>
              </div>
            </td>
            <td>
              <div class="input-group mb-3">
                <div class="input-group mb-3">
                  <select name="category" class="form-select" id="inputGroupSelect01">
                    <option disabled selected>Choose...</option>
                    <option>EMO</option>
                    <option>Analysts</option>
                    <option>Maintenance</option>
                    <option>ETS</option>
                    <option>BOT</option>
                    <option>OtherUT</option>
                    <option>Materials</option>
                    <option>Non-UT Contract</option>
                    <option>Contingency</option>
                  </select>
                </div>
              </div>
            </td>
            <td>
              <div class="input-group mb-3">
                <input name="cost" type="text" class="form-control">
              </div>
            </td>
            <td>
              <div class="input-group mb-3">
                <input name="hours" type="text" class="form-control">
              </div>
            </td>
          </tr>
        </tbody>
        <button id='addRow' type="button" style="background-color: #bf5700;" class="btn btn-warning text-light">Add</button>
      </table>
      <div id="next">

      </div>
    </div>
  </div>
</form>

因为函数调用.submit()，它提交表单并刷新页面，所以$(#tableData)函数不起作用。我尝试将其更改为 .click() 而不是 .submit() 并添加 e.preventDefault() 但这两种方法都不会提交表单。 任何关于我如何实现这一目标的想法将不胜感激！谢谢！

【问题讨论】：

'...提交表单但不刷新'研究AJAX

click() 方法有什么问题？那应该可以正常工作。你有正确的按钮类型，所以它不会提交。

另一个提示...each() 在单个元素上的循环（按 ID）没有意义。

【参考方案1】：

这就是我可能的处理方式。首先，在加载时抓取初始表行以用作克隆模板（在用户输入任何数据之前）。然后只需使用按钮上的单击处理程序根据需要将其附加到表格的主体，同时提交ajax request。

请注意，我已将您的按钮移到表格之外。它在那里无效。

jQuery(function($) 
  const cloneRow = $('#tableData tbody tr').first();

  $('#addRow').click(function() 
    // create and send ajax request here

    // then (optionally in an ajax request callback) add a new row
    cloneRow.clone().appendTo('#tableData tbody');
  );
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form action='/costs_hours' method="POST">
  <h1 class="text-center mb-3">Costs and Hours</h1>
  <div class="card border-secondary w-100 text-light" style="background-color: #333f48">

    <div class="card-body w-100 text-end">
      <table id="tableData" class="table text-light text-center mt-3">
        <thead>
          <tr>
            <th scope="col">Project ID</th>
            <th scope="col">Implementation or Annual</th>
            <th scope="col">Category</th>
            <th scope="col">Costs</th>
            <th scope="col">Hours</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>
              <div class="input-group mb-3">
                <input name="project_id" type="text" class="form-control">
              </div>
            </td>
            <td>
              <div class="input-group mb-3">
                <div class="input-group mb-3">
                  <select name="imp_or_ann" class="form-select" id="inputGroupSelect01">
                    <option disabled selected>Choose...</option>
                    <option>Implementation</option>
                    <option>Annual</option>
                  </select>
                </div>
              </div>
            </td>
            <td>
              <div class="input-group mb-3">
                <div class="input-group mb-3">
                  <select name="category" class="form-select" id="inputGroupSelect01">
                    <option disabled selected>Choose...</option>
                    <option>EMO</option>
                    <option>Analysts</option>
                    <option>Maintenance</option>
                    <option>ETS</option>
                    <option>BOT</option>
                    <option>OtherUT</option>
                    <option>Materials</option>
                    <option>Non-UT Contract</option>
                    <option>Contingency</option>
                  </select>
                </div>
              </div>
            </td>
            <td>
              <div class="input-group mb-3">
                <input name="cost" type="text" class="form-control">
              </div>
            </td>
            <td>
              <div class="input-group mb-3">
                <input name="hours" type="text" class="form-control">
              </div>
            </td>
          </tr>
        </tbody>
      </table>

      <button id='addRow' type="button" style="background-color: #bf5700;" class="btn btn-warning text-light">Add</button>
    </div>
  </div>
</form>

【讨论】：

实际上，我注意到每当我点击添加时，它都会向表中添加另一行，但是当我在新行中输入不同的信息并点击添加时，它会再次提交上一个表，而忽略新行中的数据.关于为什么会这样的任何想法？

我不知道您是如何提交数据的。请不要在 cmets 中提出新问题。如果您愿意，可以发布一个新的。