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()使用send mail之类的，

<强> SCRIPT

$(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添加submit button，

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

同样要获得message #email div，请在form之后添加<form ...> .... </form> <div id="email"></div>，

{{1}}

Answer 2

如果页面的主要部分位于div（例如“main”）中，那么您可以执行以下操作：

$('#main').html("Thank you.<br/><br/>Your form has been sent.");

如果您想要添加更多内容，可以从外部文件加载，甚至只需将其硬编码到JavaScript中。

Answer 3

你想加载html文件。使用此代码完成，我希望这对你有用。

$( "#email" ).load( "emailConfirmation.html", function() {
         alert( "Load was performed." );
});

请尝试More Detail

PHP电子邮件表单，响应当前的HTML而不是打开“谢谢”页面

3 个答案: