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.

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here