首页 > 编程语言> > 防止表单提交后关闭引导程序模式

防止表单提交后关闭引导程序模式

2019-11-22 00:33:42 作者：互联网

我在网上搜索了很多,确实找到了一些解决方案,但是他们都使用了JS或AJAX,仅在一定程度上有所帮助.我是PHP新手,对AJAX毫无头绪,因此如果有人可以使用PHP和Amp为我提供解决方案, HTML或最多JS.

我客户网站的页脚部分的bootstrap 3模态中有一个非常简单的订阅表格.用于它的PHP验证订户是否仅使用其官方或公司电子邮件地址进行订户以及其他一些常见/更简单的验证.

表单运行良好,但问题在于,一旦该人单击“提交”,模态就会关闭,并且用户只有从触发器按钮重新打开模态,才能看到成功或失败消息.我希望模态在用户提交表单后仍然保持打开状态,并显示表单提交是否成功.我希望我能够正确解释我的问题.这是我的HTML& 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>

解决方法:

我没有检查您的实际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>');
            }
        });
    })           
});

标签：forms,twitter-bootstrap-3,modal-dialog,php
来源： https://codeday.me/bug/20191121/2055577.html