javascript - php脚本邮件程序模式 Bootstrap

Question

您好，我在 Bootstrap 中使用模式提交表单我怎样才能通过解雇消息来完成这项工作而不关闭模式？

HTML

<div class="modal fade bs-example-modal-lg" id="myModal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
          <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header modal-header-custom">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                </div>

                <div class="modal-body text-center">

                    <form class="form-inline requestaccessForm" role="form" name="requestaccessForm">
                      <div class="form-group">
                        <label class="sr-only" for="First Name">First Name</label>
                        <input type="text" class="form-control" id="request_first_name" placeholder="First Name">
                      </div>
                      <div class="form-group">
                        <label class="sr-only" for="Last Name">Last Name</label>
                        <input type="text" class="form-control" id="request_last_name" placeholder="Last Name">
                      </div>
                      <div class="form-group">
                        <label class="sr-only" for="email">Email</label>
                        <input type="email" class="form-control" id="request_email" placeholder="Email">
                      </div>
                      <button type="submit" id="requestformSubmit" class="btn btn-green">Submit</button>

                    </form>
              </div>
            </div>
          </div>
    </div>

PHP

<?php
 $myemail = 'dummyemail@email.com';
 if (isset($_POST['request_first_name'])) {
 $request_first_name = strip_tags($_POST['request_first_name']);
 $request_last_name = strip_tags($_POST['request_last_name']);
 $request_email = strip_tags($_POST['request_email']);

  echo "<span class=\"alert alert-success\" >Your message has been received. Thanks!       
  Here is what you submitted:</span><br><br>";
  echo "<stong>Name:</strong> ".$request_first_name."<br>"; 
  echo "<stong>Name:</strong> ".$request_last_name."<br>";  
  echo "<stong>Email:</strong> ".$request_email."<br>"; 


 $to = $myemail;
 $email_subject = "Contact form submission: $request_first_name";
 $email_body = "You have received a new message. ".
 " Here are the details:\n Name: $request_first_name \n ".
 "Email: $request_email\n";
 $headers = "From: $myemail\n";
 $headers .= "Reply-To: $request_email";
 mail($to,$email_subject,$email_body,$headers);
 }?>

Javascript

    $(document).ready(function () {
        $("button#requestformSubmit").click(function(){
            $.ajax({
                type: "POST",
                url: "process.php", // 
                data: $('form.requestaccessForm').serialize(),
                success: function(msg){
                    alert("success");
                },
                error: function(){
                    alert("failure");
                }
            });
        });
    });

谢谢

Answer 1

要实现这一目标，您必须首先采取一些步骤..

1. 添加div在模态中，它将作为成功消息容器。

   关闭<div class="modal-body text-center">之前添加以下代码:

   ...
   <div id="successMessage"/></div>
   ...
   

2. 更改 success $.ajax 的处理程序请求将解雇/成功消息添加到 div在上一步中创建。

   将以下代码添加到您的$.ajax中success处理程序:

   ...
   success: function(msg){
                $("#successMessage").html(msg);
   },
   ...
   

3. 防止按钮点击时的默认操作，以便模式不会在请求后关闭。

   在 jQuery click 末尾添加以下行功能:

   return false; 
   

所以你的 jQuery 代码将如下所示:

    $(document).ready(function () {
    $("button#requestformSubmit").click(function(){
        $.ajax({
            type: "POST",
            url: "process.php", // 
            data: $('form.requestaccessForm').serialize(),
            success: function(msg){
                $("#successMessage").html(msg);
            },
            error: function(){
                alert("failure");
            }
        });
        return false; 
    });
});

希望对你有帮助