In this tutorial, learn how to submit form using jQuery post data without page refresh. Get form data without page refresh and use jQuery to submit the form. jQuery form submit requires jQuery submit() to submit the form on click of the button.
You can also get the values of the user input data in the alert without a page refresh using jQuery. Style the form using little bit CSS as you can see in the example. Get all the user input data in the alert box or in the div element to show the data in the frontend after form submission.
Submit Form Using jQuery Post Data Without Page Refresh
The example contains the style, jQuery and HTML form tag to include the form. You can use the jQuery click event to submit form using jQuery on click of the button. Use the alert function to get the user input data in the alert message box.
Example to create submit form using jQuery
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<style> #Myform{ width: 300px; border: 1px solid #ccc; padding: 14px; background: #ececec; } </style> <script> $(document).ready(function() { $("#mysubmit").click(function() { $("#Myform").submit(); // Form submission. var name = $("#Name").val(); var email = $("#Email").val(); alert("Name : " + name + "\nEmail : " + email); }); }); </script> <div class="MainForm"> <form method="post" id="Myform"> <label>Enter Name</label> <input type="text" id="Name" name="Name"><br> <label>Enter Email</label> <input type="text" id="Email" name="Email"><br> <input type="submit" id="mysubmit" name="submit" value="Submit" class="btn btn-primary"/> </form> </div> |
Output
The above example contains the form with two input fields and a button for form submission. I am using atrributetype="text" for both the input. However, you can use email type for email input text box.
Fill the form given above and click the submit button. The jQuery submit() first submit the form and after that, it gets the user input data using the jQuery val(). You can see the entered data by the user in the alert message box.
You may also like.
- Ajax submit the form using jQuery and PHP
- Display form on button click using jQuery
- Fade in and fade out div on hover using jQuery
THE ULTIMATE TOOLKIT
Get FREE Access to Toolkit and Resources that we are using in Tutorialdeep that Every Professional Should Have! in one handy PDF.
Get the PDF