gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-04 07:54:55 24 4
gpt4 key购买 nike

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

@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>
我尝试在下面添加以下代码,但仍然没有任何 react ,弹出确认对话框,但单击 好的按钮,什么都没有发生。表单未提交。但附加后其他行工作正常。
这是我尝试过的,但所有这些都不能正常工作。
  $(function () {
$(document).on('submit', 'form', function (event) {
$(this).submit();
});
});
我想我附加表格行的方式是问题,但我不确定。

最佳答案

您当前的 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>

关于javascript - 如何使用 Jquery 在表上附加输入类型提交元素并绑定(bind)它?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66757572/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com