title: How to print success message in the client page from the server side using Jquery Ajax
body: <p>I'm using jQuery Ajax to post the data and display the success message accordingly.
  Below is the code :</p>
  
  <p><strong>Javascript</strong>  </p>
  
  <p></p>
  
  <pre><code>  &lt;script type="text/javascript" 
     src="http://code.jquery.com/jquery-1.3.2.min.js"&gt;
  &lt;/script&gt;
          &lt;script&gt;
              $(document).ready(function() {
                  $('form').submit(function(event) { //Trigger on form submit
                      $('#name + .throw_error').empty(); //Clear the messages first
                      $('#success').empty();
  
                      var postForm = { //Fetch form data
                          "name": $("#name").val(),
                          "element_4_1": $("#element_4_1").val(),
                          "element_4_2": $("#element_4_2").val(),
                          "element_4_3": $("#element_4_3").val(),
                          "email": $("#email").val(),
                          "input4": $("#input4").val(),
                      };
  
                      $.ajax({ //Process the form using $.ajax()
                          type        : 'POST', //Method type
                          url         : 'contact.php', //Your form processing file url
                          data        : postForm, //Forms name
                          dataType    : 'json',
                          success     : function(data) {
  console.log("inside success3") ;
  $("#stage").text(data);alert(data);
  
                          if (!data.success) { //If fails
                              if (data.errors) { //Returned if any error from process.php
                                  $('.throw_error').fadeIn(1000).html(data.errors); //Throw relevant error
                                                           console.log("inside failure") ;
                              }
                          } else {
                                                          console.log("inside success") ;
                                  $('#stage').fadeIn(1000).append('&lt;p&gt;' + data.posted + '&lt;/p&gt;'); 
  console.log("inside success2") ;
                              }
                          }
                      });
                      event.preventDefault(); //Prevent the default submit
                  });
              });
          &lt;/script&gt;
  </code></pre>
  
  <p><strong>HTML</strong><br>
  </p>
  
  <pre><code>&lt;form class="contact-form" method="post"&gt;
  
  
                          &lt;h4 style="padding-top:8px;"&gt;Your email address will not be published. Required fields are marked &lt;font color="red"&gt;*&lt;/font&gt;&lt;/h4&gt;
                              &lt;label&gt;Name&lt;font color="red"&gt;*&lt;/font&gt;&lt;/label&gt;&lt;br&gt;
                              &lt;input class="form-control" style="height:35px;width:230px;border-radius:4px;" required type="text" name="name" id="name"/&gt;&lt;br&gt;
                              &lt;label&gt;Phone&lt;font color="red"&gt;*&lt;/font&gt;&lt;/label&gt;&lt;br&gt;
  
  
          &lt;span&gt;
  
              &lt;input id="element_4_1" name="element_4_1" class="element text" size="3" maxlength="3" value=""  type="text"&gt; -
  
          &lt;/span&gt;
          &lt;span&gt;
              &lt;input id="element_4_2" name="element_4_2" class="element text" size="4" maxlength="4" value="" type="text"&gt; -
  
          &lt;/span&gt;
          &lt;span&gt;
              &lt;input id="element_4_3" name="element_4_3" class="element text" size="10" maxlength="10" value=""  type="text" required &gt;
  
          &lt;/span&gt;
  
  &lt;br&gt;&lt;br&gt;
                              &lt;label&gt;Email&lt;font color="red"&gt;*&lt;/font&gt;&lt;/label&gt;&lt;br&gt;
                              &lt;input id="email" class="form-control" style="height:35px;width:230px;border-radius:4px;" required type="email" name="text"/&gt;&lt;br&gt;
                              &lt;label for="input4"&gt;Message&lt;/label&gt;
                              &lt;textarea name="contact_message" class="form-control" rows="4" id="input4"&gt;&lt;/textarea&gt;
                              &lt;p&gt;&amp;nbsp;&lt;/p&gt;
                              &lt;button type="submit" style="margin-left:65px;"class="btn btn-large btn-info" id="button"&gt;Submit&lt;/button&gt;
  &lt;/form&gt;  
  </code></pre>
  
  <p><strong>PHP Server Side</strong>
  </p>
  
  <pre><code>&lt;?php
  
  ini_set('display_errors','On');
   error_reporting(E_ALL);
  $errors = array(); 
      $form_data = array(); 
  header('Content-type: application/json');
      echo json_encode($form_data);
  
  $name=$_POST['name'];
  $phone=chop($_POST['element_4_1']);
  $phone.=chop($_POST['element_4_2']);
  $phone.=chop($_POST['element_4_3']);
  $email=chop($_POST['email']);
  $message1=chop($_POST['input4']);
  
  if ($name &amp;&amp; $phone &amp;&amp; $email) { 
  
  $headers  = "MIME-Version: 1.0\r\n";
  $headers .= "Content-type: text/plain; charset=iso-8859-1\r\n";
  $headers .= "From: sales@test.com \n";
  $recipient= "test@test.in";
  
  
  
  $subject="Online Enquiry   ";
  
  
  $message="\nName                   : $name\n";
  
   $message.="\nPhone                  : $phone\n";
  
   $message.="\nEmail ID               : $email\n";
  
   $message.="\nMessage                : $message1\n";
  
  
   //send auto-reply
  $subject_reply="Thank you for contacting us";
  $message_reply="Thank you for contacting us. We will get back to you shortly.";
  //mail($email, $subject_reply, $message_reply, $headers);
  
  
  
   //Send Mail
  //===========
  if(isset($recipient, $subject, $message, $headers)) {
  error_log($message);
      $form_data['status'] = 'success';
  error_log($form_data['status']);
  
  } else {
      $form_data['status'] = 'error';
  error_log($form_data['status']);
  
  } 
  }
  
  ?&gt;
  </code></pre>
  
  <p>Now everything works fine, but I'm not able to send the success message from the server side to client side. How can I get the success message displayed in the client page. In the client side javascript when I print data in alert box I see an empty box. How can I pass the data variable from server side to client side.</p>