在表单提交时，html页面被定向到另一个页面-如何防止这种情况

Question

我有下面的html和java脚本，但在表单提交页面被定向到mail.php，而不是停留在index.html -任何帮助，请。

其次，我想在表单底部显示表单上的消息，即发送电子邮件的成功消息。

我已经调试了java脚本，它也通过了if条件。

<form method="post" name="FrmEnquiry" id="FrmEnquiry" action="mail.php" onsubmit="sendEnquiryform();">
<input name="name" id="name" required="required" placeholder="Your Name">
<input name="email" id="email" type="email" required="required" placeholder="Your Email">
<div class="clearfix"> </div>
<textarea name="message" id="message" cols="20" rows="5" required="required" placeholder="Message"></textarea>
<div class="submit">
<input id="submit" name="submit" type="submit" value="Submit">
</div>
</form>
<span id="sucessMessage"> </span>

Mail.Php

function sendEnquiryform() {
var name = $('#name').val();
var email = $('#email').val();
var message = $('#message').val();
$.post('mail.php', '&name=' + name + '&email=' + email + message, function(
result,
status,
xhr
) {
if (status.toLowerCase() == 'error'.toLowerCase()) {
alert('An Error Occurred..');
} else {
//alert(result);
$('#sucessMessage').html(result);
}
}).fail(function() {
alert('something went wrong. Please try again');
});

}

Answer 1

为了防止默认的表单提交行为，从您的submit事件处理程序返回false

将onsubmit属性更改为

<form method="post" name="FrmEnquiry" id="FrmEnquiry"
action="mail.php" onsubmit="return sendEnquiryform();">

，然后从事件处理程序返回false。

function sendEnquiryform() {
// ...
return false;
}

由于您正在进行Ajax调用，因此action属性变得不必要，可以删除。

---

将fail()回调函数更改为

}).fail(function(xhr, status, error) {
console.log(error);
alert('something went wrong. Please try again');
});

并检查浏览器控制台日志Ctrl+Shift+K查看底层错误信息。