[Web-development (jquery)] Jquery Ajax Submit

Jquery Ajax Submit

Download

<link href="css/main.css" type="text/css" media="screen, projection" /> <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> <div> </div> <div> Please wait<br /> <img src="images/ajax-loader.gif" /> </div> <form action="" method="post"> <fieldset> <legend>Demo form</legend> <span>This ajax submit demo form.</span> <p> <label for="email">E-Mail:</label> <input type="text" name="email" value="" /> </p> <p> <input type="submit" name="submit" 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); ?> 

Posted by Unknown