Ajax调用被意外触发

Question

我正在创建一个登录页面，在弹出式表单的底部，有另一个按钮带您到注册页面。问题似乎是，当导航到新页面时，它都位于原始的登录表单下，该表单使用ajax调用来检查用户是否存在，所以当他们试图提交注册表单时，它会从登录表单调用ajax调用。

登录表单

<div id="myForm">    
<form onsubmit="return false;" id="loginForm">
<h1>Login</h1>
<label for="email"><b>Email</b></label>
<input type="email" id="email" placeholder="Enter Email" name="email" required>
<label for="psw"><b>Password</b></label>
<input type="password" id="psw" placeholder="Enter Password" name="psw" required>
<div id="message" class="alert-danger"></div>
<br />
<button type="submit" id="submit" class="btn">Login</button>
<button type="button" class="btn cancel" onclick="closeForm();">Close</button>
</form>
<div class="d-inline">            
<button class="btn-info">@Html.ActionLink("User Registration", "SignUp", "SignUp_SignIn")</button>
</div>
</div>

那么ajax调用就是

$(document).ready(function () {
$("form").on('submit', function (event) {
var data = {
'email': $("#email").val(),
'psw': $("#psw").val()
};
$.ajax({
type: "POST",
url: 'SignUp_SignIn/CredentialCheck',
data: data,
success: function (result) {
if (result == true) {
$("#message").text("Login attempt was successful");
}
else {
$("#message").text("Email/Password didn't match any results");
}
},
error: function () {
alert("It failed");
}
});
return false;
});
});

Answer 1

看了注释后，我意识到登录表单是从布局中调用的原因。因此，当ajax调用被调用时，它会抓取加载的任何页面上存在的所有表单标签。更改ajax后，它调用登录表单的特定id而不是form，它允许适当的操作发生。

一个我拒绝的例子

$(document).ready(function () {
$("form").on('submit', function (event) {            
$.ajax({
type: "POST",
url: url,
data: data,
success: function (result) {
//Do stuff
}
});
});
});

上面的代码会尝试重定向你提交任何已经加载的表单，但是如果我们像下面这样改变它访问表单的方式，那么它只会在提交一个特定的表单时起作用。

$(document).ready(function () {
$("#loginForm").on('submit', function (event) {            
$.ajax({
type: "POST",
url: url,
data: data,
success: function (result) {
//Do stuff
}
});
});
});