如何获取Twitter Bootstrap模态以在提交表单时保持打开状态? [英] How to get Twitter Bootstrap modals to stay open on form submit?

问题描述

我试图找出是否存在一种相对简单的方法(我对JQuery不太熟练)来在提交表单后保持模式打开. (该表格包含在模式中).

I am trying to figure out if there is a relatively simple way (I'm not very skilled at JQuery) to keep the modal open after a form submit. (The form is contained in the modal).

如果表单成功或有错误，我的PHP将显示它们，但是一旦按下提交"按钮，模式就会关闭.

If the form is successful or there are errors, my PHP will show them but the modal closes as soon as the submit button is pressed.

如果重新加载表单，我可以看到适当的成功或错误消息，因此一切正常，但是我希望最终用户看到该消息，然后单击以关闭模式.

If I reload the form, I can see the appropriate success or error message so all is working fine, but I'd prefer the end-user to see the message then click to close the modal afterwards.

如果有帮助，我可以发布我的代码.

I can post my code if that helps.

谢谢.

<?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 = "[e-mail]";
    $subject = "Contact Form request";
    $from_name = "My Website";
    $from = "[e-mail]";
    $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 -->

推荐答案

提交表单时，即使表单的action是同一页面，页面也会重新加载(空动作也意味着同一页面)

When you form is submitted, the page is reloaded, even if the action of the form is the same page (empty action means the same page too).

我认为您想在页面再次加载后重新打开模式.猜测您使用的是method="post"表单，您的代码应该是这样的:

I think you want to re-open the modal once the page is loaded again. Guessing that you are using a method="post" form, your code should be something like that :

<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>

这篇关于如何获取Twitter Bootstrap模态以在提交表单时保持打开状态?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！