HTML Markup | JavaScript | Java | Home & Links

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 Display

Alternate forms can be displayed 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 color picker examples shown on this page all use a common function called newColor() to set the desired element's background color. newColor() 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

X11|SVG Color

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 selColor() function. selColor() converts the selected option to a text string. newColor() sniffs for the browser type and changes a style property dynamically.

<fieldset class="col"><legend>X11|SVG Color</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.

Background Color Picker
<fieldset class="col"><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>

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. The example calls the changeColor(id) function which verifies that the input was a valid hexcode before using it to set the new background color. Validation should always be performed on any free format input. Numeric validation discusses some methods of input validation.

Free Format Color Selector
<fieldset class="col"><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>


JR's HomePage | Comments [jstutora.htm:2014 10 14]