gpt4 book ai didi

javascript - 在不离开页面和 bootstrapValidator 的情况下发送联系表

转载 作者:行者123 更新时间:2023-11-30 00:11:38 25 4
gpt4 key购买 nike

我正在使用 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com