When you are using AJAX in your web application, you do a lot of cool stuff but some parts of the application are totally boring like creating a form and getting every element’s value in that form, creating a new XMLHttpObject and handling the result.
So I created this class so that you can pass the form id, div id, or any HTML element that has a data you are interested in and send it asynchronously to a web page, imagine the line of codes and the time that you will save and most of it cutting off the boring time.
You can download the class from:
You need to include JQuery first, because the class is based on JQuery, you can download one from this link:
The Class is the file called “AjaxFormSubmitter”.
To use the class, follow this example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Test Ajax Form</title>
<Script src="jquery-1.3.2.min.js" type="text/javascript"></Script>
<Script src="AjaxFormSubmitter.js" type="text/javascript"></Script>
<script type="text/javascript">
function OnLoading ()
{
alert("I am loading");
}
function OnSuccess (data)
{
alert ("request completed " );
alert(data);
}
function OnError (XML)
{
alert(XML);
}
function SendData(){
var AjaxForm = new AjaxFormSubmitter("MyForm");
AjaxForm.SetURL("data.php");
AjaxForm.SetMethod("POST");
AjaxForm.SetOnSuccess(
function(data)
{
OnSuccess(data);
}
);
AjaxForm.SetOnFailure (
function (error)
{
OnError(error);
}
);
AjaxForm.SetOnLoading (
function (){
OnLoading();
}
)
AjaxForm.Submit();
}
</script>
</head>
<body>
<form id="MyForm" action="#" method="post" >
<input type="text" id="name" name="name" value="Text"/> <br>
<input type="hidden" id="hidden" name="hidden" value="hiddenVlaue"/><br>
<input type="password" id="password" name="password" value="passwordValue"/><br>
<input type="checkbox" id="chbox1" name="chbox1" checked="checked"/><br>
<input type="checkbox" id="chbox2" name="chbox2" /><br>
<br><br>
<input type="radio" id="radio1" name="choice" value="1" />
<input type="radio" id="radio2" name="choice" value="2"/>
<input type="radio" id="radio3" name="choice" value="3" checked="checked"/>
<input type="radio" id="radio4" name="choice" value="4"/>
<br><br>
<select id="Select" multiple="multiple">
<option value="option1">option one</option>
<option value="option2">option two</option>
<option value="option3">option three</option>
</select>
<br><br>
<textarea id="textarea">My Text Area</textarea>
<br><br>
<input type="button" value="Send Data" name="Send" onclick="SendData();"/>
</form>
</body>
</html>
In the example, you will find a function called “Send Data”. This is the function that does all the work.
var AjaxForm = new AjaxFormSubmitter("MyForm");
AjaxForm.SetURL("data.php");
AjaxForm.SetMethod("POST");
We created an object from the class and pass the Form id to the constructor, then we tell the class the url that will receive the data, and the method that will use “POST or GET”. The next steps are optional, in case you are not interested in handling the results.
AjaxForm.SetOnSuccess(
function(data)
{
OnSuccess(data);
}
);
AjaxForm.SetOnFailure (
function (error)
{
OnError(error);
}
);
AjaxForm.SetOnLoading (
function (){
OnLoading();
}
);
In the previous screen shot, you tell the class what to do in the following events: success, error, and loading.
OnSuccess will receive the returned text from the web page, and will be called after the request is completed.
OnFailure will receive an object from the XML http Object, and will be called in case any error happened.
OnLoading will be called before the data is sent.
What you have to do next is to call the submit function:
AjaxForm.Submit();
You have finished. I hope the class will be useful for you.
