In this article we have explained how to submit a form without page refresh using jQuery Ajax. This feature can enhance user experience on your web application.
Its just communicate with server and update the parts of website without reloading the whole page.
Learn how to create a Multi Step Form with jQuery validation.
So let’s get started with step by step process.
Submit HTML form Without Page Refreshing the Page
1. Create HTML Form
First you have to create a HTML form to get the values from web page. For example we have created a simple html form to save username and password in database table. You can use below html code for that.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<html> <head> <link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'> <meta charset="UTF-8"> <title>Submit Form Without Page Refresh Using jQuery, Ajax and PHP - codefixup.com</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="submit.js"></script> </head> <body> <div> <form method="post" action="" name="loginform"> <input type="text" placeholder="Username" id="username" name="username" /> <input type="password" placeholder="Password" id="password" name="password" /> <button type="button" onClick="submitdata();">Submit</button> <button id="reset" type="reset">Reset</button> </form> </div> </body> </html> |
2. Write jQuery Ajax Form Post Code:
Now write the jQuery jax script code to get HTML form data and send it to the database table. See below code for this:
|
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 |
<script> function submitdata() { var username = document.getElementById("username").value; var password = document.getElementById("password").value; var dataString = 'username=' + username + '&password=' + password; if (username == '' || password == '') { alert("Please Fill All Fields"); } else { // AJAX code to submit form. $.ajax({ type: "POST", url: "datasubmit.php", data: dataString, cache: false, success: function(html) { alert(html); } }); } return false; } </script> |
3. Save Data in Database Table:
Now create a “datasubmit.php” file to handle form post data and do the Database related task.
Note – Just include the database configuration file in it.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<?php include('dbconfig.php'); $username = $_POST['username']; $password = $_POST['password']; if (isset($_POST['username'])) { $query = mysqli_query($dbconfig,"insert into user(username, password) values ('$username', '$password')"); echo "Form Submitted succesfully"; } ?> |
Now when user submit the this form, than username and password value store in database table without refreshing the whole page.
Follow above code to implement submit form without page refresh using jquery on your website. Thanks
Hi Harish, I like your tutorial, it is very simple and easy to understand. I also wrote a tutorial about submit form without refresh page. I hope you will like it also. https://www.allphptricks.com/submit-form-without-page-refresh-using-ajax-jquery-and-php/