JQuery Using Insert to Database

Download

Jquery

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$("#submit").click(function() {
var id_no = $("#id_no").val();
var emp_name = $("#emp_name").val();
var des = $("#des").val();
var email = $("#email").val();
var sal = $("#sal").val();
if(id_no=='' || emp_name=='' ){
alert("Please Enter field");
}
else {
$("#load").show();
$("#load").fadeIn(2000).html('Loading...');
$.ajax({
type: "POST",
url: "insert.php",
data: "id_no="+ id_no + "&emp_name=" + emp_name + "&des=" + des + "&email=" + email + "&sal=" + sal ,
success: function(html){
$("#display").after(html);
document.getElementById('id_no').value='';
document.getElementById('emp_name').value='';
document.getElementById('des').value='';
document.getElementById('email').value='';
document.getElementById('sal').value='';
$("#load").hide(); }

});
}
return false;
});
});
</script>

Style

<style type="text/css">
body{width:100%;font-family:"Trebuchet MS";margin:0;padding:0;
}
h2 a{text-decoration:none;}
#warp{width:500px;margin:0 auto;margin-top:30px;}
textarea{width: 490px;height:20px;}
.command{padding:5px;background:#ccc;margin-top:1px;}
</style>

Html

<div id="warp">
<h3 align="center">Enter The Employee Details</h3>
<form method="post" name="form" action="">
<p align="center">ID No&nbsp; <input name="" type="text" id="id_no" /></p>
<p align="center">Name&nbsp; <input name="" type="text" id="emp_name" /></p>
<p align="center">Des&nbsp;&nbsp;&nbsp;&nbsp; <input name="" type="text" id="des" /></p>
<p align="center">Email&nbsp; <input name="" type="text" id="email" /></p>
<p align="center">Salary&nbsp; <input name="" type="text" id="sal" /></p>
<p align="center"><input type="submit" name="submit" value="submit" id="submit" /></p>
</form>
<table border="1" cellpadding="0" cellspacing="0" align="center" width="500" style="color:#666;">
<tr><td>ID</td><td>Emp Name</td><td>Des</td><td>Email</td><td>Sal</td></tr>
<tr id="load"></tr>
<tr id="display"></tr>
</table>
</div>

insert.php

<?php
$db = mysql_connect('localhost','root','') or die ("Unable to connect to Database Server.");
mysql_select_db ('demo', $db) or die ("Could not select database.");

if(isset($_POST['id_no']))
{
$id_no=$_POST['id_no'];
$emp_name=$_POST['emp_name'];
$des=$_POST['des'];
$email=$_POST['email'];
$sal=$_POST['sal'];
$insert=mysql_query("insert into emp(id_no,emp_name,des,email,sal) values ('$id_no','$emp_name','$des','$email','$sal')");
}?>
<tr><td><?php echo $id_no; ?></td><td><?php echo $emp_name; ?></td><td><?php echo $des; ?></td><td><?php echo $email; ?></td><td><?php echo $sal; ?></td></tr>