By: Prem Tiwari | Last Updated: | In: Freebies, Javascript & Ajax, Web Technologies
Today I am sharing an important article “How to submit multiple forms with jQuery and Ajax”. Just think What be happen if the scenario include multiple forms and it should use the same jquery ajax submission part.
Have you faced the problem how you can submit multiple forms by using the jQuery ajax? We’ll I did, I’ve encountered this recently during developing a web application.
I have added two forms in below html example.
1 2 3 4 5 6 7 8 9 10 11 12 13 | <script type="text/javascript" src="jquery.js"></script> <form name="contact1" action="contact.php" method="POST" id="contact1"> <div>Name: <input type="text" name="name" id="name" required /></div> <div>Email: <input type="email" name="email" id="email" required /></div> <div><input type="submit" name="submit" value="Submit" /></div> </form> <form name="contact2" action="contact.php" method="POST" id="contact2"> <div>Name: <input type="text" name="name" required /></div> <div>Message: <input type="text" name="message" required /></div> <div><input type="submit" name="submit" value="Submit" /></div> </form> <div id="results"></div> |
Add below jQuery snippets before head tag closed.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <script type="text/javascript"> $(document).ready(function() { $("form").submit(function() { // Getting the form ID var formID = $(this).attr('id'); var formDetails = $('#'+formID); $.ajax({ type: "POST", url: 'contact.php', data: formDetails.serialize(), success: function (data) { // Inserting html into the result div $('#results').html(data); }, error: function(jqXHR, text, error){ // Displaying if there are any errors $('#result').html(error); } }); return false; }); }); </script> |
1 2 3 4 5 6 7 8 9 10 | <?php if(isset($_POST['email'])){ echo "Contact Form 1 Submitted Successfully"; } elseif (isset($_POST['message'])){ echo "Contact Form 2 Submitted Successfully"; } ?> |
.I hope this article will help you. If you like this article, do like & share it with your friends on social media. Don’t forget to follow us on Facebook and Twitter to learn cool tutorials.
Prem Tiwari is the founder of FreeWebMentor.com and also a professional developer who has vast experience in PHP and open source technologies. Apart from this, he is a blogger by hobby and also he has been a regular speaker of WordPress sessions in various IT Companies. View all posts by Prem Tiwari
Ajax, CSS, form multiple submit buttons, HTML 5, html form multiple submit, html form multiple submit buttons, html form with multiple submit buttons, javascript submit multiple forms, jquery submit multiple forms, multiple form submit, multiple submit buttons in a single form, php form multiple submit, Technology, Tip and tricks
