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\');