Fatal编程技术网
  • javascript/
  • 使用JavaScript和PHP在Bootstrap中生成的模式表单在提交时不发送电子邮件

使用JavaScript和PHP在Bootstrap中生成的模式表单在提交时不发送电子邮件

javascript php jquery html twitter-bootstrap

使用JavaScript和PHP在Bootstrap中生成的模式表单在提交时不发送电子邮件,javascript,php,jquery,html,twitter-bootstrap,Javascript,Php,Jquery,Html,Twitter Bootstrap,我使用一个按钮创建了这个页面，该按钮触发一个具有联系人表单的模式 <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#stayInformed">Stay Informed</button> 随时了解情况 我正在尝试将该表单提交到页面顶部的php，以便向自己发送电子邮件。然而，php没有发送电子邮件，也没有显示回音 <?php $myemail = 'us

我使用一个按钮创建了这个页面，该按钮触发一个具有联系人表单的模式

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#stayInformed">Stay Informed</button>

随时了解情况
我正在尝试将该表单提交到页面顶部的php，以便向自己发送电子邮件。然而，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);
}?>
底部有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>


$（文档）.ready（函数（）{
$（'form#contact'）。关于（'submit'，函数（事件）{
event.preventDefault（）；
$.ajax({
类型：“POST”，
url:“index.php”，
数据：$（'form.contact'）。序列化（），
成功：功能（msg）{
$（“#stayInformed”）.modal（'hide'）；
警报（document.getElementById（“名称”）.value+“”+document.getElementById（“电子邮件”）.value+“”+document.getElementById（“公司”）.value）；
},
错误：函数（）{
警报（“故障”）；
}   
});
});
});
该按钮正在正确触发模式，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">&times;</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>


模态形式试验
随时了解情况


&时代；
随时通知！
在下面注册
名称
电子邮件
单位
取消
$（文档）.ready（函数（）{
$（'form#contact'）。关于（'submit'，函数（事件）{
event.preventDefault（）；
$.ajax({
类型：“POST”，
url:“index.php”，
数据：$（'form.contact'）。序列化（），
成功：功能（msg）{
$（“#stayInformed”）.modal（'hide'）；
警报（document.getElementById（“名称”）.value+“”+document.getElementById（“电子邮件”）.value+“”+document.getElementById（“公司”）.value）；
},
错误：函数（）{
警报（“故障”）；
}   
});
});
});
编辑：我稍微更改了javascript，并添加了一些ID的值，以避免重复。仍然不起作用。我现在可以在我的成功警报中看到这些值，但仍然没有显示PHP正在执行

编辑2：经过一些故障排除后，似乎没有变量被发送到$u POST中的php。我不知道为什么…

只要改变一下：

$("input#submit").click(function(){
   // stuff
});
据此：

$('form#stayInformed').on('submit', function(event) {
     event.preventDefault();
     // stuff
});
简历： 不侦听单击按钮，您必须侦听表单提交事件。preventDefault（）方法禁用默认操作，即在不使用ajax的情况下提交表单。有了这段代码，所有运行都正常

下一次，请你自己试试，在谷歌上搜索一下它是怎么做的。这是javascript的基本前提

祝你好运

编辑
注意，ID#stayInformed在DIV和表单中是重复的。这是非常糟糕的做法。请确保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>


$（文档）.ready（函数（）{
$（“#联系人”）。提交（功能（事件）{
var formData={
'name'：$（'input[id=name]）.val（），
'email'：$（'input[id=email]'）。val（），
'company'：$（'input[id=company]'）。val（）
};
event.preventDefault（）；
$.ajax({
类型：“post”，
url:“index.php”，
数据：formData，
成功：功能（msg）{
$（“#stayInformed”）.modal（'hide'）；
},
错误：函数（）{
警报（“表格张贴失败”）；
}   
});
});
});
这是有效的。

我应该怎么做？尝试替换
我尝试使用
但它仍然没有发送电子邮件或显示回音。或者添加e.preventDefault（）；谢谢你的回复。对不起，这太简单了。不幸的是，它似乎不适合我。我确实采纳了您的建议，将表单更改为
id=“stayInformedForm”
看起来JavaScript仍然在正确执行，但php根本没有。