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 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.

List Selection Rotation

Slideshows and music tools often need to increment (or randomize) the current selected value of a list control based on a timer.

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.

<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.

Background Color Picker
<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. 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
<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>

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.



JR's HomePage | Comments [jstutora.htm:2011 06 12]