- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在使用 this code来自 codepen 的联系表格。
我遇到的问题是,一旦您单击“发送”按钮,您就会离开联系表单到达 sendmessage.php 的页面。
我想看到的是表单的正常行为:当您单击“发送”(并且消息已成功传输)时,您停留在同一页面上,“发送”按钮消失并被替换为“成功”消息 无需离开或重新加载页面 放置表单的位置..
知道当前代码有什么问题吗?你可以测试我的实例 here
非常感谢,
HTML:
<form class="well form-horizontal" action="../sendmessage.php" method="post" id="contact_form">
Javascript:
$(document).ready(function() {
$('#contact_form').bootstrapValidator({
// To use feedback icons, ensure that you use Bootstrap v3.1.0 or later
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
first_name: {
validators: {
stringLength: {
min: 2,
},
notEmpty: {
message: 'Please supply your first name'
}
}
},
email: {
validators: {
notEmpty: {
message: 'Please supply your email address'
},
emailAddress: {
message: 'Please supply a valid email address'
}
}
},
message: {
validators: {
stringLength: {
min: 10,
max: 200,
message:'Please enter at least 10 characters and no more than 200'
},
notEmpty: {
message: 'Please supply a description of your project'
}
}
}
}
})
.on('success.form.bv', function(e) {
$('#success_message').slideDown({ opacity: "show" }, "slow") // Do something ...
$('#contact_form').data('bootstrapValidator').resetForm();
// Prevent form submission
e.preventDefault();
// Get the form instance
var $form = $(e.target);
// Get the BootstrapValidator instance
var bv = $form.data('bootstrapValidator');
// Use Ajax to submit form data
$.post($form.attr('action'), $form.serialize(), function(result) {
console.log(result);
}, 'json');
});
});
sendmessage.php 的内容:
<?php
require 'PHPMailer/PHPMailerAutoload.php';
$mail = new PHPMailer;
$mail->CharSet = 'utf-8';
//Enable SMTP debugging.
$mail->SMTPDebug = false;
//Set PHPMailer to use SMTP.
$mail->isSMTP();
//Set SMTP host name
$mail->Host = "smtp.elasticemail.com";
//Set this to true if SMTP host requires authentication to send email
$mail->SMTPAuth = true;
//Provide username and password
$mail->Username = "xyz";
$mail->Password = "xyz";
//If SMTP requires TLS encryption then set it
$mail->SMTPSecure = "tls";
//Set TCP port to connect to
$mail->Port = 2525;
$mail->From = $_POST['email'];
$mail->FromName = $_POST['first_name'];
$mail->addAddress("xyz@gmail.com");
//CC and BCC
$mail->addCC("xyz@outlook.com");
$mail->addBCC("");
$mail->isHTML(true);
$mail->Subject = "New message from " . $_POST['first_name'] . $_POST['last_name'];
$mail->Body = $_POST['message']."<br><br>From page: ". str_replace("http://", "", $_SERVER['HTTP_REFERER']) . "<br>" . $_SERVER ['HTTP_USER_AGENT'] ;
$response = array();
if(!$mail->send()) {
$response = array('message'=>"Mailer Error: " . $mail->ErrorInfo, 'status'=> 0);
} else {
$response = array('message'=>"Message has been sent successfully", 'status'=> 1);
}
/* send content type header */
header('Content-Type: application/json');
/* send response as json */
echo json_encode($response);
?>
最佳答案
您是否尝试过在提交事件中只返回 false?
$('#contact_form').on('submit', function(event) {
event.preventDefault();
return false;
});
关于javascript - 在不离开页面和 bootstrapValidator 的情况下发送联系表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36262411/
我的表单上有两个电话字段 - 电话和电话2。只需要其中之一。无论我尝试什么,我都无法使验证生效。我尝试过回调和自定义验证器,但似乎我无法让它工作。我希望它的工作方式是检查每个字段,如果两个字段都为空,
编辑:我借用的原始代码笔是 here 。唯一的区别是在 HTML 中,我将 action=' ' (它是空白的,所有 php 代码与表单位于同一个文件中)更改为 action='mail-form.p
我被困在这里,我正在尝试验证具有相同名称的多个文本字段,但它仅验证第一个输入文本,其余部分不显示。 js $('#frm_org_id').bootstrapValidator({
有没有办法动态禁用字段的特定验证器,但仍希望对同一字段应用其他验证。 示例代码: $(document).ready(function() { $('#registrationF
如何在输入 BootstrapValidator 时始终启用提交按钮? 最佳答案 为了实现您的目标,follow this tutorial来自 bootstrapvalidator.com $(
我有一个表单,其字段在不同的选项卡中展开。我正在使用 bootsrap 框架和 bootstrapValidator 来验证表单。但问题是,当我处理第一个选项卡表单字段中的字段时,此选项卡的验证正常。
我正在使用 BootstrapValidator我有一些文本字段和一个带有 2 个选项的单选按钮,只有在选择了单选按钮选项 2 时我才需要验证文本字段,我该如何获取它? 这是表格: Name Co
我尝试使用 BootstrapValidator,但由于某种原因,除非我删除 JS 脚本,否则它不会提交表单。 JS 脚本是: $(document).ready(function() { $
所以;我尝试在线检查几个解决方案,但找不到解决有关使用 bootstrapvalidator 启用和禁用字段验证的问题的解决方案。 当有人输入负数(例如-4、-100、-545等)和任何非数字的数字(
我使用 Bootstrapvalidator 来验证具有多个动态输入字段的表单。显示的输入字段的数量取决于所选择的comboBox(select)的值,然后通过Ajax显示多个输入字段。 Bootst
我有一个包含两个日期选择器的页面,我必须验证它们。这是index.html的演示代码:
我正在使用 BootstrapValidator,但在重置表单时遇到问题。当我将“:隐藏”放入排除列表中时(我有隐藏的字段,当它们未显示时我需要跳过验证),表单将不会重置。我在下面添加了图像和更多文本
我有一个带有 2 个按钮的表单。一个按钮以 ajax 格式提交表单,另一个按钮以正常方式提交表单。 $('#form_createAd').bootstrapValidator({ submi
我正在寻找一种方法来验证在加载 DOM 和 $('#formId').bootstrapValidator() 后添加到表单中的字段。被执行。有没有办法添加一个新字段并在提交表单时对其进行验证? 最佳
我在我的网页中使用以下验证。如果我将此字段保留为空并按提交,它会显示绿色正确图标,因为该字段有效。 BootstrapValidator 有没有办法避免这种情况?我的意思是,如果字段为空,则不显示绿色
在使用 BootstrapValidator 的应用程序中,我有这个表格: Option 1
我正在尝试使用“BootstrapValidator”对“CKEditor”进行验证。 类似于这里的示例: LINK 不幸的是,我无法让它发挥作用。我尝试更新不可见的文本区域内容,但它也没有帮助。我的
因此,我尝试在线检查几个解决方案,但找不到解决方案来解决有关使用 bootstrapvalidator 启用和禁用字段验证的问题。 当有人输入负数(例如-4、-100、-545等)和任何非数字的数字(
我想在我的表单中实现 bootstrapValidator,我还有一些隐藏的输入字段,但它也在验证那些,我想停止这个...我的表单代码 {!!Lang::get('site_lang
我正在使用 this code来自 codepen 的联系表格。 我遇到的问题是,一旦您单击“发送”按钮,您就会离开联系表单到达 sendmessage.php 的页面。 我想看到的是表单的正常行为:
我是一名优秀的程序员,十分优秀!