jquery – 如何让Twitter Bootstrap模式在表单提交时保持打开状态？

我试图弄清楚是否有一种相对简单的方法(我对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 -->

解决方法

提交表单时,即使表单的操作是同一页面,也会重新加载页面(空操作也表示同一页面).

我想你想再次加载页面后重新打开模态.猜测你使用的是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>

原文链接：https://www.f2er.com/jquery/181107.html

jquery – 如何让Twitter Bootstrap模式在表单提交时保持打开状态？

解决方法

猜你在找的jQuery相关文章