防止引導模式從表單提交後關閉

我已經在網絡中搜索並找到了一些解決方案，但它們都使用JS或AJAX，並且只在一定程度上有所幫助。我是PHP的新手，對AJAX毫無頭緒，所以如果某人在這裏可以爲我提供一個使用PHP或最多JS的解決方案。防止引導模式從表單提交後關閉

我有一個非常簡單的訂閱表單內的引導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 = '[email protected]'; // 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>

來源

2014-03-27 user3463636

我相當肯定的語氣被關閉的原因是由於這個......數據切換=「模式「在你的提交按鈕中。把它拿出來，再試一次，它應該保持開放。我還沒有測試過。 – user1641165

否則檢出這個鏈接.... https://groups.google.com/forum/#!topic/twitter-bootstrap-stackoverflow/ODY5ShHVPsM .....如果這不起作用，你可以使用這個jQuery鏈接http://stackoverflow.com/questions/15279716/form-inside-the-modal-bootstrap。 – user1641165

嗨，謝謝你的回覆。但如果我刪除data-toggle =「modal」，那麼模式根本不會打開！我是PHP和Javascript的新手。反正我試圖把JS提供的鏈接由你....在我的PHP中關閉body標籤之前，但是表單不起作用！ :(我不知道如何解決這個問題！ – user3463636

我沒有檢查你的實際PHP但假設它的作品，我會提交表格ajax並處理響應。

所以，請嘗試以下操作：添加ID到您的模態內容：

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

然後改變你的提交按鈕這樣的：

然後這個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>'); 
      } 
     }); 
    })   
});

來源

2014-03-28 12:21:53

嗨，這個作品，

**data-backdrop="static"**

添加到引導模態類。這應該爲你解決問題。

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

來源

2015-02-18 14:22:48 terdia

閱讀更多[link]（http://getbootstrap.com/2.3.2/javascript.html#modals） – terdia

我試圖找出類似的問題，所以我會留下這個未來的Google。

添加到PHP：

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

添加到HTML：

<?php echo $keepOpen; ?>

來源

2017-03-15 06:17:18 Morgazm12345

防止引導模式從表單提交後關閉

回答

相關問題