Insert Record In Database Using jQuery And PHP

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.


Today I will tell you about calling a php script using jQuery’s 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 <code>class</code>
( <code>id</code> int(2) NOT NULL AUTO_INCREMENT,
<code>name</code> varchar(20) NOT NULL,
<code>password</code> varchar(50) NOT NULL,
PRIMARY KEY (<code>id</code>) );

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:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
alert("Enter first name");
return false;
} else
var fname = $('#fname').val();
alert("Enter Password");
return false;
var password = $('#passwd').val();
}"process.php", {
pass: password
},  function(data, textStatus){
if(data == 1){
$('#response').html("Registration successfull!!");
$('#response').html("Some Error Occurred");
<div id="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>

Code for process.php:

$connection = mysql_connect('localhost', 'root', '12345')
or die(&quot;Opps some thing went wrong&quot;);
$db = mysql_select_db('school', $connection)
or die(&quot;Opps some thing went wrong&quot;);
$name = $_POST['firstname'];
$password = $_POST['pass'];
$encrypted = md5($password); // Encrypting pssword using md5 algo
$query=mysql_query(&quot;INSERT INTO class(<code>name</code>,<code>password</code>)
echo &quot;1&quot;;
echo &quot;2&quot;;

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.

About sanjeev

Dreamer, Blogger and Thinker. I love to help people in solving their problems. You can also join me HERE

Related posts:

13 Responses so far.

  1. 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.

    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….

  3. how to upload image in database using jquery and php ?
    if u answer me i will be very greatful to you. thanks in advance.

Leave a Reply

Your email address will not be published. Required fields are marked *