Web Developing using open source technologies: October 2010

when you are using AJAX in your web application , you do a lot of cool stuff but some parts of the application is totally boring like creating a form and get every eleement’s value in that form , create a new XMLHttpObject and handle 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 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

Wednesday, October 20, 2010

AjaxFormSubmitter