Insert data in database without refreshing page using Ajax and PHP beginner guide

In this tutorial we will learn how to Insert data in database without refreshing page using Ajax and PHP beginner guide. Ajax is used to send and select the data from the database without refreshing the whole page. In this tutorial we will use a simple form to send the data into the database.

First create a table

CREATE TABLE IF NOT EXISTS `tasks` (
 `id` int(10) NOT NULL AUTO_INCREMENT,
 `name` varchar(50) NOT NULL,
 `email` varchar(100) NOT NULL,
 `contact` int(12) NOT NULL,
 `address` varchar(100) NOT NULL,
 PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=2 ;

Now create a file name index.php and copy and paste the below code. Add the google jQuery CDN on the top of the page. We need to some changes in the form remove the  method and action part from the form because we will use ajax for that and change the input type submit to input type button that is very important to prevent page refresh. Now make a function inside the script tag and run that function onclick event. Here is the code. Write this code in your index.php file.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
	<script>
	function sendData()
	{
		var data = new FormData($('#myFOrm')[0]);//this will select all the form data in the data variable.
 
		$.ajax({
			type:"POST",
			url:"insert.php",
			data:data,
			contentType: false,
            cache: false,
            processData: false,
			success:function(dta)
			{
				alert(dta);
			}
 
		});
	}
 
	</script>
 
<div>
<form id="myFOrm">
	Name:<br><input type="text" name = "name" ><br>
	Email:<br><input type="text" name = "email" ><br>
	Contact:<br><input type="text" name = "contact" ><br>
	Address:<br><input type="text" name = "address" ><br><br>
	<input type="button" onclick = "sendData()" name="submit" value="submit">
</form>
</div>

In the above code var data = new FormData($(‘#myFOrm’)[0]); will get all the form value in the variable data.  Inside the Ajax function we will write the type to POST the data and give the URL of the php file where we will write the code to insert the data in the database. Create a file name insert.php and copy and paste the below code.

<?php
 
	$servername = "localhost";
	$username = "root";
	$password = "";
	$database = "hrm";
 
// Create connection
	$conn = new mysqli($servername, $username, $password, $database);
 
	if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
	} 
 
 
		$name = $_POST['name'];
		$email = $_POST['email'];
		$contact = $_POST['contact'];
		$address = $_POST['address'];
 
 
	$sql = "INSERT INTO tasks (name, email, contact, address)
			VALUES ('".$name."', '".$email."', '".$contact."', '".$address."')";
 
	if ($conn->query($sql) === TRUE)
	{
		echo "New record created successfully";
	} else {
    echo "Error: " . $sql . "<br>" . $conn->error;
	}
	$conn->close();
 
?>

Now run the URL http://localhost/php/ and add some value and click on the submit button.

You will see a alert success message like below: and the page will not refresh

insert data without page refresh in php

Check your database you will see the inserted value.

Hope this tutorial Insert data in database without refreshing page using Ajax and PHP beginner guide will help you.

Note: this code is just for learning purpose and this is not secure for live site use.

Read this article also: How to insert and select data in php and mysql beginner guide