title: Show bootstrap modal as "thank you" after form is submitted
body: <p>I have a contact form i'm working on and i'd like a modal to be displayed when the form is submitted successfully. The problem i'm having is actually getting the form to show and i think my problem is in my javascript (i'm pretty new to it).
  Anyway, here's what i'm using:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
   $('#agents input:submit').click(function() {
    $('#agents form').attr('action', 'http://' + document.domain + '/agents/php/feedback_custom.php');
    $('#agents form').submit();
   });
   $('form #response').hide();
   $('#submit').click(function(e) {
    // prevent forms default action until
    // error check has been performed
    e.preventDefault();
    // grab form field values
    .....
  
    if (valid != '') {
                       ....do stuff.....
    }
    // let the user know something is happening behind the scenes
    // serialize the form data and send to our ajax function
    else {
     $('form #response').removeClass().addClass('processing').html('Processing...').fadeIn('fast');          
     var formData = $('form').serialize(); 
     submitForm(formData);   
    }
   });
  });
  function submitForm(formData) {
   $.ajax({  
    type:   'POST',
    url:   '../agents/php/feedback_custom.php',
    data:   formData,
    dataType: 'json',
    cache:  false,
    timeout: 7000,
    success: 
    function(data) {
     $("#thankyouModal").modal('show');
    },
    error: 
    function (XMLHttpRequest, textStatus, errorThrown) {
     $('form #response').removeClass().addClass('error')
        .html('&lt;div class="alert alert-danger"&gt;' +
         '&lt;p&gt;There was an &lt;strong&gt;ERROR SENDING THE FORM&lt;/strong&gt;&lt;br&gt;Please make sure you have filled out the required fields and resend the form.&lt;/p&gt;' +
             '&lt;/div&gt;').fadeIn('fast');
    }
   });
  };</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;head&gt;&lt;/head&gt;
  &lt;body&gt;
             &lt;div class="modal fade" id="thankYouModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"&gt;
                &lt;div class="modal-dialog modal-lg "&gt;
                  &lt;div class="modal-content alert alert-success"&gt;
                    &lt;div class="modal-header"&gt;
                      &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;&lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;&lt;/button&gt;
                      &lt;h4 class="modal-title h2"&gt;&lt;strong&gt;Your Claim Information Has Been Submitted&lt;/strong&gt;&lt;/h4&gt;
                    &lt;/div&gt;
                    &lt;div class="modal-body"&gt;
                      &lt;p&gt;modal text&lt;/p&gt;
                    &lt;/div&gt;
                    &lt;div class="modal-footer"&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;&lt;!-- /.modal-content --&gt;
                &lt;/div&gt;&lt;!-- /.modal-dialog --&gt;
              &lt;/div&gt;&lt;!-- /.modal --&gt;
             &lt;form role="ajaxExample" method="post" action="" enctype="multipart/form-data" id="agents"&gt;
                    &lt;div id="response"&gt;&lt;/div&gt;
               &lt;div class="row"&gt;
                   &lt;h2 class="h3 headline"&gt;&lt;span&gt;Required Fields (&lt;span class="required"&gt;*&lt;/span&gt;):&lt;/span&gt;&lt;/h2&gt;
                      &lt;div class="col-sm-4 info-board info-board-red"&gt;
                       &lt;h4&gt;Customer Information&lt;/h4&gt;
                       &lt;!-- customer info here --&gt;
                     &lt;/div&gt;
                      &lt;div class="col-sm-4 info-board info-board-red"&gt;
                       &lt;h4&gt;Insurance Information&lt;/h4&gt;
                          &lt;!-- insurance info here --&gt;
                      &lt;/div&gt;
                      &lt;div class="col-sm-4 info-board info-board-red"&gt;
                       &lt;h4&gt;Vehicle Information&lt;/h4&gt;
                       &lt;!-- vehicle info here --&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="row"&gt;
                   &lt;div class="col-sm-12 info-board info-board-blue"&gt;
                       &lt;div class="form-group"&gt;
                           &lt;label for="spamQuestion"&gt;
                               &lt;span class="required"&gt;*&lt;/span&gt; Anti-spam... Please Solve The Math Problem &lt;span class="required"&gt;*&lt;/span&gt;:&lt;br&gt;&amp;nbsp;&amp;nbsp;
                          &lt;?php
                                  $a = rand(1, 10);
                                  $b = rand(1, 10);
                                  echo $a." + ".$b." = ?";
                          ?&gt;
                           &lt;/label&gt;
                              &lt;input type="hidden" value="&lt;?php echo $a;?&gt;" name="value1" /&gt;
                              &lt;input type="hidden" value="&lt;?php echo $b;?&gt;" name="value2" /&gt;                            
                              &lt;input type="text" name="answer" value="what's the result?" onclick="this.value=''" tabindex="26" class="form-control" /&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="row"&gt;
                   &lt;div class="col-xs-12"&gt;
                          &lt;input type="hidden" name="honeypot" id="honeypot" value="http://"&gt;
                          &lt;input type="hidden" name="humancheck" id="humanCheck" class="clear" value=""&gt;
                          &lt;button type="submit" name="submit" id="submit" tabindex="27" class="btn btn-success"&gt;Submit Claim&lt;/button&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;input type="reset" name="reset1" value="Reset Form" tabindex="28" class="btn btn-red" /&gt;
                &lt;div id="response"&gt;&lt;/div&gt;
               &lt;/div&gt;
                  &lt;/div&gt;
         &lt;/form&gt;
   &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="../js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;script src="js/ajax_submit_custom.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>My php:</p>
  
  <pre><code>&lt;?php 
  sleep(.5);
  //Sanitize incoming data and store in variable
  
  //customer info
  $policyName = trim(stripslashes(htmlspecialchars($_POST['policyName'])));           
  $homePhone = trim(stripslashes(htmlspecialchars($_POST['homePhone'])));
  $homePhoneLink = preg_replace('/\D+/', '', $homePhone);
  $workPhone = trim(stripslashes(htmlspecialchars($_POST['workPhone'])));
  $workPhoneLink = preg_replace('/\D+/', '', $workPhone);
  $filerName = trim(stripslashes(htmlspecialchars($_POST['filerName'])));
  $agentOrNot = trim(stripslashes(htmlspecialchars($_POST['agentOrNot'])));
  $replyEmail = '';
  if ($_POST['replyEmail'] != '') {
  $replyEmail .= $_POST['replyEmail'];
  } else {
  $replyEmail .= 'noReply@centuryglasssc.com';
  }
  
  //insurance info
  $policy = trim(stripslashes(htmlspecialchars($_POST['policy'])));
  $insCompany = trim(stripslashes(htmlspecialchars($_POST['insCompany'])));
  $agentName = trim(stripslashes(htmlspecialchars($_POST['agentName'])));
  $vin = trim(stripslashes(htmlspecialchars($_POST['vin'])));
  $compCoverage = trim(stripslashes(htmlspecialchars($_POST['compCoverage'])));
  $dateOfLoss = trim(stripslashes(htmlspecialchars($_POST['dateOfLoss'])));
  
  //vehicle info
  $year = trim(stripslashes(htmlspecialchars($_POST['year'])));
  $make = trim(stripslashes(htmlspecialchars($_POST['make'])));
  $model = trim(stripslashes(htmlspecialchars($_POST['model'])));
  $bodyStyle = trim(stripslashes(htmlspecialchars($_POST['bodyStyle'])));
  $doors = trim(stripslashes(htmlspecialchars($_POST['doors'])));
  $damagedGlass = trim(stripslashes(htmlspecialchars($_POST['damagedGlass'])));
  
  //spam filters
  $humancheck = $_POST['humancheck'];
  $honeypot = $_POST['honeypot'];
  $answer = $_POST['answer'];
  $c = $_POST['value1'] + $_POST['value2'];
  
  if ($honeypot == 'http://' &amp;&amp; empty($humancheck)) { 
  
  //Validate data and return success or error message
  $error_message = '';    
  $reg_exp = "/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9-]+\.[a-zA-Z.]{2,4}$/";
  
  
  if (empty($policyName)) {
          $error_message .= "&lt;p&gt;POLICYHOLDER NAME IS REQUIRED.&lt;/p&gt;";             
  }
  
  if (empty($homePhone)) {
          $error_message .= "&lt;p&gt;HOME PHONE IS REQUIRED.&lt;/p&gt;";            
  }
  if (empty($workPhone)) {
          $error_message .= "&lt;p&gt;WORK IS REQUIRED.&lt;/p&gt;";              
  }
  
  
  
  if ($answer != $c) {
              $error_message .=   "&lt;p&gt;PLEASE RE-ENTER YOUR SIMPLE MATH ANSWER AND TRY AGAIN.&lt;/p&gt;";
  }
  
  
  if (!empty($error_message)) {
          $return['error'] = true;
          $return['msg'] = '&lt;div class="alert alert-danger"&gt;'."&lt;h4&gt;OOPS! THE FORM WAS NOT SUBMITTED.&lt;/h4&gt;".$error_message;                    
          echo json_encode($return);
          exit();
  } 
  
  else {
  //mail variables
  #$to =              'info@centuryglasssc.com';
  $to =           'mainstwebguy@gmail.com';
  $from = $_POST['replyEmail'];
  $headers =  'From: '.$from."\r\n";
  $headers .= 'MIME-Version: 1.0' . "\r\n";
  $headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";
  $subject =  "Agent Claim From Website\n";
  
  
  $body =         '&lt;h4&gt;Customer Information&lt;/h4&gt;';
  $body .=        '&lt;p&gt;Policyholder:   '.$policyName."&lt;br /&gt;";
  $body .=        'Home Phone: '.'&lt;a href="tel:+1'.$homePhoneLink.'"&gt;'.$homePhone."&lt;/a&gt;&lt;br /&gt;";
  $body .=        'Work Phone: '.'&lt;a href="tel:+1'.$workPhoneLink.'"&gt;'.$workPhone."&lt;/a&gt;&lt;br /&gt;";
  if (isset($_POST['filerName']))     {   $body   .=  $filerName;     }
  if (isset($_POST['agentOrNot']))    {   $body   .=  $agentOrNot;    }
  if(isset($_POST['replyEmail']))     {   $body   .=  $replyEmail;    }
  $body .=        '&lt;/p&gt;';
  
  
  
  $body .=        '&lt;h4&gt;Insurance Information&lt;/h4&gt;';
  $body .=        '&lt;p&gt;Policy #: '.$policy.'&lt;br /&gt;';
  $body .=        'Ins. Company:  '.$insCompany.'&lt;br /&gt;';
  $body .=        'Agent\'s Name: '.$agency.'&lt;br /&gt;';
  $body .=        'VIN: '.$vin.'&lt;br /&gt;';
  $body .=        'Comp Coverage: '.$compCoverage.'&lt;br /&gt;';
  $body .=        'Date of Loss:  '.$dateOfLoss.'&lt;/p&gt;';
  
  
  
  
  
  $body .=        '&lt;h4&gt;Vehicle Information&lt;/h4&gt;';
  $body .=        '&lt;p&gt;Year:   '.$year.'&lt;br /&gt;';
  $body .=        'Make:  '.$make.'&lt;br /&gt;';
  $body .=        'Model: '.$model.'&lt;br /&gt;';
  $body .=        'Body Style:    '.$bodyStyle.'&lt;br /&gt;';
  $body .=        'Number of Doors:   '.$doors.'&lt;br /&gt;';
  $body .=        'Damaged Glass: '.$damagedGlass.'&lt;/p&gt;';
  
  
  
  //send email and return a message to user
  if(mail($to, $subject, $body, $headers)) {  
      $return['error'] = false;
      $return['msg'] = 
          '&lt;div class="alert alert-success"&gt;'.
              "&lt;h4&gt;Thank you for using our form &lt;/h4&gt;".
              "&lt;p&gt;We'll reply to you as soon as we can.&lt;/p&gt;";
  
              echo json_encode($return);
  }
  else {
  
      $return['error'] = true;
      $return['msg'] = "&lt;h4&gt;Oops! There was a problem sending the email. Please try again.&lt;/h4&gt;"; 
      echo json_encode($return);
  }
  
  }
  
  } 
  else {
  
  $return['error'] = true;
  $return['msg'] = "&lt;h4&gt;Oops! There was a problem with your submission. Please try again.&lt;/h4&gt;";  
  echo json_encode($return);
  }
  
  ?&gt; 
  </code></pre>
  
  <p>One thing to note is that I am receiving the email from the form, it's just that the modal isn't firing.</p>
  
  <p>What am i missing?</p>