HTML Form Submit with AJAX /GET
This example demonstrates a simple AJAX javascript for sending a complete HTML form to the server and displaying the response. The javascript automatically gets all form elements - the server-response is displayed in a "div" - the server-side script is a simple PHP script to display the contents of the $_GET global variable.
Server-Response:
index.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://www.navioo.com//DOMReference/content/prototype.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Navioo.com</title>
</head>
<body>
<script type="text/javascript" language="javascript">
var http_request = false;
function makeRequest(url, parameters) {
http_request = false;
if (window.XMLHttpRequest) { // Mozilla, Safari,...
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {
// set type accordingly to anticipated content type
//http_request.overrideMimeType('text/xml');
http_request.overrideMimeType('text/html');
}
} else if (window.ActiveXObject) { // IE
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!http_request) {
alert('Cannot create XMLHTTP instance');
return false;
}
http_request.onreadystatechange = bindContents;
http_request.open('GET', url + parameters, true);
http_request.send(null);
}
function bindContents() {
if (http_request.readyState == 4) {
if (http_request.status == 200) {
//alert(http_request.responseText);
myresult = http_request.responseText;
document.getElementById('responseServer').innerHTML = myresult;
} else {
alert('There was a problem with the request.');
}
}
}
function sendRequest(obj) {
var arrStr=new Array();
arrStr.push("?");
for (i=0; i<obj.childNodes.length; i++) {
if (obj.childNodes[i].tagName == "INPUT") {
if (obj.childNodes[i].type == "text") {
arrStr.push( obj.childNodes[i].name + "=" + obj.childNodes[i].value + "&");
}
if (obj.childNodes[i].type == "checkbox") {
if (obj.childNodes[i].checked) {
arrStr.push(obj.childNodes[i].name + "=" + obj.childNodes[i].value + "&");
} else {
arrStr.push( obj.childNodes[i].name + "=&");
}
}
if (obj.childNodes[i].type == "radio") {
if (obj.childNodes[i].checked) {
arrStr.push( obj.childNodes[i].name + "=" + obj.childNodes[i].value + "&");
}
}
}
if (obj.childNodes[i].tagName == "SELECT") {
var sel = obj.childNodes[i];
arrStr.push( sel.name + "=" + sel.options[sel.selectedIndex].value + "&");
}
}
makeRequest('getServer.php', arrStr.join());
}
</script>
<form action="" onsubmit="return false" name="myform" id="myform">
<input type="text" name="myfield" value="your string">
<select name="myselect">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<br>
First Name <input type="text" name="first_name" value=""><br>
Last Name <input type="text" name="last_name" value=""><br>
<input type="radio" name="myradio" value="Tom" checked> Tom
<input type="radio" name="myradio" value="Mike"> Mike<br>
<input type="checkbox" name="my_check1" value="Maria"> Maria
<input type="checkbox" name="my_check2" value="Laura"> Laura
<input type="checkbox" name="my_check3" value="John"> John
<input type="checkbox" name="my_check4" value="Ana"> Ana
<input type="checkbox" name="mycheck5" value="5"> 5
<br>
<input type="button" name="button" value="Submit"
onclick="sendRequest(document.myform);" />
</form>
</body>
</html>
Server-Response:
<div name="responseServer" id="responseServer"></div>
getServer.php
Array ( )
