title: Sending email with PHP on a modal with AJAX
body: <p>I have a modal that contains a form that sends email using PHP.  I do not want that Modal to close when the email is sent so I have tried to use AJAX to send it without refreshing the page.  However, I cannot keep it from closing when I push submit and cannot figure out what the problem is.  The emails still send so I believe it has something to do with AJAX.</p>
  
  <pre><code>    &lt;?php include 'email_form.php';?&gt;
  
      &lt;?php echo $result; ?&gt;
  
  &lt;form method="post"&gt;
      &lt;div class="form-group"&gt;
          &lt;label for="name"&gt;Name:&lt;/label&gt;
          &lt;input type="text" name="name" id="name" class="form-control" placeholder="Your Name"
          value="&lt;?php echo $_SESSION['post-data']['name']; ?&gt;" /&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
          &lt;label for="email"&gt;Email:&lt;/label&gt;
          &lt;input type="email" name="email" id="email" class="form-control" placeholder="Your Email"
          value="&lt;?php echo $_SESSION['post-data']['email']; ?&gt;" /&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
          &lt;label for="comment"&gt;Comment:&lt;/label&gt;
          &lt;textarea class="form-control" id="comment" name="comment"&gt;&lt;?php echo $_SESSION['post-data']['comment']; ?&gt;&lt;/textarea&gt;
      &lt;/div&gt;
      &lt;div class="modal-footer text-center"&gt;
          &lt;input type="submit" name="submit" id="submit" class="btn" value="Submit"/&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>The PHP</p>
  
  <pre><code>&lt;?php
  
    $_SESSION['post-data'] = $_POST;
  
      $name = strip_tags($_POST['name']);
      $email = strip_tags($_POST['email']);
      $comment = strip_tags($_POST['comment']);
  
          if ($_POST["submit"]) {
  
  
  
               if (!$_POST['name']) {
                  $error="&lt;br /&gt;Please enter your name";
               }
  
               if (!$_POST['email']) {
                  $error.="&lt;br /&gt;Please enter your email address";
               }
  
               if (!$_POST['comment']) {
                   $error.="&lt;br /&gt;Please enter a comment";
              }
  
               if ($_POST['email']!="" AND !filter_var($_POST['email'],
                  FILTER_VALIDATE_EMAIL)) {
                   $error.="&lt;br /&gt;Please enter a valid email address";
               }
  
               if ($error) {
                   $result='&lt;div class="alert alert-danger"&gt;&lt;strong&gt;There were error(s)
                  in your form:&lt;/strong&gt;'.$error.'&lt;/div&gt;';
  
           } else {
  
              if (mail("user@email.com", "Comment from website.com", "Name: ".
              $_POST['name']."
                  Email: ".$_POST['email']."
                  Comment: ".$_POST['comment'])) 
  
              {
               $result='&lt;div class="alert alert-success"&gt;&lt;strong&gt;Thank
              you!&lt;/strong&gt; I\'ll be in touch.&lt;/div&gt;';
  
              unset($_SESSION['post-data']['name']);
              unset($_SESSION['post-data']['email']);
              unset($_SESSION['post-data']['comment']);
              session_destroy();
  
           } else {
              $result='&lt;div class="alert alert-danger"&gt;Sorry, there was
              an error sending your message. Please try again later.&lt;/div&gt;';
  
          }
  
       }
   }
  
  ?&gt;
  </code></pre>
  
  <p>JavaScript</p>
  
  <pre><code>      &lt;script&gt;
  $(document).ready(function () {
  
      $('#submit').click(function(event) {
  
      $('.modal').on('hide.bs.modal', function(e) {         
          e.preventDefault();
          });
  
      var formData = {
          'name'              : $('input[id=name]').val(),
          'email'             : $('input[id=email]').val(),
          'comment'           : $('input[id=comment]').val(),    
      };
  
      $.ajax({
          type: "post",
          url: "email_form.php", 
          data: formData,
          success: function(msg){
             alert("Email sent");
          },
          error: function(){
              alert("Please try to resubmit");
          }   
      });
  });
  });
  
  &lt;/script&gt;
  </code></pre>
  
  <p>I have also tried this but it too closed the modal</p>
  
  <pre><code>  &lt;script&gt;
   $(document).ready(function () {
  
      $('#submit').submit(function(event) {
  
          event.preventDefault();
  
  
      var formData = {
          'name'              : $('input[id=name]').val(),
          'email'             : $('input[id=email]').val(),
          'comment'           : $('input[id=comment]').val(),    
      };
  
      $.ajax({
          type: "post",
          url: "email_form.php", 
          data: formData,
          success: function(msg){
             alert("Email sent");
          },
          error: function(){
              alert("Please try to resubmit");
          }   
      });
  });
  });
  
  &lt;/script&gt;    
  </code></pre>