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

为了不关闭模态窗口，即不刷新整个页面，您需要通过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 2

提交表单后，即使表单的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 3

您还可以使用 window.stop（）来阻止模型关闭以及整个刷新，就像点击浏览器中的停止按钮一样。

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

3 个答案: