	Sign In Sign-Up

Form management - cxkgrafix - www.caoxuan.com

Forms...more forms!!!

I will write this page bit by bit and so if it appears chaotic... maybe because... it is!
I will approach this topic NOT in the order below:
(yes! means some writing exists for the part)

form tags
elements preview
values and names
select options
radios and checkboxes
buttons
arrays and form
yes! dynamic form construction

Whatever bits I like to write first will come up first...

the form

the elements

values and names

select options

radios and checkboxes

Example
Radio button are mutually exclusive. The user is given one and only one choice out of many. Once a choice is decided, there will always be one checked button (unless you program a clear all function). The above example shows you how to program radios and to clear them if the user decides not to choose any.
Checkboxes can be ticked as many as the group population allows. They can be unchecked.

the buttons

use of arrays in form processing

dynamic form construction

(only for IE4+)
You can use the command "document.createElement("type")" to make elements on the fly.
In the Example below, Destinations and Fares of flights are in an array.

items=new Array("NewYork",1500,"Sydney",850,"Hongkong",1200,"London",2100);

They are then 'dynamically' put in to the <select> as pairs of value and text.

<option value="items[i+1]">items[i]

item[i] is the destination and items[i+1] is the next item in the aray (ie. the cost of the flight)
This is achieved by the script below:

<select name=selectMe onChange="document.forms[0].price.value=this.options[this.selectedIndex].value"> <script> for(i=0;i<items.length;i++) { newOption = document.createElement("OPTION"); newOption.text = items[i]; i++; newOption.value = items[i]; document.forms[0].selectMe.add(newOption,i) } </script> </select>

Within the select tags in the body of the html is a javascript to create the option tags. This helps tremendously in form design.
Say if you have hundreds of options, they all can be written once in the array and then used repeatedly without fear of typo mistakes.
When you look at the source, you cannot see the option tags. This also reduces the size of the file.
Imagine the sight thousands of <option value="Value">Name</option> tags filling up your codepage...

Example

The above example also has the array method concat(). Please see use of arrays in form processing.

MORE TO COME IN NEXT UPDATE
javascript - basic stuffs