Home arrow HTML arrow Page 3 - How to Create a Dynamic Web Page

How to Create a Dynamic Web Page

This quick tutorial demonstrates how fast and easy it is to produce web pages with dynamic content that are purely client based. This is aimed at beginners to web programming or those of you who like to keep things fairly simple. Wellman's creative names for cities and towns adds a bit of humor too.

Author Info:
By: Dan Wellman
Rating: 4 stars4 stars4 stars4 stars4 stars / 125
June 14, 2004
  1. · How to Create a Dynamic Web Page
  2. · Code for Drop-down Box and Text Area
  3. · Making the HTML Elements Interact
  4. · Completed File

print this article

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:

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.

blog comments powered by Disqus

- Does HTML5 Need a Main Element?
- Revisiting the HTML5 vs. Native Debate
- HTML5: Not for Phone Apps?
- HTML5 or Native?
- Job Hunting? Freelancer.com Lists This Quart...
- HTML5 in the News
- Report: HTML5 Mobile Performance Lags
- The Top HTML5 Audio Players
- Top HTML5 Video Tutorials
- HTML5: Reasons to Learn and Use It
- More of the Top Tutorials for HTML5 Forms
- MobileAppWizard Releases HTML5 App Builder
- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials