Home arrow XML arrow Page 6 - XML in the Browser: Submitting forms using AJAX
XML

XML in the Browser: Submitting forms using AJAX


One of the least user friendly features of most websites is forms. The longer the form, the more annoying it gets. However, a new technology called AJAX (that has nothing to do with household cleansers!) can help.

Author Info:
By: Chris Root
Rating: 4 stars4 stars4 stars4 stars4 stars / 211
April 25, 2005
TABLE OF CONTENTS:
  1. · XML in the Browser: Submitting forms using AJAX
  2. · What's Out There Now
  3. · The XML in HTTPRequest
  4. · HTTP Methods
  5. · Using POST
  6. · Submitting a Form

print this article
SEARCH DEVARTICLES

XML in the Browser: Submitting forms using AJAX - Submitting a Form
(Page 6 of 6 )

 

Normally forms don't need any additional code to submit information, aside from any validation code that you choose to use. In this case, however, we will need to write some code to gather information from the form, and possibly from other areas of the application, to put into the proper format. One advantage this has over normal form submission is that you can include information that is not part of the form. No hidden form fields are necessary to make this work.

 

As an example, let's take a simple form to allow a user to request a product catalog by mail (you remember mail: paper, stamps, etc.).

 

 

The submission can start out at the click of a button or link. The button should be a normal form button rather than a submit button because in this situation we aren't using the browser's built in form submission. When the user clicks on the form button, the "sub" function is called, which begins the processing of the information and submits it to the server.

 

var xmlReq = null;;

function sub(f)

{

   var file = 'testPost.php'

   var str = getFormValues(f,"validate");

   xmlReq = getXML(file,str);

}

function getXML(file,str)

{

   var doc = null

   if (typeof window.ActiveXObject != 'undefined' )

   {

       doc = new ActiveXObject("Microsoft.XMLHTTP");

       doc.onreadystatechange = displayState;

   }

   else

   {

       doc = new XMLHttpRequest();

       doc.onload = displayState;

   }

   doc.open( "POST", file, true );

   doc.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=UTF-8");

   doc.send(str);

   return doc;

}

 

The HTML for the form is simple. There is no need to set any form attributes.

 

<form>

<label>Your Name<input type="text" id="text" name="name"></label>

<br><br>

<label>Your Address<input type="text" name="address"></label>

<br><br>

<label>

<select id="info" name="Catalog">

<option value="1">Full Product Catalog</option>

<option value="2">Spring Catalog</option>

<option value="3">Special Order Service</option>

</select>&nbsp;&nbsp;Select The Product Catalog you Want to Receive</label>

<br><br><br>

<input type="button" value="Request Information" onClick="sub(this.form)">

</form>

 

Fields for name, address and a select menu with catalog choices are provided. We will need to loop through each form element and retrieve a value. The following code does this, and provides a way for text fields to be validated.

 

function getFormValues(fobj,valFunc)

{

   var str = "";

   var valueArr = null;

   var val = "";

   var cmd = "";

   for(var i = 0;i < fobj.elements.length;i++)

   {

       switch(fobj.elements[i].type)

       {

           case "text":

                if(valFunc)

                {

                    //use single quotes for argument so that the value of

                    //fobj.elements[i].value is treated as a string not a literal

                    cmd = valFunc + "(" + 'fobj.elements[i].value' + ")";

                    val = eval(cmd)

                }

                str += fobj.elements[i].name +

                 "=" + escape(fobj.elements[i].value) + "&";

                 break;

           case "select-one":

                str += fobj.elements[i].name +

                "=" + fobj.elements[i].options[fobj.elements[i].selectedIndex].value + "&";

                break;

       }

   }

   str = str.substr(0,(str.length - 1));

   return str;

}

 

This function accepts two arguments. The first is a reference to a form object, the other is the name of a validating function in the form of a string. The elements array of the form object is looped through, and a switch construct decides what to do with each of the relevant types of form elements (in this case just text and select-one). If the element is a text field, the eval function is used to call the validating function that is specified by argument two, which is sent the value of the form element.

 

If you needed, for instance, to validate other types of elements, each in a unique way, you could include a second argument to the validating function that would be the name or type of the element, and allow the validating function to treat each element differently. The validating function could work in whatever way you wished it to, but it would be a good idea, if an error is found, to set a global variable to false. This variable could then be used to keep submission from occurring until the error was corrected. Form fields could be highlighted in some way if there was an error in them as well.

 

In addition to sending the element value to a validating function, getFormValues assembles the values into a compatible querystring. The loop will add an extra "&" at the end of the string, which we clip off after the loop is finished. The string is then returned for use in our request.

 

Conclusion

 

AJAX technology can make browser based applications very close in functionality to standard desktop applications. Reference documentation for the XMLHTTPRequest object is available at XULplanet and Microsoft's MSDN website, and more information on XMLHTTPRequest, AJAX and examples of working applications are only a Web search away.


DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

blog comments powered by Disqus
XML ARTICLES

- Open XML Finally Supported by MS Office
- XML Features Added to Two Systems
- Using Regions with XSL Formatting Objects
- Using XSL Formatting Objects
- More Schematron Features
- Schematron Patterns and Validation
- Using Schematron
- Datatypes and More in RELAX NG
- Providing Options in RELAX NG
- An Introduction to RELAX NG
- Path, Predicates, and XQuery
- Using Predicates with XQuery
- Navigating Input Documents Using Paths
- XML Basics
- Introduction to XPath

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials