Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html> <head> <title>jQuery post form data using .post() method by codeofaninja.com</title> <style> div { margin: 15px; } </style> </head> <body> <h1>jQuery post form data using .post() method</h1> <div>Filling out and submitting the form below to receive a response.</div> <!-- our form --> <form id="userForm" action="/form/submit" method="post"> <div> <input type="text" name="firstname" placeholder="Firstname" /> </div> <div> <input type="text" name="lastname" placeholder="Lastname" /> </div> <div> <input type="email" name="email" placeholder="Email" /> </div> <div> <input type="submit" value="Submit" /> </div> </form> <!-- where the response will be shown --> <div id="response"></div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js "></script> <script> $(document).ready(function() { $('#userForm').submit(function() { // showing that something is loading $('#response').html("<b>Loading response...</b>"); /* * 'post_receiver.php' - where you will be passing the form data * $(this).serialize() - for reading form data quickly * function(data){... - data includes the response from post_receiver.php */ $.post('post_receiver.php', $(this).serialize(), function(data) { // demonstrate the response $('#response').html(data); }).fail(function() { //if posting your form fails alert("Posting failed."); }); // to restrain from refreshing the whole page, the page returns false; }); }); </script> </body> </html>