在验证和发送邮件后更改联系人表单的 html - Change the contact-form's html AFTER validation and mail sent

我正在为我的页面开发一个php驱动的联系表单，在单击提交按钮并且(！(发送邮件后，我想替换HTML的内容。到目前为止，我可以做到，单击.btn后，HTML 会被替换，但这发生在任何验证发生之前，邮件将被发送。你能告诉我一种方法吗？多谢！

$(document).ready(function() {
	
	var newHTML = '<div class="col-sm-12 text-center" style="color:white; background-color:#6f8595; padding-bottom:15px; border-radius:5px;"><h3>Thank you for your message!<br />We will get back to you as soon as possible!</h3></div>';
	
    $('.btn').click(function(){
    	$('.form').html('').append(newHTML);
    });
});

.contact-form {
	margin-top:30px;
	margin-bottom:70px;
}
.contact-form h1 {
	margin-bottom:70px;
}
.contact-form input {
	width:70%;
	margin:10px auto 20px auto;
}
.message textarea {
	max-width:80%;
	width:80%;
	margin:10px auto 20px auto;
	height:100px;
}
.contact-form .btn {
	background-color:#6f8595;
	color:white;
	transition:0.3s;
	width:50%;
}
.contact-form .btn:hover {
	background-color:white;
	color:#6f8595;
	transition:0.3s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <form class="form clearfix" action="index.php" method="post">
	<div class="col-sm-6">
		<p>Name:</p>
		<input type="text" name="name" placeholder="Your full name here" required>
		<p>Email:</p>
		<input type="email" name="email" placeholder="Your email here" required>
	</div>
	<div class="col-sm-6">
		<p>Message:</p>
		<div class="message"><textarea name="message">Hello YourSite, </textarea></div>
		<div><input class="btn" type="submit" name="btn-submit" value="Send message!" required/></div>
	</div>
</form>

在隐藏表单之前，您应该检查表单是否有效。使用valid()尝试这样的事情：

$('.btn').click(function(){
    if($('.form').valid())
        $('.form').html('').append(newHTML);
});

你需要Ajax来做到这一点。

首先，我们需要一个联系人.php他将完成这项工作并返回回复以通知客户电子邮件是否已发送。例如：

联系方式.php

<?php
if (mail('caffeinated@example.com', 'My Subject', 'message')) {
    echo json_encode(['error' => false]);
} else {
    echo json_encode(['error' => true]);
}

然后在客户端中，您需要对联系人执行 ajax 请求.php并根据请求的响应更新 dom：

客户端.html

<script>
 $(document).ready(function() {
    var newHTML = '<div class="col-sm-12 text-center" style="color:white; background-color:#6f8595; padding-bottom:15px; border-radius:5px;"><h3>Thank you for your message!<br />We will get back to you as soon as possible!</h3></div>';
    $('.btn').click(function(){
        $.post('contact.php', $('.form').serialize(), function () {
            if (data.error == false) {
                $('.form').html('').append(newHTML);
            }
        })
    });
});
</script>

    <form class="form clearfix">
    <div class="col-sm-6">
        <p>Name:</p>
        <input type="text" name="name" placeholder="Your full name here" required>
        <p>Email:</p>
        <input type="email" name="email" placeholder="Your email here" required>
    </div>
    <div class="col-sm-6">
        <p>Message:</p>
        <div class="message"><textarea name="message">Hello YourSite, </textarea></div>
        <div><input class="btn" type="submit" name="btn-submit" value="Send message!" required/></div>
    </div>
    </form>