Tutorial 10 - Dynamic Form Examples
DOM explained the DOM model and DHTML showed how to liven up your site. This tutorial emphasizes working with forms for interaction and dynamically modifying web pages. You should already be familiar with HTML forms (refer to Quick Forms) and JavaScript before starting this tutorial.
Dynamic Form Selection
Selection boxes can be used to display alternate forms by using dynamic content.
Dynamic Select Lists
DOM allows creating new option elements from within scripts using the Option(caption[,value]) constructor which creates a new option instance which is inserted in the appropriate select control's options[] array. history.go[0]; can be used to update the window after element insertion.
Note: Other control objects do not have instance constructors. They must be created with the more rudimentary document tree traversal / node creation technique offered by the DOM model.
|
|
|---|
This example illustrates passing multiple selected items from a select list to another select control. The onclick event passes only the control element ids. The add2list() function finds the controls and loops through the input list's options array looking for selected items. Selected items are added to the output list using the Option objectconstructor. The function also prevents duplicate output entries by checking the output list before addition. The takefromlist() function removes previously selected elements from the output list. Double clicking is also enabled. View this page's source for the table format.
newColor Function
The form examples shown on this page all use a common function called newColor to set the desired element's background color. The newColor method accepts X11|SVG named colours, hexadecimal 3 and 6 character formats preceded by a # and rgb format [eg. rgb(50,100,200)] entries. The examples all default to body element (ie no second parameter given).
Select List Color Picker
This example uses a selection list to pick a color from the X11|SVG named colors. The onchange event uses the control name explicitly to get a value to feed the selCol function. selCol converts the selected option to a text string. newColor sniffs for the browser type and changes a style property dynamically.
<form action="" onsubmit="return false;"><fieldset>
<legend>Background Color Selection from X11|SVG List</legend>
<select id="c_sel" size="6" onchange="selColor('c_sel');">
<option>aliceblue</option>
<option>antiquewhite</option>
...
</select></fieldset></div>
Radio Button Color Picker
This example shows the use of a 'controlled' input to choose from a 'restricted' set of color backgrounds. The onclick event feeds the selected color value to the newColor function.
<form id="radio_form" action="" onsubmit="return false;">
<fieldset><legend>Background Color Selector</legend>
<label>Aquamarine:<input name="radCol" type="radio"
onclick="newColor('Aquamarine');"/></label>
<label>Burlywood:<input name="radCol" type="radio"
onclick="newColor('Burlywood');"/></label>
<label>Goldenrod:<input name="radCol" type="radio"
onclick="newColor('Goldenrod');"/></label>
<label>Peachpuff:<input name="radCol" type="radio"
onclick="newColor('Peachpuff');"/></label>
</fieldset></form>
Hexadecimal Entry Color Picker
This example lets the user enter a 6 digit hex code and test the color choice before using it on a web page. This example also includes verification that the input was a valid hexcode before using it to prepare the new background color. Validation should always be performed on any free format input. Numeric validation discusses some methods of input validation.
<form id="formhex" action="" onsubmit="return false;">
<fieldset><legend>Hex Color Picker</legend>
<label for="query">Background color (6 hexadigits): </label>
<input id="query" class="box50" type="text" size="6" maxlength="6">
<button onclick="ChangeColor('query');">Test!</button></form>
And the validation script is:
Note: The Ultimate Color Picker combines many of the ideas from the above examples. Use it to find attractive choices or Cut|Paste it for your own site.