I have already posted about inserting any record in database using PHP in my “Registration Page Using PHP” Tutorial. It’s good to insert data using PHP but its better if you add little jQuery in your Code, it makes the whole process faster and the load on your webpage decreases.
Check LIVE DEMO
Today I will tell you about calling a php script using jQuery’s jQuery.post() or $.post() function. This time we’ll be using same old database “school” with the table “class” in it. This time registration page will use jQuery to submit data into database. You will feel the difference yourself. CLASS table has three columns : ‘ID’,’NAME’ and ‘PASSWORD’.
SQL command to create CLASS table is:
CREATE TABLE IF NOT EXISTS `class` ( `id` int(2) NOT NULL AUTO_INCREMENT, `name` varchar(20) NOT NULL, `password` varchar(50) NOT NULL, PRIMARY KEY (`id`) );
We have two files one with jQuery and HTML code (index.html) and another file with PHP script (process.php) to insert record in database.
NOTE: For using jQuery within your webpage you need to have jQuery library to interpret and execute your jQuery. You can use either remotely link to Google hosted jQuery or you can use self hosted jQuery.js file.
Here is the code for index.html file:
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$('document').ready(function(){
$('#button').click(function(){
if($('#fname').val()==""){
alert("Enter first name");
return false;
} else
{
var fname = $('#fname').val();
}
if($('#passwd').val()==""){
alert("Enter Password");
return false;
}else
{
var password = $('#passwd').val();
}
jQuery.post("process.php", {
firstname:fname,
pass: password
}, function(data, textStatus){
if(data == 1){
$('#response').html("Registration successfull!!");
$('#response').css('color','green');
}else{
$('#response').html("Some Error Occurred");
$('#response').css('color','red');
}
});
});
});
</script>
</head>
<body>
<div id="form">
<form>
<label>Name :</label>
<input type="text" id="fname" />
<br />
<br />
<label>Password :</label>
<input type="password" id="passwd" />
<br /><br/>
<input type="button" id="button" value="Insert" /><br />
<label id="response"></label>
</form>
</div>
</body>
</html>
Code for process.php:
<?php
$connection = mysql_connect('localhost', 'root', '12345')
or die("Opps some thing went wrong");
$db = mysql_select_db('school', $connection)
or die("Opps some thing went wrong");
$name = $_POST['firstname'];
$password = $_POST['pass'];
$encrypted = md5($password); // Encrypting pssword using md5 algo
$query=mysql_query("INSERT INTO class(`name`,`password`)
VALUES('$name','$encrypted')");
if(mysql_affected_rows()>0){
echo "1";
}else{
echo "2";
}
?>
You will feel the power of jQuery after checking the LIVE DEMO. It helps you to avoid loading of complete page and waiting for server to respond through a new web-page. I will keep posting in this series about how to view, update, delete data from database using jQuery and PHP. If you have any question feel free to ask and send me an email to get this script.
Comments
13 responses to “Insert Record In Database Using jQuery And PHP”
[…] can use my tutorial on inserting record in database using jQuery and php and combine it with this tutorial to create a wonderful dynamic form accepting inputs from user and […]
[…] have seen how we can Insert record into database using jQuery. It really reduces the amount of data transferred to server and saves page loading time. Today I […]
[…] tables AUTOMATICALLY. Now you would be thinking why I had to do this? When I created LIVE DEMO of Inserting records into table using jQuery & PHP I felt that after some time my database would be flooded with records that are just ‘useless’. […]
[…] guys, if you have seen my older posts then you already know how to insert record in database using jQuery. I also explained the process to fetch record from database using jQuery. The left part is how to […]
Hi,
If i want to insert image with this code what should i do?
HI Sanjeev,
The entire php code is returned as response from php and the php is not getting parsed.However when I access the php code directly, the php is getting executed.
Please help.
Hi Ranjith,
Please recheck your process.php and if possible paste it here.
Regards:
Sanjeev
Thank you very much for this amazing code
[…] I have written tutorials on Insert data using jQuery and PHP without refreshing the page. In that tutorial we were submitting form by creating data string and then sending it to PHP using […]
HEEEEEYYYYYYYYYYYY !!!!!!! I LOVE YOU !!!!!
You solved my problem. I was trying to create an ajax file upload using jquery and php. By readying your this article, I problem solved.
Thank you so much….
how to upload image in database using jquery and php ?
if u answer me i will be very greatful to you. thanks in advance.
Thnx
Dear sir please help me i am new in php please send me crud operation using ajax j query php