How to Create a Dynamic Web Page - Making the HTML Elements Interact
(Page 3 of 4 )
In order to make HTML elements interact with one another, you need to reference them; add a property to the existing <select>, <form> and <textarea> tags so that each tag looks like the below example:
<select id=”people”>
<form id=”form1”>
<textarea id=”details”>
You can call your elements whatever you like, but it’s usually best to give them a logical name to make the scripting easier.
Next, add the script. Between the <head> tags state the scripting language you’ll be using, which in this case, will be Microsoft’s Visual Basic Script:
<script language="VBScript">
Creating Subroutines
VBScript relies mainly on subroutines (very much like VBA or Visual Basic for Applications which is used mostly in Word or Excel) which you define yourself.
To create the subroutine used here, add the following statement below the script language definition;
sub people_onclick()
The first part sets the subroutine and names it as ‘numbers’; the _onclick is what’s known as a mouse event and runs the subroutine when a specified element of the page is clicked. Next you need a loop to control the flow of the script. Add the following code:
if people.selectedIndex="0" then
form1.details.value="Make a Selection"
This says to the browser, if the drop-down box called ‘people’ has not yet been selected, display the words ‘The details will be displayed here’ in the textarea known as ‘details’, within the form called ‘form1’.
For your information, selectedIndex is a property of the select element that is given a value depending on which choice is selected in the drop-down box.
When coding loops by hand, it’s best to indent each section of the loop with a tab space. This is to make it more readable by you or anyone else reading the code.
All you need to do now is close the loop by telling the browser what to do when a selection is made:
else
select case people.selectedIndex
case 1
form1.details.value="1 Nowhere Street, Ghost Town, AB1 2CD"
case 2
form1.details.value="2 Unknown Lane, Gonesville, EF3 4GH"
case 3
form1.details.value="3 Invisible Avenue, Nothingshire, IJ5 6KL"
case 4
form1.details.value="4 Somewhere Road, Vancancy, MN7 8OP"
case 5
form1.details.value="5 lestways, Notknownsbury, QR9 0ST"
case 6
form1.details.value="6 Lost Court, Summerwhere, UV12 3WX"
case 7
form1.details.value="7 Nodnol Place. Nohampton, YZ45 6AB"
case 8
form1.details.value="8 Empty Square, Notthereburgh, CD7 8EF"
case 9
form1.details.value="9 Unbuilt Crescent, Guester, GH8 9IJ"
case 10
form1.details.value="10 Unfound House, Neverpool, KM27 4NO"
The if-else statement is an easy way to implement a system of choice in the script. It says to the browser, either do this or else do that. The ‘select case’ is another loop that can be used in conjunction with drop-down boxes, which tells the browser what happens when a specific selection is made. The selectedIndex value changes when a selection is made and each ‘case’ represents what to do for every value of selectedIndex.
In order to change what is displayed in the textarea, you reference the form name and the textarea name, and assign the value to what you want it to say. You then end the select statement:
end select
Close the loop:
end if
And end the subroutine with:
end sub
Then add the </script> tag to close off the script.
Next: Completed File >>
More HTML Articles
More By Dan Wellman
