在Bootstrap中使用JavaScript和PHP制作的模式表单在提交时不发送电子邮件
Modal form made in Bootstrap with JavaScript and PHP not sending email on submit
我使用一个按钮创建了这个页面，以触发一个具有联系人表单的模态。
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#stayInformed">Stay Informed</button>
我正试图将该表单提交到页面顶部的php，以便给自己发送一封电子邮件。然而，php既没有发送电子邮件，也没有显示echos。
<?php
$myemail = 'user@email.com';
if (isset($_POST['name'])) {
$name = strip_tags($_POST['name']);
$email = strip_tags($_POST['email']);
$company = strip_tags($_POST['company']);
echo "<span class='"alert alert-success'" >Your message has been received. Thanks! Here is what you submitted:</span><br><br>";
echo "<stong>Name:</strong> ".$name."<br>";
echo "<stong>Email:</strong> ".$email."<br>";
echo "<stong>Company:</strong> ".$company."<br>";
$to = $myemail;
$email_subject = "Contact form submission: $name";
$email_body = "You have received a new message. ".
" Here are the details:'n Name: $name 'n ".
"Email: $email'n Company 'n $company";
$headers = "From: $myemail'n";
$headers .= "Reply-To: $email";
mail($to,$email_subject,$email_body,$headers);
}?>
底部有一个JavaScript，它应该触发表单POST。
<script>
$(document).ready(function () {
$('form#contact').on('submit', function(event) {
event.preventDefault();
$.ajax({
type: "POST",
url: "index.php",
data: $('form.contact').serialize(),
success: function(msg){
$("#stayInformed").modal('hide');
alert(document.getElementById("name").value + " " + document.getElementById("email").value + " " + document.getElementById("company").value);
},
error: function(){
alert("failure");
}
});
});
});
</script>
按钮正确地触发了模态，JavaScript似乎运行正常。它在提交时关闭模态，如果我将php指针更改为不存在的东西，就会抛出错误。
整个页面的模态张贴在下面：
<?php
$myemail = 'user@email.com';
if (isset($_POST['name'])) {
$name = strip_tags($_POST['name']);
$email = strip_tags($_POST['email']);
$company = strip_tags($_POST['company']);
echo "<span class='"alert alert-success'" >Your message has been received. Thanks! Here is what you submitted:</span><br><br>";
echo "<stong>Name:</strong> ".$name."<br>";
echo "<stong>Email:</strong> ".$email."<br>";
echo "<stong>Company:</strong> ".$company."<br>";
$to = $myemail;
$email_subject = "Contact form submission: $name";
$email_body = "You have received a new message. ".
" Here are the details:'n Name: $name 'n ".
"Email: $email'n Company 'n $company";
$headers = "From: $myemail'n";
$headers .= "Reply-To: $email";
mail($to,$email_subject,$email_body,$headers);
}?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Modal Form Test</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
</div>
</nav>
<div class="jumbotron">
<div class="container">
<p><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#stayInformed">Stay Informed</button>
</p>
</div> <!-- /container -->
</div> <!-- /jumbotron -->
<!-- stayInformed Modal -->
<div class="modal fade" id="stayInformed" tabindex="-1" role="dialog" aria-labelledby="stayInformed">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Stay Informed!</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" id="contact" role="form" method="post" action="index.php">
<fieldset>
<legend>Register Below</legend>
<div class="form-group">
<label for="textArea" class="col-lg-2 control-label">Name</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="name" placeholder="First Last"></input>
</div>
</div>
<div class="form-group">
<label for="textArea" class="col-lg-2 control-label">Email</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="email" placeholder="name@company.com">
</div>
</div>
<div class="form-group">
<label for="textArea" class="col-lg-2 control-label">Company</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="company" placeholder="Company"></input>
</div>
</div>
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<input type="submit" name="submit" value="Submit" id="submit" class="btn btn-primary" form="contact"></input>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- JavaScript for modal form -->
<script>
$(document).ready(function () {
$('form#contact').on('submit', function(event) {
event.preventDefault();
$.ajax({
type: "POST",
url: "index.php",
data: $('form.contact').serialize(),
success: function(msg){
$("#stayInformed").modal('hide');
alert(document.getElementById("name").value + " " + document.getElementById("email").value + " " + document.getElementById("company").value);
},
error: function(){
alert("failure");
}
});
});
});
</script>
</body>
</html>
编辑：我稍微更改了javascript和一些id的值，以消除重复。仍然不起作用。我现在可以在成功警报中看到这些值，但似乎仍然没有PHP正在执行。
编辑2：经过一些故障排除后，$_POST中似乎没有变量发送到php。我不知道为什么。。。
只需更改此项：
$("input#submit").click(function(){
// stuff
});
通过这个：
$('form#stayInformed').on('submit', function(event) {
event.preventDefault();
// stuff
});
简历：不监听点击按钮，您必须监听表单提交事件。preventDefault（）方法禁用默认操作，即不使用ajax提交表单。有了这个代码，一切正常。
下次，请自己尝试一下，并在谷歌上搜索它的制作过程。这是javascript的基本前提。
祝好运
编辑
注意，ID#stayInformation在DIV和FORM中是重复的。这是非常糟糕的做法。请确保html代码中的ID没有重复。
我将JavaScript代码更改为：
<script>
$(document).ready(function () {
$('#contact').submit(function(event) {
var formData = {
'name' : $('input[id=name]').val(),
'email' : $('input[id=email]').val(),
'company' : $('input[id=company]').val()
};
event.preventDefault();
$.ajax({
type: "post",
url: "index.php",
data: formData,
success: function(msg){
$("#stayInformed").modal('hide');
},
error: function(){
alert("form post failed");
}
});
});
});
</script>
这是有效的。
相关文章：
- Jquery提交表单而不刷新
- 如何在提交表单时将PHP变量传递到Javascript cookie中
- 每次提交表单时都会重新加载网页
- Razor中的自动提交表单
- 使用 JavaScript 自动提交表单
- 点击相同的按钮打开模型，然后提交表单
- 添加和删除隐藏字段数组中的值，而不提交表单
- 使用Ajax提交表单
- jQuery:使用“jQuery验证”后无法提交表单's远程验证
- 如何在不重新加载的情况下提交表单，并使用Node+Express将数据传递回同一页面
- 有登录表单时无法提交表单
- 带有select的jquery提交表单不起作用
- 如何防止回车键提交表单，但仍然允许回车工作
- 使用按钮和单选按钮提交表单，但始终使用相同的值
- 在提交表单之前确定重复值
- 如何创建动态ajax提交表单
- HTML提交表单，同时包含空字段检查和按钮隐藏
- 如何使用jQueryAjax使用动态html输入texbox提交表单
- 当触发下拉列表的onchange事件时，使用JavaScript提交表单
- 提交表单后，Watir文本框输入未持续(重置为以前的文本框输入）
