javascript - PHP 电子邮件表单响应当前 html，而不是打开 'thank you' 页面

Question

我已经在我的网站上设置了一个电子邮件表单，现在它使用 header('Location:emailConfirmation.html'); 将用户发送到感谢页面。我想尝试其他方法，并使用 javascript 将表单的 html 替换为消息。即调用这样的函数

function emailConfirmed()
{
    $('#email').load('emailConfirmation.html');
}

干扰性较小的内容，不会离开主页。这样的事情可能吗？

这是我当前的表单代码。

<form method="POST" name="contactform" action="scripts/contact-form-handler.php">
    <p>
        <label for='name'>Your Name:</label> <br>
        <input type="text" name="name">
    </p>
    <p>
        <label for='email'>Email Address:</label> <br>
        <input type="text" name="email"> <br>
    </p>
    <p>
        <label for='message'>Message:</label> <br>
        <textarea name="message" maxlength="600" cols="25" rows="6" style="margin: 2px; width: 300px; height: 110px;resize:none;"></textarea>
    </p>
    <input type="submit" value="Submit"><br>
</form>

<script language="JavaScript">
    var frmvalidator  = new Validator("contactform");
    frmvalidator.addValidation("name","req","Please provide your name");
    frmvalidator.addValidation("email","req","Please provide your email");
    frmvalidator.addValidation("email","email","Please enter a valid email address");
</script>

Answer 1

那么你应该使用$.ajax() 发送邮件，例如，

脚本

$(function(){
    $('#submit').on('click',function(){
        $.ajax({
           url:$('form[name="contactform"]').attr('action'),
           data:$('form[name="contactform"]').serialize(),
           type:'POST',
           success:function(){
              $('#email').load('emailConfirmation.html');
           }
        });
    });
});

向您的提交按钮添加一个id，例如，

<input type="submit" value="Submit" id="submit"><br>

此外，为了获取#email中的消息，请在表单后添加一个div，例如，

<form ...>
   ....
</form>
<div id="email"></div><!-- Element to get the message afte ajax success callback -->