Insert Data in PHP using jQuery Post Method

By Tutor Joes

Posted on February 10, 2018 at 04:13 AM


In this tutorial, we will see step by step process that how we can insert Data in PHP using jQuery and then store the data into MySQL database.We will use the jQuery library for this purpose which has the complete inbuilt capabilities of the jQuery so we can view data post/insert data using jquery.



We are going to explain the working of Insert Data in PHP using jQuery script here. We have HTML form made using CSS. It contains the three inputs user name, user age and user e-mail id. We have made a database table named "record "with the same field names.A user will enter the details into the form and press save details button. Behind the scene, we have used JavaScript function in which we are using jQuery to send all this entered data to our server side script which is PHP.In the PHP file we wrote our script to save the values into the database and send back a success message response into the function argument and then we displayed the message into the user interface.

Step-1 : HTML Template


<html>
<head><title>Tutor Joes</title></head>
<body>
<h1>TUTOR JOES</h1>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<form id="frm">
<label>Name</label>
<input type="text" id="name">
<label>Age</label>
<input type="text" id="age">
<label>Mail</label>
<input type="text" id="mail"> 
<button type="button" id="save">Save Details</button>
</form>
</body>
</html>

Step-2 : jQuery Code


$("#save").click(function(){
var name=$("#name").val();
var age=$("#age").val();
var mail=$("#mail").val();
$.post("db.php",{na:name,ag:age,ma:mail},function(data){
alert(data);
$('#frm')[0].reset();
});
});

Step-3: Complete Source Page (index.php)


<html>
<head>
<title>Tutor Joes</title>
</head>
<body>
<h1>TUTOR JOES</h1>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="frm">
<label>Name</label>
<input type="text" id="name">
<label>Age</label>
<input type="text" id="age">
<label>Mail</label>
<input type="text" id="mail"> 
<button type="button" id="save">Save Details</button>
</form>
<script>
$("#save").click(function(){
var name=$("#name").val();
var age=$("#age").val();
var mail=$("#mail").val();
$.post("db.php",{na:name,ag:age,ma:mail},function(data){
alert(data);
$('#frm')[0].reset();
});
});
</script>
</body>
</html>

Step-4: Create Database Record


CREATE DATABASE IF NOT EXISTS record

Step-5: Create Table Save


CREATE TABLE IF NOT EXISTS save (
ID int(11) NOT NULL AUTO_INCREMENT,
NAME varchar(150) NOT NULL,
AGE int(11) NOT NULL,
MAIL varchar(150) NOT NULL,
PRIMARY KEY (ID)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=6 ;
INSERT INTO save (ID, NAME, AGE, MAIL) VALUES
(1, 'ram', 20, 'ram@gmail.com'),
(2, 'sam', 20, 'sam@gmail.com'),
(3, 'tom', 20, 'tom@gmail.com'),
(4, 'veena', 20, 'veena@gmail.com'),
(5, 'teena', 25, 'teena@gmail.com');

Step-4: PHP Code (db.php)


<?php
$con=new mysqli("localhost","root","","record");
$sql="INSERT INTO save(NAME,AGE,MAIL) VALUES ('{$_POST["na"]}','{$_POST["ag"]}','{$_POST["ma"]}')";
if($con->query($sql)){
echo "saved";
}
else{
echo "Error";
}
?>


We have learnt how to Insert Data in PHP using jQuery post method .So now you can easily store data in PHP using jquery by yourself just following these steps or you can download the source code of this insert data in PHP script .If you find this is informative, remember to share it on your social network. If you have any concerns/doubt regarding this tutorial you can comment below and let us know.Enjoy coding.

Leave a Comment:


Ram February 14, 2018 at 01:31 PM

Testing Comments

Blog Categories

Learn Now In Telugu

Viewers please visit our another youtube channel Tutor Joes Telugu for these videos in telugu.