Client-Side Scripting with JavaScript


Part 9 - More JavaScript Forms

Using Forms to Present Information

JavaScript can be used with forms to simplify the presentation of information on a web page. Form fields can be filled in by JavaScript based on actions taken.

This example will display different information when the year is changed:

Nobel Prize for Literature

Year:
Recipient:
Nationality:
Genre:

Some of the script and form tags used:

<SCRIPT LANGUAGE="JavaScript"> var years = new Array("1982", "1983", "1984"); var names = new Array("Gabriel Garcia Marquez", "Sir William Golding", "Jaroslav Seifert"); var nation = new Array("Colombian", "British", "Czech"); var genre = new Array("novels and short stories", "novels", "poems"); function ChangeInfo() { ysub = document.nobel.year.selectedIndex; document.nobel.recipient.value = names[ysub]; document.nobel.nationality.value = nation[ysub]; document.nobel.genres.value = genre[ysub]; } </SCRIPT> <FORM NAME="nobel"> Year: <SELECT NAME="year" onChange="ChangeInfo()"> <OPTION>1982 <OPTION>1983 <OPTION>1984 </SELECT> Recipient: <INPUT TYPE="TEXT" NAME="recipient" SIZE=35> Nationality: <INPUT TYPE="TEXT" NAME="nationality" SIZE=35> Genre: <INPUT TYPE="TEXT" NAME="genres" SIZE=35> </FORM>

With this approach, you can change the way the information is presented by using the same data but changing the form:

Nobel Prize for Literature

Recipient:
Year:
Nationality:
Genre:

Next Next: Working with Windows