提交联系表后如何在同一页面获取成功信息?
How to get the sucess message in the same page after submitting the contact form?
我使用 HTML 和 PHP 创建了联系表。此外,邮件正确到达邮件 ID。但是在成功消息之后,它正在重定向到 form.php
页面,有人可以帮助我吗?这是我第一次尝试建立网站。
这是我的联系表格代码:
<form method="post" action="form.php">
<input name="name" required="required" placeholder="Your Name">
<input name="email" type="email" required="required" placeholder="Your Email">
<div class="clearfix"> </div>
<textarea name="message" cols="20" rows="5" required="required" placeholder="Message"></textarea>
<div class="submit">
<input id="submit" name="submit" type="submit" value="Submit">
</div>
</form>
这是我的 form.php
:
<?php
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$from = 'From: agriindiaexp.com';
$to = 'shridhar.kagi@gmail.com';
$subject = 'Email Inquiry';
$body = "From: $name\n E-Mail: $email\n Message:\n $message";
if ($_POST['submit']) {
if (mail ($to, $subject, $body, $from)) {
$success = "Message successfully sent";
} else {
$success = "Message Sending Failed, try again";
}
}
?>
请帮帮我。
试试这个方法。尝试从 ajax 发送邮件。请像下面这样写你的代码
javascript
<script type="text/javascript">
function sendEnquiryform(){
var name=$('#name').val();
var email=$('#email').val();
var message=$('#message').val();
$.post("send_mail.php",'name='+name+'&email='+email'&message='+message,function(result,status,xhr) {
if( status.toLowerCase()=="error".toLowerCase() )
{ alert("An Error Occurred.."); }
else {
//alert(result);
$('#sucessMessage').html(result);
}
})
.fail(function(){ alert("something went wrong. Please try again") });
}
</script>
你的html
<form method="post" name="FrmEnquiry" id="FrmEnquiry" action="" onsubmit="sendEnquiryform();">
<input name="name" id="name" required="required" placeholder="Your Name">
<input name="email" id="email" type="email" required="required" placeholder="Your Email">
<div class="clearfix"> </div>
<textarea name="message" id="message" cols="20" rows="5" required="required" placeholder="Message"></textarea>
<div class="submit">
<input id="submit" name="submit" type="submit" value="Submit">
</div>
</form>
<span id="sucessMessage"> </span>
send_mail.php
<?php
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$from = 'From: agriindiaexp.com';
$to = 'shridhar.kagi@gmail.com';
$subject = 'Email Inquiry';
$body = "From: $name\n E-Mail: $email\n Message:\n $message";
if ($_POST['submit']) {
if (mail ($to, $subject, $body, $from)) {
$success = "Message successfully sent";
} else {
$success = "Message Sending Failed, try again";
}
}
?>
这将在您的 page.Please 中显示您的消息试试这个。这对我来说工作正常。
请使用此代码
<?php
if ($_POST['submit']) {
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$from = 'From: agriindiaexp.com';
$to = 'shridhar.kagi@gmail.com';
$subject = 'Email Inquiry';
$body = "From: $name\n E-Mail: $email\n Message:\n $message";
if (mail ($to, $subject, $body, $from)) {
$success = "Message successfully sent";
} else {
$success = "Message Sending Failed, try again";
}
echo $success;
}
?>
您可以 post 将表单转到同一页面并在那里检查成功消息,就像这样。
<?php
if ($_POST['submit']) {
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$from = 'From: agriindiaexp.com';
$to = 'shridhar.kagi@gmail.com';
$subject = 'Email Inquiry';
$body = "From: $name\n E-Mail: $email\n Message:\n $message";
if (mail ($to, $subject, $body, $from)) {
$success = "Message successfully sent";
} else {
$success = "Message Sending Failed, try again";
}
}
?>
...other html....
<div id="message"><?php if(isset($success)){ echo $success; } ?></div>
<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<input name="name" required="required" placeholder="Your Name">
<input name="email" type="email" required="required" placeholder="Your Email">
<div class="clearfix"> </div>
<textarea name="message" cols="20" rows="5" required="required" placeholder="Message"></textarea>
<div class="submit">
<input id="submit" name="submit" type="submit" value="Submit">
</div>
</form>
...other html....
在 java 脚本中出现错误。
function sendEnquiryform(){
var fname=$('#fname').val();
var email=$('#email').val();
var pd=$('#pd').val();
var pg=$('#pg').val();
var ced=$('#ced').val();
var score=$('#score').val();
var message=$('#message').val();
$.post("mail.php",'fname='+name+'&email='+email' +'&pd='+pd' +'&pg='+pg' +'&ced='+ced' +'&score='+score'&message='+message,function(result,status,xhr) }
if( status.toLowerCase()=="error".toLowerCase() )
{ alert("An Error Occurred.."); }
else {
//alert(result);
$('#sucessMessage').html(result);
}
})
.fail(function(){ alert("something went wrong. Please try again") });
}
在表单所在的同一页面上使用 mail.php 可以发挥神奇作用。以下代码发挥了作用。
<?php
$from = '';
$sendTo = 'email@email.com';
$subject = 'New message from contact form';
$fields = array('name' => 'Name', 'email' => 'Email', 'subject' => 'Subject', 'message' => 'Message');
$okMessage = 'Thank you for your message. I will write back soon.';
$errorMessage = 'There is an error while sending message. Please try again later.';
try {if (!empty($_POST)) {
$emailText = "You have a new message from your contact form\n=====\n";
foreach ($_POST as $key => $value) {
if (isset($fields[$key])) {
$emailText .= "$fields[$key]: $value\n";
}
}
$headers = array('Content-Type: text/plain; charset="UTF-8";',
'From: ' . $from,
'Reply-To: ' . $from,
'Return-Path: ' . $from,
);
mail($sendTo, $subject, $emailText, implode("\n", $headers));
$responseArray = array('type' => 'success', 'message' => $okMessage);
}
}
catch (\Exception $e) {
$responseArray = array('type' => 'danger', 'message' => $e->getMessage());
}
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 {
echo $responseArray['message'];
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
$(function () {
$('#contact-form').on('submit', function (e) {
if (!e.isDefaultPrevented()) {
var url = "contact.php";
$.ajax({
type: "POST",
url: url,
data: $(this).serialize(),
success: function (data) {
var messageAlert = 'alert-' + data.type;
var messageText = data.message;
var alertBox = '<div class="alert ' + messageAlert + ' alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×
</button>' + messageText + '</div>';
if (messageAlert && messageText) {
$('#contact-form').find('.messages').html(alertBox);
$('#contact-form')[0].reset();
}
}
});
return false;
}
})
});
</script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xl-8 offset-xl-2">
<h1>CONTACT FORM</h1><hr>
<p class="lead">By filling out the contact form; You may have information about us and current news.</p>
<form id="contact-form" method="post" role="form" novalidate="true">
<div class="messages"></div>
<div class="controls">
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<label for="form_name">Full Name *</label>
<input id="form_name" type="text" name="name" class="form-control" placeholder="Please fill the name field *" required="required" data-error="You must fill the name field">
<div class="help-block with-errors alert-danger"></div>
</div>
</div>
<div class="col-lg-6"></div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<label for="form_email">E-mail *</label>
<input id="form_email" type="email" name="email" class="form-control" placeholder="Please fill the email field *" required="required" data-error="You must fill the email field">
<div class="help-block with-errors alert-danger"></div>
</div>
</div>
<div class="col-lg-6"></div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<label for="form_subject">Subject *</label>
<input id="form_subject" type="text" name="subject" class="form-control" placeholder="Please fill the subject field *" required="required" data-error="You must fill the subject field">
<div class="help-block with-errors alert-danger"></div>
</div>
</div>
<div class="col-lg-6"></div>
</div>
<div class="form-group">
<label for="form_message">Message *</label>
<textarea id="form_message" name="message" class="form-control" placeholder="Please fill the message field *" rows="4" required="required" data-error="You must fill the message field"></textarea>
<div class="help-block with-errors alert-danger"></div>
</div>
<input type="submit" class="btn btn-success btn-send" value="Submit">
<p class="text-muted" style="padding-top: 5px;"><strong>*</strong>This field must be fill.</p>
</div><!-- controls all end -->
</form><!-- form all end -->
</div><!-- col-xl-8 offset-xl-2 end -->
</div><!-- row all end -->
</div><!-- container all end -->
</body>
我使用 HTML 和 PHP 创建了联系表。此外,邮件正确到达邮件 ID。但是在成功消息之后,它正在重定向到 form.php
页面,有人可以帮助我吗?这是我第一次尝试建立网站。
这是我的联系表格代码:
<form method="post" action="form.php">
<input name="name" required="required" placeholder="Your Name">
<input name="email" type="email" required="required" placeholder="Your Email">
<div class="clearfix"> </div>
<textarea name="message" cols="20" rows="5" required="required" placeholder="Message"></textarea>
<div class="submit">
<input id="submit" name="submit" type="submit" value="Submit">
</div>
</form>
这是我的 form.php
:
<?php
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$from = 'From: agriindiaexp.com';
$to = 'shridhar.kagi@gmail.com';
$subject = 'Email Inquiry';
$body = "From: $name\n E-Mail: $email\n Message:\n $message";
if ($_POST['submit']) {
if (mail ($to, $subject, $body, $from)) {
$success = "Message successfully sent";
} else {
$success = "Message Sending Failed, try again";
}
}
?>
请帮帮我。
试试这个方法。尝试从 ajax 发送邮件。请像下面这样写你的代码
javascript
<script type="text/javascript">
function sendEnquiryform(){
var name=$('#name').val();
var email=$('#email').val();
var message=$('#message').val();
$.post("send_mail.php",'name='+name+'&email='+email'&message='+message,function(result,status,xhr) {
if( status.toLowerCase()=="error".toLowerCase() )
{ alert("An Error Occurred.."); }
else {
//alert(result);
$('#sucessMessage').html(result);
}
})
.fail(function(){ alert("something went wrong. Please try again") });
}
</script>
你的html
<form method="post" name="FrmEnquiry" id="FrmEnquiry" action="" onsubmit="sendEnquiryform();">
<input name="name" id="name" required="required" placeholder="Your Name">
<input name="email" id="email" type="email" required="required" placeholder="Your Email">
<div class="clearfix"> </div>
<textarea name="message" id="message" cols="20" rows="5" required="required" placeholder="Message"></textarea>
<div class="submit">
<input id="submit" name="submit" type="submit" value="Submit">
</div>
</form>
<span id="sucessMessage"> </span>
send_mail.php
<?php
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$from = 'From: agriindiaexp.com';
$to = 'shridhar.kagi@gmail.com';
$subject = 'Email Inquiry';
$body = "From: $name\n E-Mail: $email\n Message:\n $message";
if ($_POST['submit']) {
if (mail ($to, $subject, $body, $from)) {
$success = "Message successfully sent";
} else {
$success = "Message Sending Failed, try again";
}
}
?>
这将在您的 page.Please 中显示您的消息试试这个。这对我来说工作正常。
请使用此代码
<?php
if ($_POST['submit']) {
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$from = 'From: agriindiaexp.com';
$to = 'shridhar.kagi@gmail.com';
$subject = 'Email Inquiry';
$body = "From: $name\n E-Mail: $email\n Message:\n $message";
if (mail ($to, $subject, $body, $from)) {
$success = "Message successfully sent";
} else {
$success = "Message Sending Failed, try again";
}
echo $success;
}
?>
您可以 post 将表单转到同一页面并在那里检查成功消息,就像这样。
<?php
if ($_POST['submit']) {
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$from = 'From: agriindiaexp.com';
$to = 'shridhar.kagi@gmail.com';
$subject = 'Email Inquiry';
$body = "From: $name\n E-Mail: $email\n Message:\n $message";
if (mail ($to, $subject, $body, $from)) {
$success = "Message successfully sent";
} else {
$success = "Message Sending Failed, try again";
}
}
?>
...other html....
<div id="message"><?php if(isset($success)){ echo $success; } ?></div>
<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<input name="name" required="required" placeholder="Your Name">
<input name="email" type="email" required="required" placeholder="Your Email">
<div class="clearfix"> </div>
<textarea name="message" cols="20" rows="5" required="required" placeholder="Message"></textarea>
<div class="submit">
<input id="submit" name="submit" type="submit" value="Submit">
</div>
</form>
...other html....
在 java 脚本中出现错误。
function sendEnquiryform(){
var fname=$('#fname').val();
var email=$('#email').val();
var pd=$('#pd').val();
var pg=$('#pg').val();
var ced=$('#ced').val();
var score=$('#score').val();
var message=$('#message').val();
$.post("mail.php",'fname='+name+'&email='+email' +'&pd='+pd' +'&pg='+pg' +'&ced='+ced' +'&score='+score'&message='+message,function(result,status,xhr) }
if( status.toLowerCase()=="error".toLowerCase() )
{ alert("An Error Occurred.."); }
else {
//alert(result);
$('#sucessMessage').html(result);
}
})
.fail(function(){ alert("something went wrong. Please try again") });
}
在表单所在的同一页面上使用 mail.php 可以发挥神奇作用。以下代码发挥了作用。
<?php
$from = '';
$sendTo = 'email@email.com';
$subject = 'New message from contact form';
$fields = array('name' => 'Name', 'email' => 'Email', 'subject' => 'Subject', 'message' => 'Message');
$okMessage = 'Thank you for your message. I will write back soon.';
$errorMessage = 'There is an error while sending message. Please try again later.';
try {if (!empty($_POST)) {
$emailText = "You have a new message from your contact form\n=====\n";
foreach ($_POST as $key => $value) {
if (isset($fields[$key])) {
$emailText .= "$fields[$key]: $value\n";
}
}
$headers = array('Content-Type: text/plain; charset="UTF-8";',
'From: ' . $from,
'Reply-To: ' . $from,
'Return-Path: ' . $from,
);
mail($sendTo, $subject, $emailText, implode("\n", $headers));
$responseArray = array('type' => 'success', 'message' => $okMessage);
}
}
catch (\Exception $e) {
$responseArray = array('type' => 'danger', 'message' => $e->getMessage());
}
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 {
echo $responseArray['message'];
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
$(function () {
$('#contact-form').on('submit', function (e) {
if (!e.isDefaultPrevented()) {
var url = "contact.php";
$.ajax({
type: "POST",
url: url,
data: $(this).serialize(),
success: function (data) {
var messageAlert = 'alert-' + data.type;
var messageText = data.message;
var alertBox = '<div class="alert ' + messageAlert + ' alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×
</button>' + messageText + '</div>';
if (messageAlert && messageText) {
$('#contact-form').find('.messages').html(alertBox);
$('#contact-form')[0].reset();
}
}
});
return false;
}
})
});
</script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xl-8 offset-xl-2">
<h1>CONTACT FORM</h1><hr>
<p class="lead">By filling out the contact form; You may have information about us and current news.</p>
<form id="contact-form" method="post" role="form" novalidate="true">
<div class="messages"></div>
<div class="controls">
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<label for="form_name">Full Name *</label>
<input id="form_name" type="text" name="name" class="form-control" placeholder="Please fill the name field *" required="required" data-error="You must fill the name field">
<div class="help-block with-errors alert-danger"></div>
</div>
</div>
<div class="col-lg-6"></div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<label for="form_email">E-mail *</label>
<input id="form_email" type="email" name="email" class="form-control" placeholder="Please fill the email field *" required="required" data-error="You must fill the email field">
<div class="help-block with-errors alert-danger"></div>
</div>
</div>
<div class="col-lg-6"></div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<label for="form_subject">Subject *</label>
<input id="form_subject" type="text" name="subject" class="form-control" placeholder="Please fill the subject field *" required="required" data-error="You must fill the subject field">
<div class="help-block with-errors alert-danger"></div>
</div>
</div>
<div class="col-lg-6"></div>
</div>
<div class="form-group">
<label for="form_message">Message *</label>
<textarea id="form_message" name="message" class="form-control" placeholder="Please fill the message field *" rows="4" required="required" data-error="You must fill the message field"></textarea>
<div class="help-block with-errors alert-danger"></div>
</div>
<input type="submit" class="btn btn-success btn-send" value="Submit">
<p class="text-muted" style="padding-top: 5px;"><strong>*</strong>This field must be fill.</p>
</div><!-- controls all end -->
</form><!-- form all end -->
</div><!-- col-xl-8 offset-xl-2 end -->
</div><!-- row all end -->
</div><!-- container all end -->
</body>