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

For beginners this could be helpful - How to get the value of each element in your page using Javascript?

Lets say you have <div id=”newid”></div>

use this:

var element_value = document.getElementById(&quot;newid&quot;).value;

Hope it helps!

Lets say you have a field that you want to update the db every time someone insert info there without refreshing the page or going to another page.

So the html will look like:
[code]

<input type=”text” name=”field1″ id=”field1″ onchange=”update_field()”>

[/code]

This is very basic input type.
Now to the javascript:

first we need to call to the ajax libary:
[code]<script type=”text/javascript” src=”zxml.js”></script>[/code]

now we will create the update_field() function:

[code]function update_field(){
var field1 = document.getElementById(”field1″);
var Str = “update.php?field=” + field1;
var oXmlHttp = zXmlHttp.createRequest();
oXmlHttp.open(”get”, Str , true);
oXmlHttp.onreadystatechange = function () {

if (oXmlHttp.readyState == 4) {
if (oXmlHttp.status == 200) {
save_info(oXmlHttp.responseText);
} else {
save_info(”An error occurred: ” + oXmlHttp.statusText); //statusText is not always accurate
}
}
oXmlHttp.send(null);

}[/code]

on this function we send the value of the field to a php file. On update.php we will update the the db with some php code:

[code]
$sql = “update tbl_field set field=$field”;
[/code]

Now the php return a message we need to take it and dispaly it on a div. First we will create a div on the body section:

[code]<div id=”php_message”></div>[/code]

then we will create a function save_info that we are calling it from update_field() after the php sent 400 code status (meaning everthing is ok)

[code]
function save_info(sText) {
var php_message = document.getElementById(”php_message”);
php_message.innerHTML = sText;}
[/code]

and that’s it! easy!

zxml.js

Enjoy…

The aim of this blog is to help you develop a better ajax applications. If you need general help or you have problems with Javascript or css this is the place to ask. I am sure you will learn to love ajax as much as I do…

Enjoy the blog!