时间戳

首页 > 解决方案 > 如何使用 Jquery 在表上附加输入类型提交元素并绑定它？

javascript - 如何使用 Jquery 在表上附加输入类型提交元素并绑定它？

问题描述

我正在尝试附加一个具有表单和输入类型提交的表格行。通常，这就是我的循环的样子：

@foreach (var item in Model)
   {
     using (Html.BeginForm("Edit", "User"))
          {
              <tr>
                  <input type="hidden" name="Id" value="@item.Id" />
                  <td>
                    @Html.DisplayFor(modelItem => item.Email)
                    @Html.HiddenFor(modelItem => item.Email, new { name = "Email" })
                  </td>
                  
                     <a href="@Url.Action("Edit", new { Id = item.Id })">Edit</a>
                      <button type="submit" onclick="return confirm('Disable this?');" name="btnDisable" id="btnDisable">Disable</button>
                  </td>
             </tr>
          }
    }

现在在我的 AJAX 调用中，我需要在此表行中添加其他用户，这就是我通常的做法：

 $.ajax({
        type: "POST",
        url: 'URL',
        dataType: 'json'
       }).done(function (data) {
        if (data.status == 'True') {
            var usrObj = data.uobj;

            $(function () {
            var table = $('#tblUsers tbody');

            for (var i = 0; i < usrObj.length; i++) {
                $('#tblUsers').find('tbody')
                    .append('<tr><form action="/User/Edit" method="post">' +
                     '<input type="hidden" name="Id" value=' + usrObj[i].Id + '>' +
                     '<td>' + usrObj[i].Email + '</td>' +
                     "<td><a href='" + "/User/Edit/" + usrObj[i].Id + "'" + "></i>Edit</a>" + 
                     `<button type='submit' name='btnDisable' id = 'btnDisable' onclick="return confirm('Disable this?')";>Disable</button></td>` +
                        '</form></tr>');
                }
            }                
    });

现在发生的事情是，附加的链接工作正常，因为链接所需的所有功能都已经设置在它的属性上：

<a href='" + "/UserM/Edit/" + usrObj[i].Id + "'" + "></i>Edit</a>

这是我很难提交表格：

<button type='submit' name='btnDisable' id = 'btnDisable' onclick="return confirm('Disable this?')";>Disable</button>

我尝试在下面添加以下代码，但仍然没有发生任何事情，弹出确认对话框，但是单击“确定”按钮后，什么也没有发生。表单未提交。但附加后其他行工作正常。

这是我尝试过的，但所有这些都不能正常工作。

  $(function () {
      $(document).on('submit', 'form', function (event) {
             $(this).submit();
          });
   });

我想我附加表格行的方式是问题，但我不太确定。

标签： javascriptc#jqueryasp.netasp.net-mvc

解决方案

您当前的 jquery 代码中的问题是，当您在表中附加新行时，它超出了 tr 标签，这就是表单提交不起作用的原因。相反，您可以将表单标记放在td标记和需要传递给后端的输入字段中，以便使用其中的按钮触发表单。

演示代码：

//this is for demo :)
var usrObj = [{
  "Email": "cdcdc",
  "Id": 11
}, {
  "Email": "cdcdc2",
  "Id": 12
}]
for (var i = 0; i < usrObj.length; i++) {
  $('#tblUsers').find('tbody').append('<tr><td>' + usrObj[i].Email + '</td>' + "<td><form action='/User/Edit' method='post'><a href='" + "/User/Edit/" + usrObj[i].Id + "'" + "></i>Edit</a>" + `<button type='submit' name='btnDisable' onclick="return confirm('Disable this?')";>Disable</button>` + '<input type="hidden" name="Id" value=' + usrObj[i].Id + '/></form>' + "</td></tr>");
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tblUsers">
  <tbody>
    <form>
      <tr>
        <input type="hidden" name="Id" value="1" />
        <td>
          frg
        </td>
        <td>

          <a href="@Url.Action(" Edit ", new { Id = item.Id })">Edit</a>
          <button type="submit" onclick="return confirm('Disable this?');" name="btnDisable" id="btnDisable">Disable</button>
        </td>
      </tr>
    </form>
    <form>
      <tr>
        <input type="hidden" name="Id" value="2" />
        <td>
          ckwlkev
        </td>
        <td>
          <a href="@Url.Action(" Edit ", new { Id = item.Id })">Edit</a>
          <button type="submit" onclick="return confirm('Disable this?');" name="btnDisable" id="btnDisable">Disable</button>
        </td>
      </tr>
    </form>
  </tbody>
</table>

推荐阅读