在表单提交 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

为了防止默认表单提交行为，return false 来自您的 submit 事件处理程序。

将您的 onsubmit 属性更改为

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

然后是来自事件处理程序的 return 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 是否存在潜在错误消息。

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

On Form submission html page is directed to another page - How to prevent that

javascript

php

email-validation