Ajax Example
Screen shot
HTML Page

<html>
<head>
<title>How to Submit Value through Ajax</title>
<script language="javascript" src="ajax.js"></script>
</head>
<body>
<form action="javascript:sendvalue(document.getElementById('frm'));" name="frm" id="frm">
<table width="330" height="207" border="1" align="center" cellpadding="0" cellspacing="0" bgcolor="#F2F2F2">
<tr>
<td colspan="2" align="center">Enquiry Form <br>
<div name="txt" id="txt"></div>
</td>
</tr>
<tr>
<td width="100">Name</td>
<td width="224"><input id="name" type="text"/></td>
</tr>
<tr>
<td>Mobile</td>
<td><input id="mobile" type="text"/></td>
</tr>
<tr>
<td>Email</td>
<td><input id="email" type="text"/></td>
</tr>
<tr>
<td>Message</td>
<td><textarea id="message"></textarea></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><input type="submit" name="button" value="Submit"></td>
</tr>
</table>
</form>
</body>
</html>

Javascript Page (save as ajax.js)

<html>
<body>
<script type="text/javascript" language="javascript">
function sendvalue(obj)
{

var XMLHttpRequestObject=false;
if(window.XMLHttpRequest)
{
XMLHttpRequestObject=new XMLHttpRequest();
}
else if(window.ActiveXObject)
{
XMLHttpRequestObject=new ActiveXObject("Microsoft.XMLHTTP");
}

str1="name=" + document.getElementById("name").value;
str2="&mobile=" + document.getElementById("mobile").value;
str3="&email=" + document.getElementById("email").value;
str4="&message=" + document.getElementById("message").value;

XMLHttpRequestObject.onreadystatechange=function()
{
if (XMLHttpRequestObject.readyState==4 && XMLHttpRequestObject.status==200)
{
result = XMLHttpRequestObject.responseText;
document.getElementById('txt').innerHTML = result;
}
}

XMLHttpRequestObject.open('POST', 'value.php', true);
XMLHttpRequestObject.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
XMLHttpRequestObject.send(str1+str2+str3+str4);

document.getElementById("name").value="";
document.getElementById("mobile").value="";
document.getElementById("email").value="";
document.getElementById("message").value="";

}
</script>
</body>
</html>

PHP Page(save as value .php)

<?php

$con=mysql_connect('localhost','root','') or die('Mysql not connected');
mysql_select_db('test',$con) or die('DataBase not connected');

$name=mysql_real_escape_string($_POST['name']);
$mobile=mysql_real_escape_string($_POST['mobile']);
$email=mysql_real_escape_string($_POST['email']);
$message=mysql_real_escape_string($_POST['message']);

$query="insert into enquiry_form value('','$name','$mobile','$email','$message')";
mysql_query($query);
echo "Enquiry Successfully Post";

?>

DataBase

--
-- Database: `test`
--

-- --------------------------------------------------------

--
-- Table structure for table `enquiry_form`
--

CREATE TABLE IF NOT EXISTS `enquiry_form` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`name` char(100) COLLATE latin1_general_ci NOT NULL,
`mobile` bigint(11) NOT NULL,
`email` varchar(255) COLLATE latin1_general_ci NOT NULL,
`message` text COLLATE latin1_general_ci NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 COLLATE=latin1_general_ci AUTO_INCREMENT=3 ;

--
-- Dumping data for table `enquiry_form`
--


INSERT INTO `enquiry_form` (`id`, `name`, `mobile`, `email`, `message`) VALUES
(1, 'Tom', 9910137384, 'shishir.developer@gmail.com', 'This is test message'),
(2, 'Ravi', 9987871212, 'test@yahoo.com', 'This is my enquiry');