我试图使它在用户进入我的联系表单时,而不是被重定向到“mail.php”文件,他们只是显示一条消息,显示消息已在同一页面上成功发送。我用JS尝试了很多教程,我仍然不确定如何做到这一点。
PHP邮件程序和Html可以工作,只是javascript,它旨在向用户显示不工作的成功或失败消息。
我最初试图将JS放在一个不同的文件中,然后在Jquery下面的页面底部作为一个不同的脚本调用它,但这不起作用我可能会将它移回它自己的文件中。
我的HTML当前看起来像
<div class="form-container">
<form id="contact-form" method="post" action="mail.php" name="contact-form" role="form" >
<div class="row">
<div class="col-md-6" style="padding-right: 4px;">
<input type="text" name="first_name" id="name" placeholder="Name" required />
</div>
<div class="col-md-6" style="padding-left: 4px;">
<input type="email" name="email" id="email" placeholder="Email" oninvalid="this.setCustomValidity('Please enter valid email address.')" onchange="this.setCustomValidity('')" required />
</div>
</div>
<input type="text" name="subject" id="subject" placeholder="Why are you contacting me?" required />
<textarea name="message" id="message" cols="30" rows="10" placeholder="Tell me more about your propersition?" required></textarea>
<input type="submit" id="submit" name="submit" value="submit">
<label class="checkbox-label">
<input type="checkbox" id="tos" name="tos" oninvalid="this.setCustomValidity('Please read the Terms of Service.')" onchange="this.setCustomValidity('')" required>
<span class="checkbox-custom rectangular"></span>
</label>
<label for="tos">I agree to the <a href="tos.php">Terms of Service</a></label>
</form>
</div>
</div>
我的PHP邮件文件(mail.PHP)当前看起来如下
<?php
// Import PHPMailer classes into the global namespace
// These must be at the top of your script, not inside a function
use PHPMailer\PHPMailer\PHPMailer;
use PHPMailer\PHPMailer\SMTP;
use PHPMailer\PHPMailer\Exception;
// Load Composer's autoloader
require 'vendor/autoload.php';
// Instantiation and passing `true` enables exceptions
$mail = new PHPMailer(true);
try {
//Server settings
$mail->SMTPDebug = SMTP::DEBUG_SERVER; // Enable verbose debug output
$mail->isSMTP(); // Send using SMTP
$mail->Host = 'mail.edbrook.site'; // Set the SMTP server to send through
$mail->SMTPAuth = true; // Enable SMTP authentication
$mail->Username = 'info@edbrook.site'; // SMTP username
$mail->Password = ''; // SMTP password
$mail->SMTPSecure = PHPMailer::ENCRYPTION_STARTTLS; // Enable TLS encryption; `PHPMailer::ENCRYPTION_SMTPS` encouraged
$mail->Port = 587; // TCP port to connect to, use 465 for `PHPMailer::ENCRYPTION_SMTPS` above
//Recipients
$mail->setFrom('info@edbrook.site', 'Web Contact');
$mail->addAddress('ed@edbrook.site', 'Admin - Edbrook.site'); // Add a recipient
// message that will be displayed when everything is OK :)
$okMessage = 'Thank you for your message. We will get back to you soon!';
// If something goes wrong, we will display this message.
$errorMessage = 'There was an error. Please try again later!';
//Content
$mail->isHTML(true); // Set to HTML
$mail->Subject = 'Contact Form Message';
$mail->Body = "Full Name: ".htmlspecialchars($_POST['first_name'])."<br />Email Address: ".htmlspecialchars($_POST['email'])."<br /><br />";
$mail->send();
$responseArray = array('type' => 'success', 'message' => $okMessage);
} catch (Exception $e) {
$responseArray = array('type' => 'danger', 'message' => $errorMessage);
} catch (Error $e) {
// should log the fatal
$responseArray = array('type' => 'danger', 'message' => $errorMessage);
}
// if requested by AJAX request return JSON response
if (!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
$encoded = json_encode($responseArray);
header('Content-Type: application/json');
echo $encoded;
}
// else just display the message
else {
echo $responseArray['message'];
}
javascript当前的样子如下
$(function () {
$('#contact-form').validator();
$('#contact-form').on('submit', function (e) {
// if the validator good
if (!e.isDefaultPrevented()) {
var url = "mail.php";
// POST values in the background the the script URL
$.ajax({
type: "POST",
url: url,
data: $(this).serialize(),
success: function (data)
{
// data = JSON object that contact.php returns
// apply success/danger
var messageAlert = 'alert-' + data.type;
var messageText = data.message;
// Bootstrap alert box HTML
var alertBox = '<div class="alert ' + messageAlert + ' alert-dismissable" role="alert"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>' + messageText + '</div>';
// If we have messageAlert and messageText
if (messageAlert && messageText) {
// inject the alert to .messages div in our form
$('#contact-form').find('.messages').html(alertBox);
// empty the form
$('#contact-form')[0].reset();
}
},
error: function(jqXHR, textStatus, errorThrown) {
console.error('The ajax request failed:' + errorThrown);
}
});
return false;
}
})
});
它主要是从网上复制的,但我并不真正需要验证器,因为它已经在jqery中处理了,所以不需要再做一次,我只需要在contact.php页面上显示错误/成功消息,而不是将其重定向到空白页面。
谢谢:)
e.PreventDefault()
$('#contact-form').on('submit', function (e) {
e.preventDefault(); // here
<form id="contact-form" method="post" action="mail.php" name="contact-form" role="form" >
<div class="messages"></div>
有几件事你需要改变。
>
如果您不想重定向到mail.php,那么从表单的action
属性中删除它。因为您是通过JavaScript注入成功/失败消息,所以添加onSubmit=“return false;”
以防止页面刷新。
<form id="contact-form" method="post" action="" name="contact-form" role="form" onsubmit="return false;">
我在HTML中看不到类名为messages
的div。
我正在使用Spring Security和前端reactJS的Spring Boot构建一个应用程序。我的代码可以很好地进行身份验证。但现在我计划将用户重定向到他以前请求的页面,以防他再次登录。 我可以从成功处理程序中提取 targetUrl,即上一页,但是当我在 UI 上执行控制台.log(数据)时。我得到的是原始的html数据而不是URL名称。我不知道为什么以及如何打开这样的原始 html 代
通过javascript生成的链接移动另一个页面后,要在selenium的网络驱动程序中保留原始元素似乎是不可能或非常复杂的。我该怎么做呢? 我试图使用以下组件为特定的网页做网页抓取: Ubuntu 18.04。1 LTS Python 3.6。1 Selenium(Python包)3.141。0 谷歌浏览器71.0。3578.98 铬驱动2.45。615279 该网页包含“href”为javas
问题内容: 我需要如下工作流程: 令我惊讶的是,这与Java GUI(例如JavaFX(http://lexandera.com/2009/01/extracting-html-from- a-webview/ ))和Swing 有多么困难。 有一些简单的方法可以在Java中获得此功能吗? 问题答案: 这是一个使用JavaFX的人为示例,该示例将html内容打印到System.out -适应创建方
我有一个运行多个应用程序的Tomcat 6服务器,在其中一个应用程序中,JSP指的是ColdFusion项目中的链接。在生产中,我们使用Apache设置将DocumentRoot更改为ColdFusion webroot,但是由于我们只运行Tomcat,所以我无法这样做(即,我们的系统没有httpd.conf或apache2.conf文件)。我尝试在一个上下文文件中设置一个docBase来指向Co
本文向大家介绍vue页面跳转后返回原页面初始位置方法,包括了vue页面跳转后返回原页面初始位置方法的使用技巧和注意事项,需要的朋友参考一下 vue页面跳转到新页面之后,再由新页面返回到原页面时候若想返回调出原页面的初始位置,怎么来解决这个问题呢?首先我们应该在跳出页面时候记录下跳出的scrollY,返回原页面的时候在设置返回位置为记录下的scrolly即可,scrolly我用的是vuex状态管理器
基类控制器里有success方法,用于api的成功返回输出 /** * 操作成功跳转的快捷方法 * @access protected * @param mixed $msg 提示信息 * @param mixed $data 返回的数据 * @param array $header 发送的Header信息 * @return void */ protected f
注:[2017年1月11日]RestInfoAdapter.java的源代码已经更改和更新(参见下面的第2项) 我一直在尝试通过保留原始输入列表的备份/副本来使我的搜索视图返回到原始列表。但是,它根本不起作用。我的这个问题包括使用自定义类的RecyclerView和ArrayList。 是一个名为<code>RestInfo 我是如何尝试的 适配器类,以便RestInfo可以呈现在卡片视图中(因此
本文向大家介绍Element UI的表格,点击编辑跳转到编辑页面,编辑完成返回到列表页面,还返回到原分页列表相关面试题,主要包含被问及Element UI的表格,点击编辑跳转到编辑页面,编辑完成返回到列表页面,还返回到原分页列表时的应答技巧和注意事项,需要的朋友参考一下 Element UI的表格,点击编辑跳转到编辑页面,编辑完成返回到列表页面,还返回到原分页列表 作者:2443174881