我有一个非常奇怪的问题。假设我在同一页面上有两个相同的表单/小部件,这是表单的代码:
<form>
<input class="form-group" type="text" title="FirstName" name="FirstName" id="FirstName" /><br />
<input class="form-group" type="text" title="LastName" name="LastName" id="LastName" /><br />
<input class="form-group" type="tel" title="PhoneNumber" name="PhoneNumber" id="PhoneNumber" /><br />
@Html.DropDownListFor(m => m.HearingID, Model.Hierings, new { @id = "HearingID", @class = "form-group" })<br />
@Html.DropDownListFor(m => m.ConnectTypeID, Model.ConnectTypes, new { @id = "ConnectTypeID", @class = "form-group" })<br />
<input type="button" value="Save" id="@buttonid" />
</form>
以下js发送ajax请求。
<script type="text/javascript">
$(document).ready(function () {
$("form").submit(function (e) {
debugger;
e.preventDefault();
var form = $("form");
$.ajax({
type: "POST",
url: jQuery(location).attr('pathname') + '/Save/',
data: form.serialize(),
error: function (xhr, status, error) {
alert("Error");
},
success: function (e) {
}
});
});
return false;
});
</script>
根据逻辑定律,它应该发送一次帖子请求,但由于一些奇怪的原因,调用次数与页面上的表单数量相关。所以如果我有两个表单 - 它会发送请求两次。我尝试了一切,甚至给表单一个唯一的ID,但仍然 - 两个请求。 JS没有工作两次,JS工作一次,但它仍然发送了两次请求,我无法弄清楚原因。
答案 0 :(得分:1)
我认为你应该为你的表单提供一个在服务器上生成的唯一ID。通过这种方式,当您在页面上拖动窗口小部件两次时,它将使用不同的ID进行呈现,而且jQuery选择器将查找具有正确ID的窗体。以下是我在页面上拖动窗口小部件两次时只能设置一个提交的示例代码:
@{
// generate ID on the server
string formId = System.Guid.NewGuid().ToString();
}
<form id="@formId">
...
</form>
<script type="text/javascript">
$(document).ready(function () {
$('#' + '@formId').submit(function (e) {
// code here
});
});
</script>