在验证和发送邮件后更改联系人表单的 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>
相关文章:
- 在验证和发送邮件后更改联系人表单的 html
- 在联系人表单中实现jQueryAJAX
- jquery.validator和一个页面上的两个联系人表单将在提交时验证空表单
- PHP&jQuery联系人表单错误
- Javascript按钮,它提交联系人表单7表单,然后重定向到URL
- 我正在验证一个联系人表单.我是不是过滤太多了
- 防止联系人表单在提交后消失
- PHP Angular JS联系人表单将't张贴
- 如何在联系人表单7 Wordpress中添加自定义javascript函数
- 如何使javascript联系人表单正确提交
- 在联系人表单中显示隐藏警告被延迟
- 基于AJAX的联系人表单7事件跟踪新的谷歌分析代码
- 映射的联系人表单在Jquery-1.11中无法正常工作
- 激活联系人表单上的输入字段需要在手机上点击2次
- 始终显示联系人表单中的问题成功消息
- HTML5,CSS3,PHP联系人表单不发送信息+添加必填字段
- 联系人表单-提交按钮不起作用
- 如何使用JS清理联系人表单后删除HTML5表单验证
- 联系人表单变量不会从部分标签传递到 javascript 中
- 如何在 html 弹出窗口中显示联系人表单