我想使用模态通过php文件发送邮件,我希望一旦提交关闭就关闭pop

时间:2016-05-19 11:34:51

标签: javascript jquery html twitter-bootstrap

我有一个简单的表单,一旦页面加载就可以通过bootstrap模式很好地加载。我想处理并发送一次点击提交,模式应立即关闭而不刷新页面。以下是我的代码。它不起作用。我需要帮助。使用php文件,它会发送邮件,但它会将我带到php文件并被卡在那里。我相信这是一件小事,但我无法绕过它。

$(function() {
  $(window).load(function() {
    $('#Modal').modal('show');

  });

   $('#btn_send').click(function(){
      var name  = $(":input[name='name']").val();
      var email = $(":input[name='email']").val();

      var varData = 'name=' + name + '&email=' +email; 

      $.ajax({
        type: 'POST',
        url: 'index.php',
        data: varData,
        success: function(){
            alert('Mail sent. Thank you.');
        }
    });
});
});
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post" id="form_pp">
  <div id="Modal" class="modal fade in" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-sm">
      <div class="modal-content">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
        </button>
        <div class="modal-header" style="margin-top:120px;">
          <div class="modal-body">

            <div class="form-group">
              <input class="form-control" placeholder="YOUR FULL NAME" name="name" type="text" required autofocus>
            </div>
            <div class="form-group">
              <input class="form-control" placeholder="YOUR EMAIL ADDRESS" name="email" type="email" required>
            </div>

            <br>
            <button type="submit" class="btn btn-default" style="color:#c13b01" id="btn_send">SEND</button>
            <button type="button" class="btn btn-default" style="color:#c13b01" name="send" id="btn_cancel" data-dismiss="modal">CANCEL</button>
          </div>
        </div>
      </div>
    </div>
  </div>

php file
if (isset($_POST['name']) && isset($_POST('email))) {
 $name = @trim(stripslashes($_POST['name'])); 
     $email = @trim(stripslashes($_POST['email'])); 
     $subject = "Results from Online contact form:\n\n";

    $email_from = $email;
    $email_to = 'mail@mail.com';

    $body = 'Name: ' . $name . "\n\n" . 'Email: ' . $email. "\n\n" . 'Subject: ' . $subject;

     @mail($email_to, $subject, $body, 'From: <'.$email_from.'>');

}

2 个答案:

答案 0 :(得分:0)

Leandro的回答是你成功的一部分。我会说php脚本无法正常工作的原因是因为它没有提供任何数据,因此无法发送电子邮件

为了从名称和电子邮件中检索数据,您需要更改其所在的部分

var name = $("name").val();
var email = $("recipientmail@mail.com").val();

var name  = $(":input[name='name']").val();
var email = $(":input[name='email']").val();

这应该可以帮助您将数据传输到服务器。

答案 1 :(得分:0)

在@Eric Dohmen的帮助下,我想我错过了引号和电子邮件变量的正确的括号。这是:

codesample