我不确定我做错了什么，但我下面的表单在提交时会重新加载页面。我已将 e.preventDefault(); 添加到我的函数中，以尝试阻止它重新加载，但每次提交页面时都会重新加载。我已经清除了缓存以消除这种情况。我还尝试为该函数添加 return false ，但这没有帮助。
我将 $("#panel-submit").submit(function (e) { 更改为此 $("#panel-submit").on("submit"函数(e) {，这也没有帮助。
有人知道为什么此表单会重新加载页面吗？
<form method="POST" action="" id="proposal-form">
<div class="panel-input"><input type="text" id="proposal-name" class="proposal-input" placeholder="Name *"></div>
<div class="panel-input"><input type="email" id="proposal-email" class="proposal-input" placeholder="Email *"></div>
<div class="panel-input"><input type="tel" id="proposal-phone" class="proposal-input" placeholder="Phone *"></div>
<div class="panel-input"><input type="text" id="proposal-location" class="proposal-input" placeholder="Location *"></div>
<input type="submit" value="SUBMIT" id="panel-submit">
</form>
$("#panel-submit").submit(function (e) {
e.preventDefault();
var proposal_name = $('#proposal-name').val();
var proposal_email = $('#proposal-email').val();
var proposal_phone = $('#proposal-phone').val();
var proposal_location = $('#proposal-location').val();
$.ajax({
url: "proposal-send.php",
type: "POST",
data: {
"proposal_name": proposal_name,
"proposal_email": proposal_email,
"proposal_phone": proposal_phone,
"proposal_location": proposal_location
},
success: function (data) {
// console.log(data);
if (data == "Error!") {
alert("Unable to add to newsletter");
alert(data);
} else {
$("#proposal-form")[0].reset();
}
},
error: function (xhr, textStatus, errorThrown) {
alert(textStatus + " | " + errorThrown);
}
});
//return false;
});
最佳答案
#panel-submit 是提交按钮。提交按钮没有提交事件。
这是可以提交的表格。因此将 id 更改为 #proposal-form
关于javascript - 使用 PreventDefault 函数重新加载表单提交，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43721025/