Home

Insert Record Into Database Using Jquery

Submitted by newaction on Tue, 2011-11-15 17:26

So lets start this, first we need to setup a folder structure.
Make a folder and inside it, add three files,

  • index.php
  • data.php
  • ajax.gif

Now we will add basic html code into our index.php file

<body>

<div id="wrapper">
<input type="text" id="name" value="Your Name" />
<input type="button" value="Submit" onclick="addRecord()" />
<div id="propspectDiv"></div>
<table id="data" border="1" cellspacing="0" cellpadding="0" width="75" style="display:none;"></table>
</div>
 
</body>

Now comes the main AJAX code.

Inside your head tag, add the following code:

<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
 
function addRecord()
{
var term_name = $('#name').val();        //Storing the value of textbox into a variable
 
if(term_name == '')        //Checking for NULL
{
$('#propspectDiv').html('Enter A Valid Name');    //Prints the progress text into our Progress DIV
$('#name').addClass('error');                    //Adding the error class to the progress DIV
return;
}
else{
$('#name').removeClass('error');
$('#propspectDiv').removeClass('error'); //Removing the error class from the progress DIV
$('#propspectDiv').html('Submitting your Request.<img src="ajax.gif" />');//Prints the progress text into our Progress DIV
 
$.ajax({
url : 'data.php', //Declaration of file, in which we will send the data
data:{
"name" : term_name                //we are passing the name value in URL
},
success : function(data){
window.setTimeout(function(){
$('#propspectDiv').html('Your Name is added to our records'); //Prints the progress text into our Progress DIV
$('#data').css("display","block");  //Changes the style of table from display:none to display:block
$('#data').html(data);                //Prints the data into the table
}, 2000);
}
});
}
}
 

</script>

Explanation:

In our AJAX function first we are storing the value of textbox in a variable.
Then we check whether the variable is not passed NULLED, if condition is
satisfied, then it enters to a condition, where it adds some HTML code
into progress div.

Finally we call our AJAX function, where we pass the “name” value to
our file data.php through URL. data.php file echoes some values and
inserts name into our database.

We call this echoed values and display it in our table.

data.php code

<?php
$name = $_REQUEST['name'];
 
$con = mysql_connect("localhost","root","");
 
mysql_select_db("test", $con);
 
$sql = 'INSERT INTO `test`.`name` (`ID`, `Name`) VALUES (NULL,"'.$name.'")';
 
if (!mysql_query($sql,$con))
{
die('Error: ' . mysql_error());
}
else{
$sqlnew = 'SELECT * from name;';
$res = mysql_query($sqlnew);
echo '<tr><th>Name:</th></tr>';
while($row = mysql_fetch_array($res))
{
echo '<tr><td>'.$row['Name'].'</td></tr>';
}
}
 
mysql_close($con);
?>

Conclusion:
Here we are learning the basics of JQUERY AJAX, if you understand the
main concept and the flow of AJAX with PHP, then with the help of google
you can make many ajax driven programs.

Reference: http://webstutorial.com/insert-record-into-database-using-ajax-how-to-in...