Download
<link href="css/main.css" type="text/css" media="screen, projection" rel="stylesheet" /> <script type="text/javascript" src="js/jquery/jquery-1.3.2.js"></script> <script type="text/javascript"> $(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; }); }); </script> <div id="wrapper"> <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> <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>
<?php //post.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); ?>