Hi all,
This is a very simple, powerful and useful Ajax code that lets you submit a form using Ajax and ‘post’ method.
lets start with the form.
The most important thing is to give an ID to the form and then call to a Javascript function on submit. We will have something like:
<form action=”add_client.php” method=”post” id=”add_client” name=”add_client” onsubmit=”post_form(‘add_client’); return false;”>
<input type=”text” name=”client_name” id=”client_name”>
<input type=”submit” value=”Add”>
</form>
So when you submit this form the script calls the post_form function and send the form’s id (in this case add_client).
Now on the Javascript we will use the zxml library
<script type=”text/javascript” src=”zxml.js”></script>
and we will create the function post_form:
function post_form(form_id){
var oForm = document.getElementById(form_id);
var sBody = getRequestBody(oForm);
var oXmlHttp = zXmlHttp.createRequest();
oXmlHttp.open(“post”, oForm.action, true);
oXmlHttp.setRequestHeader(“Content-Type”, “application/x-www-form-urlencoded”);
oXmlHttp.onreadystatechange = function () {
if (oXmlHttp.readyState == 4) {
if (oXmlHttp.status == 200) {
view(oXmlHttp.responseText,page_name,display_type,div_name,job_id,span_id);
}
else {
view(“An error occurred: ” + oXmlHttp.statusText);
}
}
};
oXmlHttp.send(sBody);
}
function getRequestBody(oForm) {
var aParams = new Array();
for (var i=0 ; i < oForm.elements.length; i++) {
var sParam = encodeURIComponent(oForm.elements[i].name);
sParam += “=”;
if(oForm.elements[i].checked){
sParam += “1″;
}
else {
sParam += encodeURIComponent(oForm.elements[i].value);
}
aParams.push(sParam);
}
//alert (aParams);
return aParams.join(“&”);
}
}
post_form calls to getRequestBody that gets all the form’s elements and send it back. Then post_form will submit the form to the action location (add_client.php) in the php file you should create a script that connect to the db gets the new client name from the form and insert it. Then you can generates a confirmation message on the php file (something like: echo “Client has been added”;)
Now the post_form gets back the php message and we need to decide what to do with it. Lets create a div where the message will be displayed
<div id=”messege”></dib>
Now post_form calls to the function view and sends the php’s messege to it. So function view will looke like:
function view(sText){
var el = document.getElementById(‘message’);
el.innerHTML = sText;
}
that’s it… you submitted a form and got the results on the same page. Easy 
