Click here to Skip to main content
Click here to Skip to main content

Creating a Dynamic Combo Box w/o Refreshing Page

, 30 Jul 2003
Rate this:
Please Sign up or sign in to vote.
..using IFRAME.

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 Wink | ;-) . 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:

Links

Feedback

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

License

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

About the Author

'Anil' Radhakrishna
Web Developer
India India
'Anil' Radhakrishna is a seasoned developer who enjoys working with Microsoft tools & technologies. He blogs quite regularly about his little discoveries and technical experiments on his blog called Tech Tips, Tricks & Trivia. You can find some of his unusual code samples & snippets at his Code Gallery. He loves building mash-ups using public Web APIs.
Follow on   Twitter

Comments and Discussions

 
Questioniframe Pinmemberjguemez22-Apr-11 6:15 
GeneralCreating a Dynamic Combo Box w/o Refreshing Page PinmemberRayRit18-Nov-09 13:13 
QuestionCan you help me out by doing the same With PHP Pinmemberarunudu14-Dec-07 1:07 
Questioncan you upgrade this in asp.net Pinmemberpabidi27-Jun-07 1:33 
GeneralExpansion to 3 combo box Pinmembergeervanibs4-Jun-07 20:16 
GeneralThanks 4 this PinmemberCristiano Shrestha22-May-07 19:06 
QuestionHow to expand the select box to be 3 or more select box??? Pinmemberneo_msi202-May-07 22:05 
I'm very confused how to expand the select box to be 3 or more??
I really need it very urgent.. Can you explain me how to do it??
 
Thanks for your attention and your great reply...
 

~ please help me.. Frown | :(
 
msi
GeneralThanks so much! [modified] Pinmemberenfleshjsc29-Mar-07 5:05 
QuestionHow do i extend it to three combo boxes Pinmemberbibha8-Aug-03 6:15 
AnswerRe: How do i extend it to three combo boxes Pinmembergeervanibs4-Jun-07 20:25 
GeneralYou have a creative solution but... Pinmemberkbuchan4-Aug-03 2:19 
GeneralRe: You have a creative solution but... PinmemberRichard Deeming4-Aug-03 22:56 
GeneralJSP PinsussJuan Carlos Montenegro18-Dec-02 5:45 
Generalsometinh different Pinmembertommy skaue12-Nov-02 0:18 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web03 | 2.8.140721.1 | Last Updated 31 Jul 2003
Article Copyright 2002 by 'Anil' Radhakrishna
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid