Creating a Dynamic Combo Box w/o Refreshing Page

• Download source files - 10.3 Kb

Introduction

Forms involving a dynamically-linked combo box have to waste a server-trip to fetch the values from the database to populate that combo box based on the value of a dependent combo box. Links to a number of approaches to handle dynamically-linked lists are listed in Charles Carol's excellent online book here. I discovered a cross-browser (well almost cross-browser ;-). I tested the code in IE 5, Netscape 6 & 7 and Mozilla 1.0 & it worked fine. IFRAME is not supported in NN 4.x and lower) method to populate a dynamically-linked List Box without refreshing the page, by using the IFRAME tag.

On selecting a country from the first combo box, the cities in that country, retrieved from the database are populated into the second combo. The second combo is actually present inside a frame-border-less IFRAME. A teeny-weeny JavaScript function allows the value of the combo box to be available to the outer form & be submitted.

The source code

The zipped source code file consists of 2 ASP files - where.asp & cities.asp & a MDB file City.mdb containing a table of countries & cities.

where.asp is the page that you have to load first, using IIS. It has a reference to the cities.asp page through the IFRAME.

Here's the teeny-weeny function in where.asp that enables the combo box present in the form in the IFRAME to be accessed by the parent form:

function getIframe()
{
//to access the element in the Form 
//contained in the page called by the IFrame, use
//parent.iframeName.document.iframeFormName.field.value
//here the IFrame element is assigned to the 
//hidden variable city in the parent Form

document.form1.city.value=parent.Iframe1.document.form2.elements[0].value;

}

The city element referred in the script above is a hidden tag.

When a country name is chosen from the combo box, the selected value is passed as a querystring to cities.asp.

<select 
   onchange='document.getElementById("Iframe1").src="cities.asp?country="+
   this.value'>

It refers to the following IFRAME defined in the same page.

<IFRAME id="Iframe1" name='Iframe1' 
  FRAMEBORDER=0 SCROLLING='no' WIDTH=120 HEIGHT=40></IFRAME>

Check this Microsoft link for an insight into the IFRAME tag. If you're impressed with what can be done with IFRAME, take a look at Searchlite v2. Also take a look at two other related articles:

• Using popup windows to send server information back to the client.
• Refresh Portion Of Your Web Page Using XMLHTTP.

Links

• Try it online

Feedback

Let me know if this article is a killer or a dud. Or whatever you felt.