Question

我正在为我的页面开发一个基于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>

Answer 1

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

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

Answer 2

你需要Ajax才能做到这一点。

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

<强> contact.php

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

然后在您的客户端，您需要向contact.php发出ajax请求，并根据请求的响应更新dom：

<强> client.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>

更改联系表单的html AFTER验证和发送的邮件

2 个答案: