Click here to Skip to main content
11,412,516 members (72,266 online)
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

Share

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   LinkedIn

Comments and Discussions

 
Questioniframe Pin
jguemez at 22-Apr-11 7:15
memberjguemez22-Apr-11 7:15 
GeneralCreating a Dynamic Combo Box w/o Refreshing Page Pin
RayRit at 18-Nov-09 14:13
memberRayRit18-Nov-09 14:13 
QuestionCan you help me out by doing the same With PHP Pin
arunudu at 14-Dec-07 2:07
memberarunudu14-Dec-07 2:07 
Questioncan you upgrade this in asp.net Pin
pabidi at 27-Jun-07 2:33
memberpabidi27-Jun-07 2:33 
GeneralExpansion to 3 combo box Pin
geervanibs at 4-Jun-07 21:16
membergeervanibs4-Jun-07 21:16 
GeneralThanks 4 this Pin
Cristiano Shrestha at 22-May-07 20:06
memberCristiano Shrestha22-May-07 20:06 
QuestionHow to expand the select box to be 3 or more select box??? Pin
neo_msi20 at 2-May-07 23:05
memberneo_msi202-May-07 23:05 
GeneralThanks so much! [modified] Pin
enfleshjsc at 29-Mar-07 6:05
memberenfleshjsc29-Mar-07 6:05 
QuestionHow do i extend it to three combo boxes Pin
bibha at 8-Aug-03 7:15
memberbibha8-Aug-03 7:15 
AnswerRe: How do i extend it to three combo boxes Pin
geervanibs at 4-Jun-07 21:25
membergeervanibs4-Jun-07 21:25 
GeneralYou have a creative solution but... Pin
kbuchan at 4-Aug-03 3:19
memberkbuchan4-Aug-03 3:19 
GeneralRe: You have a creative solution but... Pin
Richard Deeming at 4-Aug-03 23:56
memberRichard Deeming4-Aug-03 23:56 
The problem with using the XmlHttp object is that you will be limited to Internet Explorer on Windows. Your users will also have to update their security settings to allow your site to create and script ActiveX controls. In an Intranet, this shouldn't be a problem, but for an internet page, the IFrame approach is much nicer.


"These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer
GeneralJSP Pin
Juan Carlos Montenegro at 18-Dec-02 6:45
sussJuan Carlos Montenegro18-Dec-02 6:45 
Generalsometinh different Pin
tommy skaue at 12-Nov-02 1:18
membertommy skaue12-Nov-02 1: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 | Terms of Use | Mobile
Web01 | 2.8.150427.1 | Last Updated 31 Jul 2003
Article Copyright 2002 by 'Anil' Radhakrishna
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid