submit form without refreshing page with jquery and ajax

Abhigyan Singh 13th Jul 2020

Sometimes you will need perform operations like insert or update record without refresh 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 it database and send user entered form data to another page which name is data.php using Ajax. After getting form data into data.php page we insert data into database without refreshing page. For running Ajax, you will need JQuery file which we include in index.php file contains html form with some jquery and ajax code.

This kind of features are 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 without refreshing the page.

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

1. Create file index.php with following code as shown below. In this file, we create simple form in which a user enters his/her information after that get all values of user in another page and save in 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 database and table to insert and save user data. Create database with any name what you want. In my case database name is user and table name is user_data. Run following command in phpmyadmin to create database as shown below:
CREATE DATABASE user
3. Now Run following command in phpmyadmin to create user table in 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 following code a shown below. This file get all user values and save it to 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 localhost or server and enter values and click on submit button then it will save your information in database and get alert message that user inserted successfully.

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

Authored By Abhigyan Singh

He is a continuous blogger and has blogged on different topic. He loves to surf Internet and always trying to get new Idea about new Technology and Innovations and sharing these great information to all the technology lovers.

ALSO ON DISCUSS DESK