how to populate a dropdown on clicking a radio button

Dev Articles Community Forums Sponsor:

Ajax Application Generator Generate database and reporting .NET Web apps in minutes. Quickly create visually stunning, feature-rich apps that are easy to customize and ready to deploy. Download Now!

October 9th, 2004, 10:33 AM

ramyaivan

Registered User

Join Date: Aug 2004

Posts: 16

Time spent in forums: < 1 sec
Reputation Power: 0

how to populate a dropdown on clicking a radio button

hi all,
Now i have a problem to be solved. I have populated radio button and a dropdown with values from the database.

Now what i want is,
When i am clicking a particular radio button, all its corresponding values needs to be populated into the dropdown box
from the database. I need both these radio buttons and drop down menus on the same page and this clicking should get affected
only by clickiing the radio button option and not by any submit button.

Example: In a page there will be radio button options and one drop down menu.
Radio button options- 1. India
2. United States
When the radio button for India is clicked, all its respective states will be populated into the dropdown menu.

Please sombody guide in doing this.
Any help will be appreciated
Waiting for the reply

Thanking you
ri

October 10th, 2004, 02:37 AM

Itsacon

Command Line Warrior

Join Date: Aug 2004

Location: Sector ZZ9 Plural Z Alpha

Posts: 956

Folding Points: 651767 Folding Title: Super Ultimate Folder - Level 2

Time spent in forums: 6 Days 8 h 23 m 32 sec
Reputation Power: 4

This really should be in the Javascript forum, but anyway.

Something like this?

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Page title here!</title>

<script type="text/javascript">
function populate_dropdown(country)
{
	switch(country)
	{
		case "america":
			document.forms[0].states.length = 6;
			document.forms[0].states.disabled = false;
			document.forms[0].states.options[0].text = 'Washington';
			document.forms[0].states.options[0].value = 'Washington';
			document.forms[0].states.options[1].text = 'Florida';
			document.forms[0].states.options[1].value = 'Florida';
			document.forms[0].states.options[2].text = 'Texas';
			document.forms[0].states.options[2].value = 'Texas';
			document.forms[0].states.options[3].text = 'North Carolina';
			document.forms[0].states.options[3].value = 'North Carolina';
			document.forms[0].states.options[4].text = 'South Carolina';
			document.forms[0].states.options[4].value = 'South Carolina';
			document.forms[0].states.options[5].text = 'Wisconsin';
			document.forms[0].states.options[5].value = 'Wisconsin';
			break;
		case "india":
			document.forms[0].states.length = 5;
			document.forms[0].states.disabled = false;
			document.forms[0].states.options[0].text = 'Kashmir';
			document.forms[0].states.options[0].value = 'Kashmir';
			document.forms[0].states.options[1].text = 'Rajastan';
			document.forms[0].states.options[1].value = 'Rajastan';
			document.forms[0].states.options[2].text = 'Gujarat';
			document.forms[0].states.options[2].value = 'Gujarat';
			document.forms[0].states.options[3].text = 'Orissa';
			document.forms[0].states.options[3].value = 'Orissa';
			document.forms[0].states.options[4].text = 'Punjab';
			document.forms[0].states.options[4].value = 'Punjab';
			break;
		default:
			document.forms[0].states.length = 1;
			document.forms[0].states.options[0].text = 'Select a country first';
			document.forms[0].states.disabled = true;
	}
}
</script>

</head>
<body>
<form action="this.html" method="post">
<p>
<input id="America" type="radio" name="country" value="America" onclick="populate_dropdown('america')" /><label for="America">America</label><br />
<input id="India" type="radio" name="country" value="India" onclick="populate_dropdown('india')" /><label for="India">India</label><br />

<select disabled="disabled" name="states">
<option>Select a country first</option>
</select>
</p>
</form>
</body>
</html>

October 19th, 2004, 07:31 PM

ramyaivan

Registered User

Join Date: Aug 2004

Posts: 16

Time spent in forums: < 1 sec
Reputation Power: 0

Thank you so muchhhhhhhhhh for this helped, but what if if want to populate the dropdown from the database, but not by manually filling it. How to populate the dropdown from the database, in this case(ie on clicking the radio button, its corresponding states name should be downloaded from the database)

Hoping to get the result

thanking u

ri

Quote:

Originally Posted by Itsacon

This really should be in the Javascript forum, but anyway.

Something like this?

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 
<title>Page title here!</title>
 
<script type="text/javascript">
function populate_dropdown(country)
{
	switch(country)
	{
		case "america":
			document.forms[0].states.length = 6;
			document.forms[0].states.disabled = false;
			document.forms[0].states.options[0].text = 'Washington';
			document.forms[0].states.options[0].value = 'Washington';
			document.forms[0].states.options[1].text = 'Florida';
			document.forms[0].states.options[1].value = 'Florida';
			document.forms[0].states.options[2].text = 'Texas';
			document.forms[0].states.options[2].value = 'Texas';
			document.forms[0].states.options[3].text = 'North Carolina';
			document.forms[0].states.options[3].value = 'North Carolina';
			document.forms[0].states.options[4].text = 'South Carolina';
			document.forms[0].states.options[4].value = 'South Carolina';
			document.forms[0].states.options[5].text = 'Wisconsin';
			document.forms[0].states.options[5].value = 'Wisconsin';
			break;
		case "india":
			document.forms[0].states.length = 5;
			document.forms[0].states.disabled = false;
			document.forms[0].states.options[0].text = 'Kashmir';
			document.forms[0].states.options[0].value = 'Kashmir';
			document.forms[0].states.options[1].text = 'Rajastan';
			document.forms[0].states.options[1].value = 'Rajastan';
			document.forms[0].states.options[2].text = 'Gujarat';
			document.forms[0].states.options[2].value = 'Gujarat';
			document.forms[0].states.options[3].text = 'Orissa';
			document.forms[0].states.options[3].value = 'Orissa';
			document.forms[0].states.options[4].text = 'Punjab';
			document.forms[0].states.options[4].value = 'Punjab';
			break;
		default:
			document.forms[0].states.length = 1;
			document.forms[0].states.options[0].text = 'Select a country first';
			document.forms[0].states.disabled = true;
	}
}
</script>
 
</head>
<body>
<form action="this.html" method="post">
<p>
<input id="America" type="radio" name="country" value="America" onclick="populate_dropdown('america')" /><label for="America">America</label><br />
<input id="India" type="radio" name="country" value="India" onclick="populate_dropdown('india')" /><label for="India">India</label><br />
 
<select disabled="disabled" name="states">
<option>Select a country first</option>
</select>
</p>
</form>
</body>
</html>

October 19th, 2004, 09:45 PM

Viper_SB

Moderator

Join Date: Oct 2003

Location: Canada

Posts: 330

Time spent in forums: 1 Day 4 h 51 m 6 sec
Reputation Power: 5

Moved to javascript forum.

__________________
Miscellaneous Software
Viper_SB

Developer Shed E-Support

Thread Tools	Search this Thread
Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread: