Hi manilaGuy,
you could try this simplified ajax example:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>http://www.daniweb.com :: JavaScript / DHTML / AJAX</title>
<script type="text/javascript">
// <![CDATA[
var AJAX = ( function() {
var xmlRequest = {
XMLHttpRequest : new XMLHttpRequest(),
ActiveXObject : ( function() {
var xml;
var prodId = [ "MSXML2.XMLHTTP.5.0", "MSXML2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP", "Microsoft.XMLHTTP" ];
for ( var i = 0; i < prodId; i++ ) {
if ( xml = new ActiveXObject( prodId[ i ] )) {
break;
}
} return (( xml ) ? xml : 0 );
} )(),
createRequest : (( "createRequest" in window ) ? window.createRequest() : 0 )
}; for ( x in xmlRequest ) {
if ( x in window )
return xmlRequest[ x ];
} delete x;
} );
onload = ( function() {
var $ = ( function( ids ) {
return (( ids = document.getElementById( ids )) ? ids : ids = document.all[ ids ] ) || 0;
} );
var requestHandler = ( function() {
var checkId = this.id;
var name2 = $( "name" ).value;
var review2 = $( "review" ).value;
var stars2 = $( "stars" ).value;
var school = $( "school" ).value;
var stars;
for ( x = 0; $( "r" + x ); x++ ) {
if ( $( "r" + x ).checked ) {
stars = $( "r" + x ).value;
break;
}
}
var queryString = encodeURI((( checkId === "test" ) ? "?school=" + school + "&neverused=" + new Date().getTime() : "?name=" + name2 + "&school=" + school + "&stars=" + stars + "&review=" + review2 ) + "&" + Math.random() );
var xmlHttp = new AJAX();
(( xmlHttp.overrideMimeType ) ? xmlHttp.overrideMimeType("text/xml") : xmlHttp );
xmlHttp.onreadystatechange = ( function() {
if ( { 4 : 4, complete : 4 }[ this.readyState ] ) {
if ( this.status === 200 ) {
var ajaxDisplay = $("ajaxDiv");
ajaxDisplay.innerHTML = this.responseText;
}
}
} ); // [ STATE CHANGED ]
xmlHttp.open( "GET", String( "formProcessor.php" + queryString ), true );
xmlHttp.send( null );
return false;
} );
$( "test" ).onsubmit = requestHandler;
$( "form" ).onsubmit = requestHandler;
} );
// ]]>
</script>
</head>
<body>
<div id="main">
<form id="test" action="#">
<div>
<select id="school" name="school" size="1">
<option value="Casa Xelaju">Casa Xelaju</option>
<option value="Celas Maya">Celas Maya</option>
<option value="Hard Knock">Hard Knock</option>
<option value="Random School">Random School</option>
</select> <input type="submit" value="- submit -" />
</div>
</form>
<div id="ajaxDiv">Your result will be displayed here</div>
<form id="form" action="#">
<table id="table" frame="box" rules="all" border="5" cellpadding="5" cellspacing="5" summary="http://www.daniweb.com">
<tr><th>VALUE</th><th>INPUT TYPE</th></tr>
<tr>
<th>Name : </th>
<td><input type="text" id="name" name="name" maxlength="30" size="30" value=" [ name ]" /></td></tr>
<tr>
<th>Stars :</th>
<td><input type="radio" id="r0" name="stars" value="1" checked="checked" /> 1
<input type="radio" id="r1" name="stars" value="2" /> 2
<input type="radio" id="r2" name="stars" value="3" /> 3
<input type="radio" id="r3" name="stars" value="4" /> 4
<input type="radio" id="r4" name="stars" value="5" /> 5
</td>
</tr>
<tr style="vertical-align : top">
<th>Reviews</th>
<td>
<textarea id="review" name="review" cols="30" rows="10"> [ Enter Text ]</textarea></td></tr>
<tr>
<td colspan="2" style="text-align : right"><input type="submit" id="sbm2" name="sbm2" value="- submit -" /></td>
</tr>
</table>
</form>
</div>
</body>
</html>