title: Display data with jquery ajax without reloading page
body: <p>I found an ajax form script to display data without reloading the page. Everything is okay but I want to display variable values in a table when the form is submitted. Here is the link that I found <a href="http://www.php4every1.com/tutorials/jquery-ajax-tutorial/" rel="nofollow">Jquery ajax tutorial</a> and below is my code. Please help me.</p>
  
  <p>index.php</p>
  
  <pre><code>&lt;div id="wrapper"&gt;
    &lt;form action="" id="demoForm" method="post"&gt;
      &lt;fieldset&gt;
        &lt;legend&gt;Demo form&lt;/legend&gt;
        &lt;span style="font-size: 0.9em;"&gt;This ajax submit demo form.&lt;/span&gt;
        &lt;p&gt;
          &lt;label for="email"&gt;E-Mail:&lt;/label&gt;
          &lt;input type="text" name="email" id="email" value="" /&gt;
        &lt;/p&gt;
        &lt;p&gt;
          &lt;input type="submit" name="submit" id="submit" style="float: right; clear: both; margin-right: 3px;" value="Submit" /&gt;
        &lt;/p&gt;
      &lt;/fieldset&gt;
    &lt;/form&gt;
  
    &lt;div id="message" style="display: none;"&gt; &lt;/div&gt;
    &lt;div id="waiting" style="display: none;"&gt; Please wait&lt;br /&gt;
      &lt;img src="images/ajax-loader.gif" title="Loader" alt="Loader" /&gt; 
    &lt;/div&gt;
  
  &lt;/div&gt;
  &lt;script type="text/javascript" src="js/jquery/jquery-1.3.2.js"&gt;&lt;/script&gt; 
  &lt;script type="text/javascript" src="js/ajaxSubmit.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>ajaxSubmit.php</p>
  
  <pre><code>$(document).ready(function(){
      $('#submit').click(function() {
  
          $('#waiting').show(500);
          //$('#demoForm').hide(0);
          $('#message').hide(0);
  
          $.ajax({
              type : 'POST',
              url : 'post.php',
              dataType : 'json',
              data: {
                  email : $('#email').val()
              },
              success : function(data){
                  $('#waiting').hide(500);
                  $('#message').removeClass().addClass((data.error === true) ? 'error' : 'success')
                      .text(data.msg).show(500);
                  if (data.error === true)
                      $('#demoForm').show(500);
              },
              error : function(XMLHttpRequest, textStatus, errorThrown) {
                  $('#waiting').hide(500);
                  $('#message').removeClass().addClass('error')
                      .text('There was an error.').show(500);
                  $('#demoForm').show(500);
              }
          });
  
          return false;
      });
  });
  </code></pre>
  
  <p>post.php</p>
  
  <pre><code>&lt;?php
  sleep(3);
  
  if (empty($_POST['email'])) {
      $return['error'] = true;
      $return['msg'] = 'You did not enter you email.';
  }
  else {
      $return['error'] = false;
      $return['msg'] = 'You\'ve entered: ' . $_POST['email'] . '.';
  }
  
  echo json_encode($return);
  ?&gt;
  </code></pre>