jquery - How to get Twitter Bootstrap modals to stay open on form submit?

Question

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

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.

Thank you.

<?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 = "[email protected]";
    $subject = "Contact Form request";
    $from_name = "My Website";
    $from = "[email protected]";
    $headers = "From: $from_name <$from>";
    foreach($form as $key => $value) $message .= "$key: $value
";

    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

In order not to close the modal window, that is, not to refresh the whole page, you need to submit the form values to your php script through ajax call.

For simplicity I will use jQuery here

$(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);
        });
    });
};