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> 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. |
|
| · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | | |
|
/ 187 
