Ajax Plus – Tips and tutorial for Ajax

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