如何讓Twitter Bootstrap模塊在表單提交時保持打開狀態？

Question

我想弄清楚是否有一個相對簡單的方法（我不是很熟練JQuery）保持表單提交後打開模式。 （表單包含在模式中）。

如果表單成功或出現錯誤，我的PHP會顯示它們，但只要按下提交按鈕，模式就會關閉。

如果我重新加載表單，我可以看到相應的成功或錯誤消息，所以所有工作都正常，但我更喜歡最終用戶看到消息，然後單擊以關閉模式。

如果有幫助，我可以發佈我的代碼。

謝謝。

<?php 
$success_message = "<h3 class='success'>Thank you, your message has been sent.</h3>"; 
$success = false; // we assume it and set to true if mail sent 
$error = false; 

// set and sanitize our form field values 

$form = array(
    'Name' => $sanitizer->text($input->post->name), 
    'Email' => $sanitizer->email($input->post->email), 
    'Phone number' => $sanitizer->text($input->post->phone), 
    'Type of client' => $sanitizer->text($input->post->client_type), 
    'Service client is after' => $sanitizer->text($input->post->service), 
    'Further information' => $sanitizer->textarea($input->post->information) 
); 

$required_fields = array(
    'name' => $input->post->name, 
    'email' => $input->post->email 
); 


// check if the form was submitted 
if($input->post->submit) { 

    // determine if any fields were ommitted or didn't validate 
    foreach($required_fields as $key => $value) { 
    if(trim($value) == '') { 
     $error_message = "<h3 class='error'>Please check that you have completed all the required fields.</h3>"; 
     $error = true; 
    } 
    } 
    // if no errors, email the form results 
    if(!$error) { 
    $message = ""; 
    $to_name = "My name"; 
    $to = "me@me.com"; 
    $subject = "Contact Form request"; 
    $from_name = "My Website"; 
    $from = "do-not-reply@my-site.com"; 
    $headers = "From: $from_name <$from>"; 
    foreach($form as $key => $value) $message .= "$key: $value\n"; 

    require_once("./scripts/PHPMailer/class.phpmailer.php"); 

    $mail = new PHPMailer(); 
    $mail->CharSet = "UTF8"; 

    $mail->FromName = $from_name; 
    $mail->From = $from; 
    $mail->AddAddress($to, $to_name); 
    $mail->Subject = $subject; 
    $mail->Body = $message; 

    if ($mail->Send()) { 
     $success = true; 
    } 
} 
} 
?> 



<!-- Contact form made available from every page --> 

    <div class="modal hide fade" id="form"> 


     <div class="modal-header"> 
      <a class="close" data-dismiss="modal">&times;</a> 
      <h3>Get in touch</h3> 
     </div> 

     <div class="modal-body"> 

     <?php if(!$success) { 
      if($error) { 
      echo $error_message; // or pull from a PW field 
      } 
     ?> 

     <form action="./" method="post" class="modal-form"> 

      <div class="row-fluid"> 
       <fieldset class="span6"> 

        <label for="name">Name:</label> 
        <input type="text" name="name" required> 

        <label for="email">Email:</label> 
        <input type="email" name="email" required> 

        <label for="phone">Phone:</label> 
        <input type="tel" name="phone"> 

       </fieldset> 

       <fieldset class="span6"> 

        <label for="client_type">I am a...</label> 
        <select name="client_type"> 
         <option>Private student</option> 
         <option>Business</option> 
         <option>Unsure</option> 
        </select> 

        <label for="service">I am interested in...</label> 
        <select name="service"> 
         <option>Private tuition</option> 
         <option>Group tuition</option> 
         <option>Translation</option> 
         <option>Unsure</option> 
        </select> 

       </fieldset> 
      </div> <!-- /.row-fluid --> 


      <div class="row-fluid"> 
       <fieldset> 
        <label for="information">Further information:</label> 
        <textarea name="information" name="information" id="information" class="span12"></textarea> 
       </fieldset> 

      <button type="submit" name="submit" value="Submit" class="btn">Submit</button> 

      </div> <!-- /.row-fluid --> 

      </form> 

      <?php } else { 

      echo $success_message; 
      } ?> 

     </div> <!-- /.modal-body --> 


     <div class="modal-footer"> 

     </div> <!-- /.modal-footer --> 


    </div> <!-- /#contact_form.modal hide fade --> 

Answer 1

當你提交表單時，頁面重新加載，即使窗體的action是在同一頁（空的動作意味着在同一個頁面太）。

我想你想重新打開模式，一旦頁面被再次加載。猜你使用的是method="post"形式，你的代碼應該是類似的東西：

<html> 
    <head> 
     <!-- stuff --> 
     <script type="text/javascript"> 

<?php if(isset($_POST['submit_button'])) { ?> /* Your (php) way of checking that the form has been submitted */ 

      $(function() {      // On DOM ready 
       $('#myModal').modal('show');  // Show the modal 
      }); 

<?php } ?>         /* /form has been submitted */ 

     </script> 
    </head> 
    <body> 
     <!-- etc --> 
    </body> 
</html> 

Answer 2

爲了不關閉模態窗口，也就是說，不刷新整個頁面，則需要提交表單值通過ajax調用您的php腳本。

爲了簡單起見，我將使用jQuery這裏

$(function() { 

    $('#your_form_id').on('submit', function(event) { 

     event.preventDefault(); 

     $.ajax({ 
      url: "your_php_script.php", 
      type: "POST", 
      data: {"formFieldName" : formFieldValue}, // here build JSON object with your form data 
      dataType: "json", 
      contentType: "application/json" 
     }).done(function(msg) { 
      // this is returned value from your PHP script 
      //your PHP script needs to send back JSON headers + JSON object, not new HTML document! 
      // update your "message" element in the modal 
      $("#message_element_id").text(msg); 
     }); 
    }); 
}; 

Answer 3

您還可以使用window.stop（）這將防止關閉和整個刷新結合在一起的模型，它就像點擊停止按鈕在瀏覽器中。