Question

我在网上搜索并找到了一些解决方案，但他们都使用了JS或AJAX并且只在一定程度上提供了帮助。我是PHP的新手，并且对AJAX没有任何线索，所以如果有人在这里可以使用PHP和我提供解决方案HTML或最多JS。

我在客户网站的页脚部分的bootstrap 3模式中有一个非常简单的订阅表单。 PHP for it验证订阅者仅使用其官方或公司电子邮件地址进行订阅以及其他一些常见/更简单的验证。

表单效果很好，但问题是，只要用户点击提交，模式就会关闭，用户无法看到成功或失败消息，直到他们从触发按钮重新打开模态。即使用户提交表单并显示表单提交是否成功，我希望模态保持打开状态。我希望我能够正确解释我的问题。这是我的HTML＆amp; PHP供您参考：

HTML：

  <div id="footer">   
    <div class="container">
      <div class="col-md-6">
        <div id="SubscribeModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">✕</button>
              </div>
              <div class="modal-body">
                <?php include('subscribe.php') ?>
              </div>
              <div class="modal-footer"></div>
            </div><!-- /.modal-content -->
          </div><!-- /.modal-dalog -->
        </div><!-- /.modal -->
        <a data-toggle="modal" href="#SubscribeModal" class="text-muted">Subscribe</a>
      </div>
    </div>
  </div>

PHP：

<?php
    if(isset($_POST['subscribe'])){ 
    /* Configuration */
    $subject = 'Please subscribe me to your Risk Alerts. Thank you.'; // Set email subject    line here
    $mailto  = 'xyz@company.com'; // Email address to send form submission to
    /* END Configuration */
    if(empty($_POST['firstname'])){
        $error = "Please add your first name";
    }elseif(empty($_POST['lastname'])){
        $error = "Please add your last name";
    }elseif(empty($_POST['email'])){
        $error = "Please add your business email";    
    }else{ 
        $firstname      = $_POST['firstname'];
        $lastname       = $_POST['lastname'];
        $email          = $_POST['email'];

        // HTML for email to send submission details
        $body = "
        <br>
        <p>The following information was submitted through the contact form on your website:</p>
        <p><b>Name</b>: $firstname $lastname<br>
        <b>Email</b>: $email<br>
        ";


        $headers = "From: $firstname $lastname <$email> \r\n";
        $headers .= "Reply-To: $email \r\n";
        $headers .= "MIME-Version: 1.0\r\n";
        $headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";
        $message = "<html><body>$body</body></html>";

        //build list of not allowed providers as lowercase
        $NotAllowedClients = array("aol","applemail","comcast","entourage","gmail","hotmail","outlook");

        preg_match_all('/\@(.*?)\./',$email,$clientarr);            
        $client = strtolower($clientarr[1][0]);            

        if(in_array($client,$NotAllowedClients)){
            //Failed
            $notice = "<div class=\"row-fluid\">
            <div class=\"span12\">
                <h3>Subscription Failed!</h3>
                <p>Please use an official/company email address to subscribe.  <a href=\"?\">Try again</a></p>
            </div>
        </div>"; 
        }else{
            //Passed
            //echo $message;
            mail($mailto, $subject, $message, $headers);
            $notice = "<div class=\"row-fluid\">
            <div class=\"span12\">
                <h3>Subscription successful!</h3>
                <p>Thank you for taking the time to subscribe to our weekly Risk Alerts.</p>
            </div>
        </div>";
        }
    }
} 
?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Risk Alerts</title>
</head>
<body>
<?php
if(isset($notice)){
echo $notice;
}else{
    //Show error for missing field
    if(isset($error)){echo $error;}
?>
    <div class="thumbnail center well well-small text-center">
        <form id="subscription" method="post" action="" class="validate" novalidate>
            <div class="row">
                <div class="col-xs-6 col-md-6">
                    <input type="text" name="firstname" value="" class="form-control input-md" placeholder="your first name"  />
                </div>
                    <div class="col-xs-6 col-md-6">
                <input type="text" name="lastname" value="" class="form-control input-md" placeholder="your last name"  />
                </div>
            </div><p></p>
            <input type="text" value="" name="email" class="form-control" placeholder="your email address" required /><br />
            <div class="clear">
                <input type="submit" value="Subscribe" name="subscribe" class="btn btn-md btn-primary button" />
            </div>
        </form>
    </div> 

    <?php
    }
    ?>
</body>
</html>

Answer 1

我还没有检查你的实际PHP，但假设它有效，我会用ajax提交表单并处理响应。

所以，请尝试以下方法：在模态内容中添加ID：

          <div class="modal-body" id="modal_content">
            <?php include('subscribe.php') ?>
          </div>

然后将提交按钮更改为：

<a href="javascript:void(0)" class="text-muted" id ="submit_button">Subscribe</a>

然后将此jquery添加到表单页面的底部（用正确的url替换DIRECT_URL_TO_SUBSCRIBE）：

jQuery(function ($){
    $('#submit_button').click(function(){
        var post_url = 'DIRECT_URL_TO_SUBSCRIBE.php';

        $.ajax({
            type : 'POST',
            url : post_url,
            data: $('#subscription').serialize(), //ID of your form
            dataType : 'html',
            async: true,
            beforeSend:function(){
                //add a loading gif so the broswer can see that something is happening
                $('#modal_content').html('<div class="loading"><img scr="loading.gif"></div>');
            },
            success : function(data){
                $('#modal_content').html(data);
            },
            error : function() {
                $('#modal_content').html('<p class="error">Error in submit</p>');
            }
        });
    })           
});

Answer 2

我试图找出一个类似的问题，所以我将把它留给未来的谷歌。

添加到PHP：

    <?php
     $keepOpen="";
     if(isset($notice)){
     $keepOpen="<script> $('#SubscribeModal').modal('show'); </script>";

添加到HTML：

<?php echo $keepOpen; ?>

Answer 3

嗨，这很有效，

    **data-backdrop="static"**

将它添加到bootstrap模态类。那应该为你解决问题。

    <button type="button" data-backdrop="static" data-toggle="modal" 
    data- target="#yourID">Subscribe</button>

在表单提交后阻止bootstrap模式关闭

3 个答案: