6

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 = "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 -->
2
  • do you submit your form through ajax post? Aug 8, 2012 at 16:07
  • sorry Peter, I'm not too sure, I'm using phpmailer and native php. Not aware that I'm using any ajax. Aug 8, 2012 at 16:30
9

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

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

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>
8
  • Thanks, I will try this, I didn't even know you could mix js into php like this. Aug 8, 2012 at 19:25
  • @onjegolders Notice the php tags opening and closing, and the brackets too. You can do what-EVER you want on server-side (php side) as long as you produce valid HTML or JS.
    – Sherbrow
    Aug 8, 2012 at 20:00
  • ok thanks again, I will try this in the morning when I'm fresh if not I'll end up doing more harm than good! Aug 8, 2012 at 20:27
  • just had a try and whenever I add that bit of javascript into my php code, it causes the modal to not load. I should point out that the form is an include file and has all its logic at the top, followed by the html form itself. Aug 8, 2012 at 20:39
  • ok just went ahead and did like you did to add it into my head tags (felt strange as it's so far removed from my form include) and it works, so thank you! It also means that once closed if someone opens the modal again without refreshing the page, they get the success message once again but not sure that can be avoided? Aug 8, 2012 at 20:44
0

You can also use window.stop() which will prevent the model from closing and the entire refresh all together, it's like clicking on the stop button in the browser.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.