[英]Prevent open php page on submit contact form
我在我的 html 页面中创建了一个联系表单,该页面一旦提交,就会通过 php 页面发送 email。 目前,一旦我提交表单,页面就会重新加载,并且我用来发送 email 的 .php 页面会打开。 我想确保 php 页面没有打开,并且表单所在的页面保持打开状态。 搜索后我尝试使用 ajax 编写一个.js 文件,但问题没有解决。 我把我当前的代码放在那里:
HTML
<form class="input-form-container" action="php/emailHandler.php" method="POST">
<!-- Some input there -->
<div class="input-line">
<div class="input-button">
<input id="submit" type="submit" value="Invia">
</div>
</div>
<div class="validationAlert"></div>
</form>
JS
$(document).ready(function () {
$('.input-form-container').submit(function(event) {
console.log('Test sent debug');
event.preventDefault();
var name = $('#name').val();
var company = $('#company').val();
var phone = $('#phone').val();
var email = $('#email').val();
var message = $('#message').val();
var validationAlert = $('.validationAlert');
validationAlert.empty();
if (!email.includes('@') && !email.includes('.')) {
//event.preventDefault();
validationAlert.append('<div>Email not valid</div>');
}
$.ajax({
type : "POST", //type of method
url : "php/emailHandler.php", //your page
data : { name : name, company: company, phone: phone, email : email, message : message },
success: function(res){
alert('MESSAGE SENT!');
}
});
})
})
.php 页面是一个用于通过 PHPMailer 发送电子邮件的简单页面。 在这里你可以找到一个简单的结构示例: https://github.com/PHPMailer/PHPMailer/blob/master/examples/smtp.phps
我尝试 select 在我的 js 中使用$(document).ready(function () {$('form').submit(function(event){
,但结果不会改变。如果 email 字段不是更正脚本的警报 div 输入正确(因此这是 los crypt 加载正确的证明),但正如我之前写的,当我提交表单时,打开了.php 页面。
你能告诉我哪里错了吗?
如果您使用 ajax 提交表单,则您的 HTML 上不需要以下代码:
<form class="input-form-container" action="php/emailHandler.php" method="POST">
对于您的情况,还请考虑使用“按钮”而不是“提交”。 请在下面找到工作版本:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- Some input there -->
<input id=name name=name value='TEST'><br>
<input id=company name=company><br>
<input id=phone name=phone><br>
<input id=email name=email value="testemail@ok.com"><br>
<textarea id=message name=message></textarea>
<input id="button" type="button" value="Invia" onclick='javascript:trigger();'>
<script>
function trigger()
{
var name = $('#name').val();
var company = $('#company').val();
var phone = $('#phone').val();
var email = $('#email').val();
var message = $('#message').val();
$.ajax({
method: "POST",
url: "2.php",
data: {
name : name, company: company, phone: phone, email : email, message : message
}
})
.done(function( msg ) {
if (msg!="OK")
{
alert(msg);
}
else
{
alert("Done ! Email sent ! ....");
}
});
}
</script>
对于 php,这是一个示例:
<?php
// just to trigger a test to check that the ajax works
echo $_REQUEST["email"];
/// codes to send email
/// after sending email, please echo "OK";
////
?>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.