Submit a Form without Refreshing page with jQuery and Ajax

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. 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 name="user_form" method="post" action="#">
 <table border="1" align="center" cellspacing="5" cellpadding="5">
	<tr>
		<td>Name</td>
		<td><input type="text" name="name" id="name"></td>
	</tr>
	<tr>
		<td>Email</td>
		<td><input type="text" name="email" id="email"></td>
	</tr>
	<tr>
		<td>Password</td>
		<td><input type="password" name="password" id="password"></td>
	</tr>
	<tr>
		<td>Phone</td>
		<td><input type="text" name="phone" id="phone"></td>
	</tr>
	<tr>
		<td colspan="2" align="center"><input type="button" name="submit" value="Submit" onclick="submit_form();"></td>
	</tr>
 </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.

Share this Article on Social Media

All of my Scripts are ready to customized as per your requirement. Feel free to contact for script customization.

Contact me at discussdesk@gmail.com

"Note : It will be charged as per your customization requirement :)"

Get Updates, Scripts & Other Tutorials to Directly to your Email

Over 20000+ Happy Readers already subscribed. (We don't send spam email). Every email subscriber can get our latest updates and download our 100+ scripts.

Comments