javascript - How do I show php error message when I'm submitting the form asynchronously? -

i'm using phpmailer send email ajax.

so need send mail , have error messages submit.php , display on contact.php

at moment every submission displays. message sent if hasn't.

contact.php

    <div class="contact-form">         <div class="container">             <h2>we'd love hear you.</h2>             <p>get in touch , lets kickstart project!</p>             <form action="/submit" method="post" class="form">                 <label>                 <input type="text" name="name" placeholder="name">                 </label>                 <label>                 <input type="text" name="company" placeholder="company">                 </label>                 <label>                   <input type="text" name="phone" placeholder="phone">                 </label>                 <label>                   <input type="text" name="email" placeholder="email" required>                 </label>                 <label>                   <textarea name="message" placeholder="tell project!" required></textarea>                 </label>                 <input class="submit" type="submit" value="submit">                 <div id="loader"></div>                 <span class="sent">your message has been sent!</span>                 <span class="not-sent">your message has been sent!</span>             </form>          </div>     </div>       <script>          // wait dom loaded          $(document).ready(function() {              // bind 'myform' , provide simple callback function              $('.form').ajaxform(function() {               });          });       $(document).ready(function(){         var $loading = $('#loader').hide();         $(document)           .ajaxstart(function () {             $loading.show();           })           .ajaxstop(function () {             $loading.hide();           });     });       $(document).ready(function(){         var $loading = $('.sent').hide();         $(document)           .ajaxstart(function () {             $loading.hide();           })           .ajaxstop(function () {             $loading.show();           });     });      $(document).ready(function(){         var $loading = $('.submit').show();         $(document)           .ajaxstart(function () {             $loading.hide();           })           .ajaxstop(function () {             $loading.show();           });     });      </script>  

submit.php

    <?php     require 'libs/phpmailer/phpmailerautoload.php';      $mail = new phpmailer;       $name = $_post['name'];     $company = $_post['company'];     $phone = $_post['phone'];     $email = $_post['email'];     $message = $_post['message'];      $mail->issmtp();                                      // set mailer use smtp     $mail->host = 'mail.metalink.co.za';  // specify main , backup smtp servers     $mail->smtpauth = true;                               // enable smtp authentication     $mail->username = 'info@website.com';                 // smtp username     $mail->password = 'pass';                           // smtp password     $mail->smtpsecure = 'tls';                            // enable tls encryption, `ssl` accepted     $mail->port = 25;                                    // tcp port connect      $mail->from = $email = $_post['email'];     $mail->fromname = $name = $_post['name'];     $mail->addaddress('info@website.com', 'website');     // add recipient     $mail->addreplyto($email = $_post['email']);      $mail->wordwrap = 50;                                 // set word wrap 50 characters     $mail->addattachment('/var/tmp/file.tar.gz');         // add attachments     $mail->addattachment('/tmp/image.jpg', 'new.jpg');    // optional name     $mail->ishtml(true);                                  // set email format html      $mail->subject = 'website response form';     $mail->altbody = 'to view message, please use html compatible email viewer!';     $mail->body =    "<span><p><strong>name - </strong> {$name} </p></span>                       <p><strong>company - </strong> {$company} </p>                       <p><strong>phone - </strong> {$phone} </p>                       <p><strong>email - </strong> {$email} </p>                       <p><strong>message - </strong> {$message} </p>";       if(!$mail->send()) {         echo '<span class="not-sent">invalid email</span>';         //echo 'mailer error: ' . $mail->errorinfo;     } else {         echo '<span class="sent">your message has been sent!</span>';     }     ?> 

you need generate response js can parse. simple example. should setting right content type , response code.

if(!$mail->send()) {     echo json_encode([         'success' => false,         'message' => "invalid email"     ]);     //echo 'mailer error: ' . $mail->errorinfo; } else {     echo json_encode([         'success' => true,         'message' => "your message has been sent!"     ]); } 

you should able parse response in js using callback method.

$('.form').ajaxform(function(callback) {      console.log(callback); });