I'm working on a php powered contact-form for my page, where, after the submit button has been clicked AND (!) the mail has been sent, I would like to replace the content of the HTML. I could manage so far, that after .btn is clicked, the HTML gets replaces, but that happens before any validation would happen and the mail would be sent. Can you show me a way to do that please? Thanks a lot!
我正在为我的页面开发一个php驱动的联系人表单，在单击submit按钮并(!)发送邮件之后，我想替换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>2 个解决方案
#1
1
You will need Ajax to do this.
您需要使用Ajax来实现这一点。
first we need a contact.php who will do the job and return a response to inform the client if the email has been sent or not. for example:
首先我们需要联系。php将执行此任务并返回响应，以通知客户邮件是否已发送。例如:
contact.php
contact.php
<?php
if (mail('caffeinated@example.com', 'My Subject', 'message')) {
echo json_encode(['error' => false]);
} else {
echo json_encode(['error' => true]);
}
Then in your client, you need to do an ajax request to the contact.php and update the dom depending on the response of the request :
然后在客户端中，需要对联系人执行ajax请求。php和根据请求的响应更新dom:
client.html
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>
#2
2
You should check if your form is valid before hiding the form. Try something like this using valid():
在隐藏表单之前，您应该检查您的表单是否有效。尝试使用valid():
$('.btn').click(function(){
if($('.form').valid())
$('.form').html('').append(newHTML);
});
#1
1
You will need Ajax to do this.
您需要使用Ajax来实现这一点。
first we need a contact.php who will do the job and return a response to inform the client if the email has been sent or not. for example:
首先我们需要联系。php将执行此任务并返回响应，以通知客户邮件是否已发送。例如:
contact.php
contact.php
<?php
if (mail('caffeinated@example.com', 'My Subject', 'message')) {
echo json_encode(['error' => false]);
} else {
echo json_encode(['error' => true]);
}
Then in your client, you need to do an ajax request to the contact.php and update the dom depending on the response of the request :
然后在客户端中，需要对联系人执行ajax请求。php和根据请求的响应更新dom:
client.html
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>
#2
2
You should check if your form is valid before hiding the form. Try something like this using valid():
在隐藏表单之前，您应该检查您的表单是否有效。尝试使用valid():
$('.btn').click(function(){
if($('.form').valid())
$('.form').html('').append(newHTML);
});