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 the most of it cutting the boring time of .
You Can Download The Class From
http://www.jsclasses.org/package/26-JavaScript-Submit-Form-Data-asynchronously-.html
You need to include JQuery first , because the class is based on JQuery , you can download one from this link
http://docs.jquery.com/Downloading_jQuery
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"/>
<input type="hidden" id="hidden" name="hidden" value="hiddenVlaue"/>
<input type="password" id="password" name="password" value="passwordValue"/> <br>
<input type="checkbox" id="chbox1" name="chbox1" checked="checked"/>
<input type="checkbox" id="chbox2" name="chbox2" /> <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>
<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>
<textarea id="textarea">My Text Area</textarea> <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 do 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 it use “POST or GET”.
the next steps are optional , in case of 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 recieve the resutned text from the web page , and will be called after the request is completed
OnFailure Will recieve an object from the XML http Object , and will be called in case that any error happend
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
Listed in JavaScript