Load modal after form submit

Question

Relevant page here: http://marcmurray.net/test_sites/cans/news.php

I've been trying to load a message confirmation modal for a while after the user submits an email, but can't get it to work at all.

So far I've tried echoing the whole script out, triggering the script, and changing the hash in the URL and checking for that, which has worked in other areas of the site.

Adding functions like alerts and echoing text onto the page is working fine, but when I use the show method it doesn't work. That leads me to believe I am either escaping characters wrong, or misunderstand how modals work a little. Can anyone see where I'm messing up?

PHP:

<?php
if(isset($_POST["submit"])) {
        // Checking For Blank Fields..
    if($_POST["vname"]==""||$_POST["vemail"]==""||$_POST["sub"]==""||$_POST["msg"]==""){
       echo "Please fill out everything! We need to know who you are, and why you want to get in touch with us!";}
    else
        {
        // Check if the "Sender's Email" input field is filled out
        $email=$_POST['vemail'];
                // Sanitize E-mail Address
        $email =filter_var($email, FILTER_SANITIZE_EMAIL);
                // Validate E-mail Address
        $email= filter_var($email, FILTER_VALIDATE_EMAIL);
        $emailConfirmed=$_POST['vemail'];
        if (!$email){
          echo "Don't forget to include your email adress! Otherwise we can't get back to you.";
                }
                else
                {
                    $subject = $_POST['sub'];
                    $message = $_POST['msg'];
                    $headers =  'From:' . $emailConfirmed . "\r\n"; // Sender's Email
                    $headers .= 'Cc:' . $emailConfirmed . "\r\n"; // Carbon copy to Sender
                    // Message lines should not exceed 70 characters (PHP rule), so wrap it
                    $message = wordwrap($message, 70);
                    // Send Mail By PHP Mail Function
                    mail("[email protected]", $subject, $message, $headers);
                    echo "<script>$('#thankyouModal').modal('show')</script>";
                };
    }
 }
?>

HTML for the modal

<div class="modal fade" id="thankyouModal" tabindex="-1" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title" id="myModalLabel">Thank you for pre-registering!</h4>
      </div>
      <div class="modal-body">
          <p>Thanks for getting in touch!</p>                     
      </div>    
    </div>
  </div>
</div>

EDIT: Updated code to be simpler than initial question.

Answer 1

Instead of calling modal show method upfront let all the assets load first then call the modal show method.

echo "<script>
         $(window).load(function(){
             $('#thankyouModal').modal('show');
         });
    </script>";

Answer 2

Instead of echoing the script why not just detect your form submit with javascript and then display the modal?

Something like

$("form").on('submit', function(){
   $('.modal').show();
})

(If you're using JQuery)