title: how to get the response back to javascript from php using json?
body: <p><strong>THIS ISSUE HAS BEEN SOLVED</strong></p>
  
  <p><strong>THE BELOW CODE IS THE CORRECTED AND WORKING CODE</strong></p>
  
  <p>I have created a html form which sends certain variables to a php file and returns the success through json back to the javascript. But the problem is am not able to get any response back to the javascript file. I donno what is the reason. So can some help me with this. Thank you</p>
  
  <p>my form is</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"&gt;       &lt;/script&gt;
  &lt;script src="scriptj.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;form action="http://localhost/donotdel/process.php" method="POST"&gt;
      &lt;div id="name-group" class="form-group"&gt;
          &lt;label for="name"&gt;Name&lt;/label&gt;
          &lt;input type="text" class="form-control" name="name" placeholder="name"&gt;
      &lt;/div&gt;
      &lt;div id="email-group" class="form-group"&gt;
          &lt;label for="email"&gt;Email&lt;/label&gt;
          &lt;input type="text" class="form-control" name="email" placeholder="email"&gt;
      &lt;/div&gt;
      &lt;button type="submit" class="btn btn-success"&gt;Submit &lt;span class="fa fa-arrow-right"&gt;&lt;/span&gt;&lt;/button&gt;
    &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>my javascript file is</p>
  
  <pre><code>$(document).ready(function () {
      $('form').submit(function (event) {
          $('.form-group').removeClass('has-error');
          $('.help-block').remove();
          var formData = {
              'name': $('input[name=name]').val(),
              'email': $('input[name=email]').val(),
          };
          $.ajax({
              type: 'POST',
              url: 'http://localhost/donotdel/process.php',
              data: formData,
              dataType: 'json',
              encode: true
          }).done(function (data) {
              console.log(data);
              if (!data.success) {
                  if (data.errors.name) {
                      $('#name-group').addClass('has-error');
                      $('#name-group').append('&lt;div class="help-block"&gt;' + data.errors.name + '&lt;/div&gt;');
                  }
  
                  if (data.errors.email) {
                      $('#email-group').addClass('has-error');
                      $('#email-group').append('&lt;div class="help-block"&gt;' + data.errors.email + '&lt;/div&gt;');
                  }
              }
              else {
                  $('form').append('&lt;div class="alert alert-success"&gt;' + data.message + '&lt;/div&gt;');
              }
          }).fail(function (data) {
              console.log(data);
          });
          event.preventDefault();
      });
  });
  </code></pre>
  
  <p>and my php file is</p>
  
  <pre><code>&lt;?php
  
  $errors         = array();      
  $data           = array(); 
  
  if (empty($_POST['name']))
      $errors['name'] = 'Name is required.';
  
  if (empty($_POST['email']))
      $errors['email'] = 'Email is required.';
  
  if ( ! empty($errors)) {
      $data['success'] = false;
      $data['errors']  = $errors;
  } else {
      $data['success'] = true;
      $data['message'] = 'Success!';
  }
  header ('Content-Type: application/json');
  header("Access-Control-Allow-Origin: *");
  echo json_encode($data);
  ?&gt;
  </code></pre>
  
  <p>the error that i am getting is instead of passing the json to javascript file, the json is printed in the screen. But whereas i need the javascript to show an alert.</p>