title: php/ajax - {"success":{"title":"Message Sent"}}
body: <p>I've never used ajax before but from what I can tell that's the solution to my problem, basically I'm using a PHPmailer form on indk.org/contact.html and when you hit submit it displays a new window (taking you away from the website nav) with <code>{"success":{"title":"Message Sent"}}</code> shown</p>
  
  <p>How do I stop this happening, or at the very least, have a message sent confirmation appear on the webpage itself, want to avoid taking people off site as much as I can as it's a personal portfolio.</p>
  
  <p>Welcome any aid! Thanks :) D</p>
  
  <pre><code>    &lt;?php 
  
      require '../_lib/phpmailer/PHPMailerAutoload.php';
  
      // CONFIG YOUR FIELDS
      //============================================================
      $name =     filter_var($_POST["name"], FILTER_SANITIZE_STRING);
      $email =    filter_var($_POST["email"], FILTER_SANITIZE_EMAIL);
      $formMessage =  filter_var($_POST["message"], FILTER_SANITIZE_STRING);
  
      // CONFIG YOUR EMAIL MESSAGE
      //============================================================
      $message = '&lt;p&gt;The following request was sent from: &lt;/p&gt;';
      $message .= '&lt;p&gt;Name: ' . $name . '&lt;/p&gt;';
      $message .= '&lt;p&gt;Email: ' . $email . '&lt;/p&gt;';
      $message .= '&lt;p&gt;Message: ' . $formMessage .'&lt;/p&gt;';
  
      // CONFIG YOUR MAIL SERVER
      //============================================================
      $mail = new PHPMailer;
      $mail-&gt;isSMTP();                                    // Enable SMTP     authentication
      $mail-&gt;SMTPAuth = true;                             // Set mailer to use SMTP
      $mail-&gt;Host = 'mailout.one.com';                // Specify main and backup server (this is a fake name for the use of this example)             
  
      $mail-&gt;Username = 'dk@indk.org';                  // SMTP username
      $mail-&gt;Password = 'XXX';                         // SMTP password
      $mail-&gt;SMTPSecure = 'SSL';                          // Enable encryption, 'ssl' also accepted                                   
      $mail-&gt;Port = 587;                        
  
      $mail-&gt;From = 'dk@indk.org';
      $mail-&gt;FromName = $name;
      $mail-&gt;AddReplyTo($email,$name);
      $mail-&gt;addAddress('dk@indk.org', $name);  // Add a recipient
  
      $mail-&gt;WordWrap = 50;                               // Set word wrap to 50 characters
      $mail-&gt;isHTML(true);                                // Set email format to HTML
  
      $mail-&gt;Subject = 'Contact request';
      $mail-&gt;Body    = $message;
      $mail-&gt;AltBody = 'This is the body in plain text for non-HTML mail clients';
  
      if(!$mail-&gt;send()) {
     $data['error']['title'] = 'Message could not be sent.';
     $data['error']['details'] = 'Mailer Error: ' . $mail-&gt;ErrorInfo;
     exit;
  }
  
  $data['success']['title'] = 'Message Sent, click back to return to indk.org';
  
  
  echo json_encode($data);
  
  
  ?&gt;
  
  
  
  $(document).ready(function() {
      'use strict';
      $('#contact-form').validate({
          // Override to submit the form via ajax
          submitHandler: function(form) {
              $('#contact-panel').portlet({
                  refresh:true
              });
              $.ajax({
                   type:$(form).attr('method'),
                   url: $(form).attr('action'),
                   data: $(form).serialize(),
                   dataType: 'json',
                   success: function(data){
                      console.log(data);
                     //Set your Success Message
                     clearForm("Thank you for Contacting Us! We will be in touch");
                   },
                   error: function(err){
                      $('#contact-panel').portlet({
                          refresh:false,
                          //Set your ERROR Message
                          error:"We could not send your message, Please try Again"
                      });
                   }
              });
              return false; // required to block normal submit since you used ajax
          }
      });
      function clearForm(msg){
          $('#contact-panel').html('&lt;div class="alert alert-success" role="alert"&gt;'+msg+'&lt;/div&gt;');
      }
  
      $('#contact-panel').portlet({
          onRefresh: function() {
          }
      });
  });
  </code></pre>