submit form without refreshing page with jquery and ajax

Sometimes you will need to perform submit form operations like insert or update a record without refresh the page. It can be done by JQuery and Ajax in PHP Language. Firstly, we create a simple Html Form after that we will connect to its database and send user-entered form data to another page which name is data.php using Ajax. After getting form data into the data.php page we insert data into the database without refreshing the page. For running Ajax, you will need a JQuery file which we include in the index.php file contains an HTML form with some jquery and ajax code.

This kind of feature is very necessary where we don't need our users to redirect from the current page. We have also created an article to upload multiple images and resize using Ajax which means submit form without refreshing the page.

Here we are going to tell you all the thing step by step as follows:

1. Create file index.php with the following code as shown below. In this file, we create a simple form in which a user enters his/her information after that gets all values of a user on another page and save in the database.

<form action="#" method="post" name="user_form">
<table border="1" cellspacing="5" cellpadding="5" align="center">
<tbody>
<tr>
<td>Name</td>
<td><input id="name" name="name" type="text" /></td>
</tr>
<tr>
<td>Email</td>
<td><input id="email" name="email" type="text" /></td>
</tr>
<tr>
<td>Password</td>
<td><input id="password" name="password" type="password" /></td>
</tr>
<tr>
<td>Phone</td>
<td><input id="phone" name="phone" type="text" /></td>
</tr>
<tr>
<td colspan="2" align="center"><input name="submit" type="button" value="Submit" /></td>
</tr>
</tbody>
</table>
</form><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
function submit_form()
{
var name = $("#name").val();
var email = $("#email").val();
var password = $("#password").val();
var phone = $("#phone").val();
$.ajax({
type: "POST",
url: "data.php",
data: "name="+name+"&email="+email+"&password="+password+"&phone="+phone,
success: function(response)
{
alert(response);
}
});

}

</script>

2. Now we need to create a database and table to insert and save user data. Create a database with any name that you want. In my case the database name is user and the table name is user_data. Run the following command in PHPMyAdmin to create a database as shown below:
CREATE DATABASE user
3. Now Run the following command in PHPMyAdmin to create a user table in the user database as shown below:

CREATE TABLE `user_data` (
`id` int(10) NOT NULL,
`name` varchar(15) NOT NULL,
`email` varchar(20) NOT NULL,
`password` varchar(20) NOT NULL,
`phone` int(11) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

4. Create another file data.php with the following code shown below. This file gets all user values and saves it to the user table.

<?php

$link = mysqli_connect("localhost", "root", "", "user");

/* check connection */

if (mysqli_connect_errno()) {

printf("Connect failed: %s\n", mysqli_connect_error());

exit();

}

$name = $_POST['name'];

$email = $_POST['email'];

$password = $_POST['password'];

$phone = $_POST['phone'];

if (mysqli_query($link, "insert into user_data set name='".$name."',email='".$email."',password='".$password."',phone='".$phone."'") === TRUE) {

echo "User Inserted Successfully";

} ?>

Run your index.php file on the localhost or server and enter values and click on the submit button then it will save your information in the database and get an alert message that the user inserted successfully.

You can view our live demo of this article from the above demo link and can download the live working code from our repository. If you have any questions regarding this article, please let us know in the comment section.