我已创建了一个联系表单，以便用户可以向我们发送电子邮件。但是，每次单击发送电子邮件时，它都会在单击时刷新页面。这是一个单页网站。
我尝试过修改：How do I make an HTML button not reload the page
使用<button>元素或使用<input type="button"/>。以及prevent refresh of page when button inside form clicked
添加onclick="return false;"。
这两个修复程序都会在单击时停止按钮刷新页面，但是，它也会阻止联系表单实际工作，不再向我们发送电子邮件。
我还更新了我的PHP以反映该类型的名称更改。
我的PHP是：
<?php
if(isset($_POST['submit'])){
$to = "example@example.com"; // this is your Email address
$from = $_POST['email']; // this is the sender's Email address
$name = $_POST['name'];
$subject = "Form submission";
$subject2 = "Copy of your form submission";
$message = $name . " wrote the following:" . "\n\n" . $_POST['message'];
$message2 = "Here is a copy of your message " . $name . "\n\n" . $_POST['message'];
$headers = "From:" . $from;
$headers2 = "From:" . $to;
mail($to,$subject,$message,$headers);
mail($from,$subject2,$message2,$headers2); // sends a copy of the message to the sender
echo "Mail Sent. Thank you " . $name . ", we will contact you shortly.";
}
?>
我的HTML是：
<form action="" method="post" id="contactForm">
<input type="text" name="name" id="name" placeholder="Name...">
<input type="text" name="email" id="email" placeholder="Email...">
<p><br></p>
<textarea name="message" id="message" cols="40" rows="3" spellcheck="true" placeholder="Message..."></textarea>
<p><br></p>
<button type="submit" id="submit" name="submit" onclick="return false;">Send Message</button>
</form>
这当前适用于发送电子邮件，但不会阻止它刷新页面。非常感谢为什么要这样做..
修改
我尝试了一些使用AJAX的不同选项，因为有人建议这是最好的选择。所有这些都成功地阻止了页面刷新，但所有选项再一次阻止我的联系表单停止工作。我试过了：
1
$(function() {
$('#contactForm').on('submit', function(e) {
$.post('index.php', $(this).serialize(), function (data) {
// This is executed when the call to mail.php was succesful.
// 'data' contains the response from the request
}).error(function() {
// This is executed when the call to mail.php failed.
});
e.preventDefault();
});
});
2
$("#contactForm").submit(function(e) {
e.preventDefault();
});
第3：
我也尝试过Harsh Panchal给我的答案。
答案 0 :(得分：1)
您可以尝试使用jquery ajax方法
为发送电子邮件和表单属性创建新文件以提供任何ID
<script>
$('#main-contact-form').submit(function(event){
event.preventDefault();
$.ajax({
type:'post',
url:'sendememail.php',
data:$(this).serialize(),
success:function(response){
if(response==1)
{
setInterval(function(){$('.review_form').html('<h5><center><div class="alert alert-success">Review Successfully Submited......</div></center></h5>');},5);
}
else
{
setInterval(function(){$('.review_form').html('<h5><center><div class="alert alert-danger">Sorry Your Review Not Submit......</div></center></h5>');},5);
}
}
});
});
</script>
答案 1 :(得分：0)
使用jQuery AJAX表单提交以及Event.preventDefault()，以便该页面不会进一步刷新。
如需更多帮助，请点击https://api.jquery.com/jquery.post/
链接答案 2 :(得分：0)
要在ajax中执行此操作，请删除form.action=""，因为它会重新加载页面。
尝试
action。form属性
type=submit移除button。button，而不是将其添加到form.submit。代码看起来像这样
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<form id="contactForm">
<input type="text" name="name" id="name" placeholder="Name...">
<input type="text" name="email" id="email" placeholder="Email...">
<p><br></p>
<textarea name="message" id="message" cols="40" rows="3" spellcheck="true" placeholder="Message..."></textarea>
<p><br></p>
<button id="submit" name="submit">Send Message</button>
</form>
$(document).ready(function() {
$('#submit').click(function(e) {
e.preventDefault();
$.post('index.php', $("form#contactForm").serialize(), function(data) {}).error(function(xhr) {alert(xhr)});
});
});
答案 3 :(得分：0)
我认为jQuery和AJAX是要走的路。我有几点建议：
在e.preventDefault()之前尝试移动$.post。这应该在重新加载页面然后发送电子邮件之前停止事件。
除e.stopPropagation()之外或代替e.preventDefault()，请尝试使用return false;。这将阻止事件冒泡DOM，以便其他元素不会触发重新加载。
尝试将var booksSchema = mongoose.Schema({
...
},
{ collection: 'books', toJSON: { virtuals: true } })
// Foreign keys definitions
// http://mongoosejs.com/docs/populate.html#populate-virtuals
booksSchema.virtual('author', {
ref: 'author',
localField: 'id_a',
foreignField: 'id_a',
justOne: true // for many-to-1 relationships
});
module.exports.getAuthor = function (query) {
return Author.findOne(query).exec();
}
// this help you get books with author
module.exports.getBook = function (query) {
return Book.find(query)
.populate('author')
.exec();
}
添加到功能的末尾。有一个类似的问题：Prevent form redirect OR refresh on submit?
答案 4 :(得分：0)
@thickguru，如果您使用<form>...</form>维护您的邮件在SAME页面上发送PHP代码，请不要期望收到一个有效的解决方案 - 有或没有ajax。即使页面没有刷新，即使您使用的是ajax，也必须从ajax结果（这是一个BAD选项）重建页面。因此，您必须在不同的页面中分离这两个任务，然后才能使用ajax。通过这种方式，您可以实现美丽的“关注点分离”（请参阅Separation of concerns - 至少是第一段）。
以下是使用ajax提交表单的两个选项。
NOTA BENE：不再if(isset($_POST['submit'])){...}。如果使用此验证，它将失败，因为默认情况下，提交按钮不会作为POST变量的一部分发送。如果您仍想验证$ _POST数组，则必须在已发送的data对象中手动将其指定为属性。
请注意使用json编码函数json_encode。
<?php
$to = "example@example.com"; // this is your Email address
//...
$message = "Mail Sent. Thank you " . $name . ", we will contact you shortly.";
echo json_encode($message);
?>
NOTA BENE： onclick按钮上没有submit属性！
<div id="results"></div>
<form id="contactForm" name="contactForm" action="send_mail.php" method="post">
<!-- ... The form inputs ... -->
<button type="submit" id="submit" name="submit">Submit</button>
</form>
/**
* On document ready.
*
* @return void
*/
$(document).ready(function () {
sendEmail();
});
/**
* Send email.
*
* @return void
*/
function sendEmail() {
var contactForm = $('#contactForm');
var results = $('#results');
contactForm.submit(function (event) {
var ajax = $.ajax({
method: 'post',
dataType: 'json',
url: 'send_mail.php',
data: contactForm.serialize()
});
ajax.done(function (response, textStatus, jqXHR) {
results.html(response);
});
ajax.fail(function (jqXHR, textStatus, errorThrown) {
results.html('Email sending failed!');
});
ajax.always(function (response, textStatus, jqXHR) {
// ...
});
return false;
});
}
NOTA BENE ：如果您决定使用表单提交验证，则必须处理所有情况。例如，当您像这样使用它时，您将收到错误：
if (isset($_POST['submit'])) {
//...
$message = "Mail Sent. Thank you " . $name . ", we will contact you shortly.";
echo json_encode('Hello, World!');
}
解决方案是处理未设置的POST'submit'：
if (isset($_POST['submit'])) {
//...
$message = "Mail Sent. Thank you " . $name . ", we will contact you shortly.";
echo json_encode('Hello, World!');
} else {
echo json_encode('Submit button not recognized');
}
NOTA BENE： dito。
<?php
$to = "example@example.com"; // this is your Email address
//...
$message = "Mail Sent. Thank you " . $name . ", we will contact you shortly.";
echo $message;
?>
NOTA BENE： dito。
<div id="results"></div>
<form id="contactForm" name="contactForm" action="send_mail.php" method="post">
<!-- ... The form inputs ... -->
<button type="submit" id="submit" name="submit">Submit</button>
</form>
/**
* On document ready.
*
* @return void
*/
$(document).ready(function () {
sendEmail();
});
/**
* Send email.
*
* @return void
*/
function sendEmail() {
var contactForm = $('#contactForm');
var results = $('#results');
contactForm.submit(function (event) {
var ajax = $.ajax({
method: 'post',
dataType: 'html',
url: 'send_mail.php',
data: contactForm.serialize()
});
ajax.done(function (response, textStatus, jqXHR) {
results.html(response);
});
ajax.fail(function (jqXHR, textStatus, errorThrown) {
results.html('Email sending failed!');
});
ajax.always(function (response, textStatus, jqXHR) {
// ...
});
return false;
});
}
我建议您不要使用post或get的简写ajax版本。通过正常的ajax调用，您可以获得更大的灵活性。