Question

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 Jquery ajax tutorial and below is my code. Please help me.

index.php

<div id="wrapper">
  <form action="" id="demoForm" method="post">
    <fieldset>
      <legend>Demo form</legend>
      <span style="font-size: 0.9em;">This ajax submit demo form.</span>
      <p>
        <label for="email">E-Mail:</label>
        <input type="text" name="email" id="email" value="" />
      </p>
      <p>
        <input type="submit" name="submit" id="submit" style="float: right; clear: both; margin-right: 3px;" value="Submit" />
      </p>
    </fieldset>
  </form>

  <div id="message" style="display: none;"> </div>
  <div id="waiting" style="display: none;"> Please wait<br />
    <img src="images/ajax-loader.gif" title="Loader" alt="Loader" /> 
  </div>

</div>
<script type="text/javascript" src="js/jquery/jquery-1.3.2.js"></script> 
<script type="text/javascript" src="js/ajaxSubmit.js"></script>

ajaxSubmit.php

$(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;
    });
});

post.php

<?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);
?>

Answer 1

Try this:

success : function(data){
    data = JSON.parse(data);
    $('#waiting').hide(500);
    $('#message').removeClass().addClass((data.error === true) ? 'error' : 'success')
        .text(data[0].msg).show(500);
    if (data[0].error === true)
        $('#demoForm').show(500);
},