Learn VBA & Macros in 1 Week!

JavaScript - Javascript Dropdown List With Xml File

Full Excel VBA Course - Beginner to Expert

Javascript Dropdown List With Xml File	View Content

I just recently bought 2 books, AJAX and Javascript, to help me in writing a wep application. They have been great so far except for one thing. I am trying to populate a dropdown list with an XML file, but I want it to load into the dropdown list only AFTER a radio button has been clicked. Does anyone know how to do this or does anyone know where I could go to get some insight on this? Thanks.

Full Excel VBA Course - Beginner to Expert

How To Disable A Dropdown List Based On Selection In Another Dropdown List

Similar Tutorials

View Content

Hi,

I have two dropdown lists with the second one being dependent on the selection in the first.

Options in list 1:
1,3 or 4

List two should be enabled when 3 or 4 is selected in list 1.

So far so good, managed to get it to work with only one set of lists, but I actually have 18 of those sets in this form:

Code:

<select name="fw[$i]" id="fw[$i]">
<option value="1">FWH</option>
<option value="3">links</option>
<option value="4">rechts</option>
<option value="0" selected></option>
</select><br />
<select name="lie[$i]" id="lie[$i]" disabled="disabled" onchange="showBox($i,xxx);">
<option value="0" selected>---</option>
<option value="1">gut</option>
<option value="2">schlecht</option>
<option value="3">Strafschlag</option>
<option value="4">OB</option>
</select>

$i is my index generated by my PHP script and runs from 1 to 18.
Everything works just fine as long as the index is not in play. With the index my function breaks, most probably due to my inability to extract the second parameter (xxx above) from the selection field.

Here's my function, there could be something wrong there too with how exactly to specify the proper dropdown list to enable.

Code:

function showBox(field,val) {
		
if (val > 1) {		
var box = 'lie[' + field + ']';
document.form1.box.disabled == false;
}
else {
document.form1.box.disabled == true;
}
	
}

Finally, I'm not that adept in javascript programming, more like a trial and error guy, how has hit the wall with this problem.
Thanks in advance!
Joe

Javascript Dropdown List Popup Depending On Selection?

Similar Tutorials

View Content

Hello Folks,

Here is my dropdown menu:
Code:

  
<select name="peeps">

<option value="Frank Tompson">Frank Tompson</option>
<option value="Henry Wilson">Henry Wilson</option>
<option value="Bill Kent">Bill Kent</option>
<option value="Jessi McDonald"> Jessi McDonald</option>
<option value="John Hays">John Hays</option>

How can i make it so if i click on John Hays a JavaScript pop up will say Hello John Hays, and if i click on Bill Kent a popup will say hello Bill Kent and if i click on any other name nothing happens?

Javascript Dropdown List To Show Current Date As Default Selected Value

Similar Tutorials

View Content

what can be the reasons for the same code which works perfectly in notepad to not show its result in a jsp application done using eclipse??anything to do with settings?
I am not able to display the current date as default in dd/mm/yyyy format in drop down boxes..only dd and yyyy apears but month isnt apearing as default..
can u suggest alternative logic and its code to implement the same??

Dynamically Remove Options From Dropdown. How To Return To Original Dropdown List?

Similar Tutorials

View Content

Hi,

I'm trying to integrate an address finder (http://www.craftyclicks.co.uk/) into my shopping cart (OsCommerce). I can get it to work but I need to add my own functionality. I'm not very experienced with JavaScript and my head has entered an infinite loop by now.

The problem is that the address finder script can change the selected country in a drop-down list depending on the postcode entered by the user (using the onblur event handler). What I need it to do is to remove all other countries depending on the postcode. I can get it to remove all other countries but how do i return to the original list of countries when the postcode is changed again? Once all other counties are removed, the drop-down list will obviously only have one option left... I guess the question is also how does a function remember what it has done before, when it is called again?

I have written this short test script as it is easier to work with than the craftyclicks oscommerce contribution:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>

<title>HTML Template</title>
 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />

<script type="text/javascript">
//<![CDATA[

function store(element) {

// store values

	var cl = element;
	
	var text_list = new Array();
			
	var value_list = new Array();
	
	var length = cl.length;
	
	for (var foo=0; foo<length; foo++) {
	
		text_list[foo] = cl.options[foo].text;
		
		value_list[foo] = cl.options[foo].value;
		
		alert("text array " + foo + " " + text_list[foo]);
		
		alert("value array " + foo + " " + value_list[foo]);
		
	}
	
	populate(cl, text_list, value_list);

}

function populate(element, text, value) {

	// populate options with previously stored values
	
	var cl = element;
	
	var length = cl.length;

	cl.options.length=0;	
	
	for (var bar=0; bar<length; bar++) {
		
		cl.options[bar]= new Option(text[bar], value[bar], false, false);
		
	}
	
}

function crafty_set_country(code) {	

	var cl = document.getElementById('select');
	
	store(cl);
	
	for (var i=0; i<cl.length; i++) {

		if (cl.options[i].value == code) {

			alert(cl.options[i].value + " found");
			
			var value = cl.options[i].value;
			
			var text = cl.options[i].text;
			
			cl.options.length=0;
			
			cl.options[0]=new Option(text, value, true, true);
			
			/*
			for (var j=0; j<cl.length; j++) {
			
				alert("second loop " + cl.options[j].text);
				
				if (cl.options[i].value != code) {
				
					cl.options[j]
				
				}
			
			}
			*/
			
		} else {
		
		alert(cl.options[i].value);
		
		}
		
	}
	
}

//]]>
</script>

</head>
 
<body>

<form>

<select id="select">
  <option value="10">ten</option>
  <option value="20">twenty</option>
  <option value="30">thirty</option>
  <option value="40">fourty</option>
  <option value="50">fifty</option>
  <option value="60">sixty</option>
</select>

<input type="button" value="remove" name="button" onClick="crafty_set_country(50)">
<input type="button" value="repopulate" name="button" onClick="crafty_set_country(100)">

</form>

</body>
</html>

Many thanks!

Martin

Php Drop Down List Selection Populates Second Dropdown List Or Text Box - Help!!

Similar Tutorials

View Content

Hi all,

I have been struggling on a bit of code for a while now. I need to populate a second drop down list (Region) based upon the selection of the first (County).
I have found a piece of code that works on its own and have adapted to suit my needs - see below. However, when I drop it into my main page the javascript is not working. It's because of the formObject but I just don't know enough to resolve this! Furthermore, I need the textboxes the user has already completed in the form to retain their value once the javascript kicks in as the completed form will submit to a database.

This piece of code is working well . . . .
Code:

<?php

$link = mysql_connect('myhost', 'myusername', 'mypassword') or die('Could not connect: ' . mysql_error());
mysql_select_db('mydatabase') or die('Could not select database');

if(isset($_GET["County"]) && is_numeric($_GET["County"]))
{
$County = $_GET["County"];
}

if(isset($_GET["Region"]) && is_numeric($_GET["Region"]))
{
$Region = $_GET["Region"];
}

?>

<script language="JavaScript">

function autoSubmit()
{
var formObject = document.forms['theForm'];
formObject.submit();
}

</script>

<form name="theForm" method="get">

<!-- County SELECTION BASED ON city VALUE -->

<?php

?>

<select name="County" onChange="autoSubmit();">
<option value=''</option>

<?php

//POPULATE DROP DOWN MENU WITH COUNTRIES FROM A GIVEN city

$sql = "SELECT * FROM county_regions";
$counties = mysql_query($sql,$link);

while($row = mysql_fetch_array($counties))
{
echo ("<option value=\"$row[CountyID]\" " . ($County == $row["CountyID"]? " selected" : "") . ">$row[County]</option>");
}

?>

</select>

<?php

?>

<br><br>

<?php

if($County!= null && is_numeric($County))
{

?>

<select name="Region" onChange="autoSubmit();">


<?php

//POPULATE DROP DOWN MENU WITH RegionS FROM A GIVEN city, County

$sql = "SELECT * FROM county_regions WHERE CountyID = $County ";
$Regions = mysql_query($sql,$link);

while($row = mysql_fetch_array($Regions))
{
echo ("<option value=\"$row[CountyID]\" " . ($Region == $row["CountyID"]? " selected" : "") . ">$row[Region]</option>");
}

?>

</select>

<?php

}

?>

What follows is my form where the javascript is not working - edited quite a bit to save on space!

Code:

<head>
 
<script language="JavaScript">

function autoSubmit()
{
var formObject = document.forms['subform'];
formObject.submit(); 
}

</script>

</head>

<form enctype="multipart/form-data" method="post" action="add_attraction01.php" FORM NAME="FormName">     
<input type="hidden" name="MAX_FILE_SIZE" value="32768" />    
<label for="Business_name">Business Name</label>    
<input type="text" size="60" STYLE="color: #FFFFFF; font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-size: 12px; background-color: #72A4D2;"     
<id="Business_name" name="Business_name" maxlength=60/><font size="1" face="arial" color="red">Required field</font><br />    
<label for="StreetAddress">Address</label>    
<input type="text" size="60" rows="2" id="StreetAddress" name="StreetAddress" maxlength=120/><font size="1" face="arial" color="red">Required field</font><br />    
<label for="Town">Town</label>    <input type="text" size="25" id="Town" name="Town" maxlength=25/><font size="1" face="arial" color="red">Required field</font><br /> 

<?php

$link = mysql_connect('myhost', 'myusername', 'mypassword') or die('Could not connect: ' . mysql_error());
mysql_select_db('mydatabase') or die('Could not select database');

if(isset($_GET["County"]) && is_numeric($_GET["County"]))
{
$County = $_GET["County"];
}

if(isset($_GET["Region"]) && is_numeric($_GET["Region"]))
{
$Region = $_GET["Region"];
}

?>

<form name = "subform" method="get"> 

<select name="County" onChange="autoSubmit();"> 
<option value=''</option>

<?php

$sql = "SELECT * FROM county_regions";
$counties = mysql_query($sql,$link);

while($row = mysql_fetch_array($counties))
{
echo ("<option value=\"$row[CountyID]\" " . ($County == $row["CountyID"]? " selected" : "") . ">$row[County]</option>");
}

?>

</select>

<?php

?>

<br><br>

<?php

if($County!= null && is_numeric($County))
{

?>

<select name="Region" onChange="autoSubmit();">


<?php

$sql = "SELECT * FROM county_regions WHERE CountyID = $County ";
$Regions = mysql_query($sql,$link);

while($row = mysql_fetch_array($Regions))
{
echo ("<option value=\"$row[CountyID]\" " . ($Region == $row["CountyID"]? " selected" : "") . ">$row[Region]</option>");
}

?>

</select>

<?php

}

?>
<input type="text" size="20"id="Tel_No" name="Tel_No" maxlength=20 onkeypress="return isNumberKey(event)"/><font size="1" face="arial" color="red">Required field</font><br />    
<br/>    
<input type="submit" value="Submit your attraction" name="submit" onclick="return BothFieldsIdenticalCaseSensitive();"/>   
</form>
</body>
</html>

It's probably obvious to you guys!!

Thanks in advance for your help.

Jukebox - How To Replay List & How To Create Non Dropdown List

Similar Tutorials

View Content

09-01-10

Not sure exactly where to post this thread as it involves HTML, Javascript and embedded media players. It probably would be more appropriate here as there is much Javascript involved....

Hello,

I am trying to construct a Jukebox for my website. I have spent considerable time all over the WEB and at this forum which addressed the issue in a 50 page thread. Please see:

http://codingforums.com/showthread.php?t=50666

I got a lot of ideas from this thread but still cannot figure a way to do the following within the Jukebox. These are my main two questions for everything below:

1. How can I have the Jukebox cycle through all tunes and then start over from the beginning?

2. How can I allow the user to select a tune from a list but not a drop down list, have the Jukebox start from the user’s selection and then play all songs to the end. Then as in #1, start over from the beginning?

Per this thread I came away with basically two ways to assemble the jukebox. One uses links in a drop down list which the user can choose from. The other is to use an .m3u playlist. The user can only select a “playlist” from the drop down.

Below, I have included the code for each Jukebox. To see the Jukeboxes in action please go to my website where I have posted some test pages exhibiting the jukeboxes that I am referring to.

The following is the Jukebox which utilizes an .m3u playlist. If I end up using this idea I would like the tunes in the .m3u playlist to be displayed and allow the user to be able to choose a tune in the list. Then have the list play to the end of all tunes in the list. Then start over from the beginning of the list. After this code is the .m3u playlist.

Go to url removed and click on the link that says:
“Media Player Using an .M3U Playlist”

Jukebox utilizing an .m3u playlist:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
body {
text-align:center;
}
</style>
<script type="text/javascript">
function PlayIt(what){
player.document.getElementById('music').innerHTML='<object width="300" height="300" '
      +'classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" '
      +'codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701" '
      +'standby="Loading Microsoft Windows Media Player components..." type="application/x-oleobject">'
      +'<param name="url" value="'+what+'">'
      +'<param name="uiMode" value="full">'
      +'<param name="autoStart" value="true">'
      +'<param name="loop" value="true">'
      +'<embed type="application/x-mplayer2" '
      +'pluginspage="http://microsoft.com/windows/mediaplayer/en/download/" '
      +'showcontrols="true" uimode="full" width="300" height="45" '
      +'src="'+what+'" autostart="true" loop="true">'
+'</object>';
}
</script>
</head>

<body>
<div id="music">
<object width="300" height="300"
      classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"
      codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701"
      standby="Loading Microsoft Windows Media Player components..." type="application/x-oleobject">
      <param name="url" value="">
      <param name="uiMode" value="full">
      <param name="autoStart" value="true">
      <param name="loop" value="true">
      <embed type="application/x-mplayer2"
      pluginspage="http://microsoft.com/windows/mediaplayer/en/download/"
      showcontrols="true" uimode="full" width="300" height="45"
      src="" autostart="true" loop="true">
</object>
</div>
<br>
<br>
<select name="player" onchange="PlayIt(this.value)">
<option value="none">::Choose a Song::</option>
<option value="JukeboxList.m3u">Jukebox List</option>
</select><br>
</html>

Here is the .m3u playlist for the above code:

Code:

#EXTM3U
#EXTINF:Bill Evans - G Waltz
media/G Waltz.mp3
#EXTINF:Dan Pincus - In Your Time
media/In Your Time.mp3

The following code is for the Jukebox that has a list of links in a dropdown list. If I go with this idea, I would like for the list not to be a dropdown list but just a list of tunes. The user should be able to click on any tune in the list and the player should start from that point, play all the remaining tunes in the list and then start from the beginning.

Go to url removed and click on the link that says:
“Media Player Using Links”

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
body {
text-align:center;
}
</style>
<script type="text/javascript">
function PlayIt(what){
player.document.getElementById('music').innerHTML='<object width="300" height="300" '
      +'classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" '
      +'codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701" '
      +'standby="Loading Microsoft Windows Media Player components..." type="application/x-oleobject">'
      +'<param name="url" value="'+what+'">'
      +'<param name="uiMode" value="full">'
      +'<param name="autoStart" value="true">'
      +'<param name="loop" value="true">'
      +'<embed type="application/x-mplayer2" '
      +'pluginspage="http://microsoft.com/windows/mediaplayer/en/download/" '
      +'showcontrols="true" uimode="full" width="300" height="45" '
      +'src="'+what+'" autostart="true" loop="true">'
+'</object>';
}
</script>
</head>

<body>
<select name="player" onchange="PlayIt(this.value)">
<option value="none">::Choose a Song::</option>
<option value="media/GWaltz.mp3">G Waltz</option>
<option value="media/InYourTime.mp3">In Your Time</option>
<option value="http://urltosong3.mp3">Song 3</option>
<option value="http://urltosong4.mp3">Song 4</option>
<option value="http://urltosong5.mp3">Song 5</option>
</select><br>
<div id="music">
<object width="300" height="300"
      classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"
      codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701"
      standby="Loading Microsoft Windows Media Player components..." type="application/x-oleobject">
      <param name="url" value="">
      <param name="uiMode" value="full">
      <param name="autoStart" value="true">
      <param name="loop" value="true">
      <embed type="application/x-mplayer2"
      pluginspage="http://microsoft.com/windows/mediaplayer/en/download/"
      showcontrols="true" uimode="full" width="300" height="45"
      src="" autostart="true" loop="true">
</object>
</div>
</html>

Another idea I found on the WEB also uses an .m3u playlist. The good thing about it is that it lists all the tunes in the playlist which the user can then select from. This jukebox calls up an entire Windows Media Player. If I was to use this idea I would like to be able to disable the left side of the player where the user has options such as burning to CD, Media Guide, Radio Tuner etc…

Go to url removed and click on the link that says:
“Media Player Within an IFrame Using .m3u Playlist””

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>JukeBox</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="Expires" content="-1">
</head>

<body>

<IFRAME name="frame" src="JukeboxList.m3u"
width="100%"
height="347"
scrolling="no"
frameborder="0">
[Your user agent does not support frames or is currently configured not to display frames.]
</IFRAME>

</body>
</html>

Thanks!
Dan

Dropdown List

Similar Tutorials

View Content

I need help with this js...
this is dropdown list...if user choose okc in first list(vrsta) in second (celik) user can choose C0270 and C0370...if chosen pc in first list in second user can choose C1330 and C1530 etc...
There are two boxes...ans15 and ans14...and button which user clicks
The idea is that user choose one option(okc,pc or cc) and choose option (C0270 or something else) onclick some values should be written in boxes
example:
chosen okc and C0270 in ans15 "hello" and in ans14 "goodbye" should be writen
if chosen okc and C0370 in ans15 "hi" and in ans14 "bye" should be writen

Code:

<script type="text/javascript">
function setOptions(chosen) {
var izbor = document.form3.celik;
izbor.options.length = 0;
if (chosen == " ") {
  izbor.options[izbor.options.length] = new Option('choose',' ');
 
}
if (chosen == "okc") {
  izbor.options[izbor.options.length] = new Option('C0270','C0270');
  izbor.options[izbor.options.length] = new Option('C0370','C0370');
}
if (chosen == "pc") {
  izbor.options[izbor.options.length] = new Option('C1330','C1330');
  izbor.options[izbor.options.length] = new Option('C1530','C1530');

}
if (chosen == "cc") {
  izbor.options[izbor.options.length] = new Option('C1120','C1120');
  izbor.options[izbor.options.length] = new Option('C1220','C1220');

 }


}
</script>
</head>

<body>


<FORM name="form3">
  <table width="439" height="139" border="1">
  <tr>
    <td width="200" height="33">
      <div align="center">
        <select name="vrsta" size="1"
onchange="setOptions(document.form3.vrsta.options
[document.form3.vrsta.selectedIndex].value);">
          <option value=" " selected="selected"> </option>
          <option value="okc">Opsti konstrukcijski celici</option>
          <option value="pc">Poboljsani celici</option>
          <option value="cc">Cementirani celici</option>
          <option value="cl">Celicni liv</option>
          <option value="sl">Sivi liv</option>
        </select>
        <br> 
        <br>
      </div></td>
    <td width="108" rowspan="3">&nbsp;</td>
    <td width="109" rowspan="3">&nbsp;</td>
    </tr>
  <tr>
    <td height="33"><div align="center">
      <select name="celik" size="1">
        <option value=" " selected="selected">Izabrati prvo vrstu</option>
        </select>
    </div></td>
    </tr>
  <tr>
    <td height="23" rowspan="2"><div align="center">
      <input type="button" value=" ok " onclick="beta(this.form)" />
      </div>
      </div>
      <div align="center"></div>      </td>
    </tr>
  <tr>
    <td><input type="type" "number" value="" name="ans15" size="9" /></td>
    <td><input type="type" "number" value="" name="ans14" size="9" /></td>
    </tr>
  </table>
</FORM>
</body>
</html>

Help-dynamic Dropdown List

Similar Tutorials

View Content

Howdy,

So I have some javascript/html on one file (another.html) that I would like to split into two separate pages:

home2.html
cars.js

If you view the code for home2.html everything works up until the model form box. That's where my problem lies. I can get the code to work on another.html but I'm splitting it up incorrectly in home2.html

Help would be much appreciated.

PS: If you are going to gripe at me for not using PHP or SQL to make things easier (for future updates to code) at least link me to something to learn from then insult me.

another.html
Code:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript" type="text/javascript">
function dropdownlist(list)
{

document.formname.subcategory.options.length=0;
switch (list)
{

case "bmw":
document.formname.subcategory.options[0]=new Option("Select Model","");
document.formname.subcategory.options[1]=new Option("3 Series");
document.formname.subcategory.options[2]=new Option("5 Series");
document.formname.subcategory.options[3]=new Option("Z Series");

break;

case "buick":
document.formname.subcategory.options[0]=new Option("Select Model","");
document.formname.subcategory.options[1]=new Option("Century");
document.formname.subcategory.options[2]=new Option("Lesabre");
document.formname.subcategory.options[3]=new Option("Park Avenue");
document.formname.subcategory.options[4]=new Option("Regal");
document.formname.subcategory.options[5]=new Option("Riveria");

break;

case "cadillac":
document.formname.subcategory.options[0]=new Option("Select Model","");
document.formname.subcategory.options[1]=new Option("Catera");
document.formname.subcategory.options[2]=new Option("Deville");
document.formname.subcategory.options[3]=new Option("El Dorado");
document.formname.subcategory.options[4]=new Option("Seville");

break

case "chevrolet":
document.formname.subcategory.options[0]=new Option("Select Model","");
document.formname.subcategory.options[1]=new Option("Astro");
document.formname.subcategory.options[2]=new Option("Blazer S 10");
document.formname.subcategory.options[3]=new Option("Camaro");
document.formname.subcategory.options[4]=new Option("Corvette");
document.formname.subcategory.options[5]=new Option("G2500");
document.formname.subcategory.options[6]=new Option("Lumina");
document.formname.subcategory.options[7]=new Option("Malibu");
document.formname.subcategory.options[8]=new Option("Monte Carlo");
document.formname.subcategory.options[9]=new Option("Suburban");
document.formname.subcategory.options[10]=new Option("Tahoe");
document.formname.subcategory.options[11]=new Option("Ventur");

break

case "chrysler":
document.formname.subcategory.options[0]=new Option("Select Model","");
document.formname.subcategory.options[1]=new Option("Town & Country");
document.formname.subcategory.options[2]=new Option("Cirrus");
document.formname.subcategory.options[3]=new Option("Concord");
document.formname.subcategory.options[4]=new Option("Sebring");

break;

case "dodge-plymouth":
document.formname.subcategory.options[0]=new Option("Select Model","");
document.formname.subcategory.options[1]=new Option("Avenger");
document.formname.subcategory.options[2]=new Option("Breeze");
document.formname.subcategory.options[3]=new Option("Caravan Voyager");
document.formname.subcategory.options[4]=new Option("Durango");
document.formname.subcategory.options[5]=new Option("Intrepeid");
document.formname.subcategory.options[6]=new Option("Ram Van 1500");
document.formname.subcategory.options[7]=new Option("Ram Van 2500");


case "ford":
document.formname.subcategory.options[0]=new Option("Select Model","");
document.formname.subcategory.options[1]=new Option("Contour");
document.formname.subcategory.options[2]=new Option("Crown Victoria");
document.formname.subcategory.options[3]=new Option("E150");
document.formname.subcategory.options[4]=new Option("E250");
document.formname.subcategory.options[5]=new Option("E350");
document.formname.subcategory.options[6]=new Option("Escort");
document.formname.subcategory.options[7]=new Option("Expedition");
document.formname.subcategory.options[8]=new Option("Explorer");
document.formname.subcategory.options[9]=new Option("Freestar");
document.formname.subcategory.options[10]=new Option("Mustang");
document.formname.subcategory.options[11]=new Option("Taurus");
document.formname.subcategory.options[12]=new Option("Windstar");

break;

case "gmc":
document.formname.subcategory.options[0]=new Option("Select Model","");
document.formname.subcategory.options[1]=new Option("Jimmy S 15");

break;

case "honda":
document.formname.subcategory.options[0]=new Option("Select Model","");
document.formname.subcategory.options[1]=new Option("Accord");
document.formname.subcategory.options[2]=new Option("Civic");
document.formname.subcategory.options[3]=new Option("Passport");

break;

case "isuzu":
document.formname.subcategory.options[0]=new Option("Select Model","");
document.formname.subcategory.options[1]=new Option("Odyssey");
document.formname.subcategory.options[2]=new Option("Rodeo");

break;

case "jeep":
document.formname.subcategory.options[0]=new Option("Select Model","");
document.formname.subcategory.options[1]=new Option("Cherokee");
document.formname.subcategory.options[2]=new Option("Grand Cherokee");
document.formname.subcategory.options[3]=new Option("Wrangler");

break;

case "lincoln":
document.formname.subcategory.options[0]=new Option("Select Model","");
document.formname.subcategory.options[1]=new Option("Continental");
document.formname.subcategory.options[2]=new Option("Navigator");
document.formname.subcategory.options[3]=new Option("Stratus");
document.formname.subcategory.options[4]=new Option("Town Car");

break;

case "mercedez":
document.formname.subcategory.options[0]=new Option("Select Model","");
document.formname.subcategory.options[1]=new Option("M Class ML");

case "mercury":
document.formname.subcategory.options[0]=new Option("Select Model","");
document.formname.subcategory.options[1]=new Option("Cougar");
document.formname.subcategory.options[2]=new Option("Grand Marquis");
document.formname.subcategory.options[3]=new Option("Mountaineer");
document.formname.subcategory.options[4]=new Option("Mystique");
document.formname.subcategory.options[5]=new Option("Sable");
document.formname.subcategory.options[6]=new Option("Villager");

break;

case "mitsubishi":
document.formname.subcategory.options[0]=new Option("Select Model","");
document.formname.subcategory.options[1]=new Option("Eclipse");
document.formname.subcategory.options[2]=new Option("Galant");

break;

case "nissan":
document.formname.subcategory.options[0]=new Option("Select Model","");
document.formname.subcategory.options[1]=new Option("200 SX");
document.formname.subcategory.options[2]=new Option("Altima");
document.formname.subcategory.options[3]=new Option("Maxima");
document.formname.subcategory.options[4]=new Option("Quest");
document.formname.subcategory.options[5]=new Option("Sentra");

case "oldsmobile":
document.formname.subcategory.options[0]=new Option("Select Model","");
document.formname.subcategory.options[1]=new Option("Alero");
document.formname.subcategory.options[2]=new Option("Blazer");
document.formname.subcategory.options[3]=new Option("Cutlass");
document.formname.subcategory.options[4]=new Option("Eighty Eight");
document.formname.subcategory.options[5]=new Option("Silhouette");

break;

case "pontiac":
document.formname.subcategory.options[0]=new Option("Select Model","");
document.formname.subcategory.options[1]=new Option("Boneville");
document.formname.subcategory.options[2]=new Option("Firebird");
document.formname.subcategory.options[3]=new Option("Grand AM");
document.formname.subcategory.options[4]=new Option("Grand Prix");
document.formname.subcategory.options[5]=new Option("Sun Fire");
document.formname.subcategory.options[6]=new Option("Transport");

break;

case "saturn":
document.formname.subcategory.options[0]=new Option("Select Model","");
document.formname.subcategory.options[1]=new Option("Saturn");

break;

case "toyota":
document.formname.subcategory.options[0]=new Option("Select Model","");
document.formname.subcategory.options[1]=new Option("4 Runner");
document.formname.subcategory.options[2]=new Option("Avalon");
document.formname.subcategory.options[3]=new Option("Camry");
document.formname.subcategory.options[4]=new Option("Corolla");
document.formname.subcategory.options[5]=new Option("Solara");

break;

case "volkswagen":
document.formname.subcategory.options[0]=new Option("Select Model","");
document.formname.subcategory.options[1]=new Option("Jetta");
document.formname.subcategory.options[2]=new Option("New Bettle");
document.formname.subcategory.options[3]=new Option("New Golf");
document.formname.subcategory.options[4]=new Option("New Jetta");
document.formname.subcategory.options[5]=new Option("Passat");

break;

}
return true;
}
</script>
</head>
<title>Dynamic Drop Down List</title>
<body>

<form id="formname" name="formname" method="post" action="submitform.asp" >
<table>
<tr>
<td>Make:</td>
<td><select name="category" id="category" onchange="javascript: dropdownlist(this.options[this.selectedIndex].value);">
	<option value="">Select Make</option>
	<option value="bmw">BMW</option>
	<option value="buick">Buick</option>
	<option value="cadillac">Cadillac</option>
	<option value="chevrolet">Chevrolet</option>
	<option value="chryler">Chrysler</option>
	<option value="dodge-plymouth">Dodge-Plymouth</option>
	<option value="ford">Ford</option>
	<option value="gmc">GMC</option>
	<option value="honda">Honda</option>
	<option value="isuzu">Isuzu</option>
	<option value="lincoln">Lincoln</option>
	<option value="mercedez">Mercedez</option>
	<option value="mercury">Mercury</option>
	<option value="mitsubishi">Mitsubishi</option>
	<option value="nissan">Nissan</option>
	<option value="oldsmobile">Oldsmobile</option>
	<option value="pontiac">Pontiac</option>
	<option value="saturn">Saturn</option>
	<option value="toyota">Toyota</option>
	<option value="volkswagen">Volkswagen</option>
</select></td>
</tr>
<tr>
<td align="right" valign="middle">Model:
</td>
<td align="left" valign="middle"><script type="text/javascript" language="JavaScript">
document.write('<select name="subcategory"><option value="">Select Sub-Category</option></select>')
</script>
<noscript><select name="subcategory" id="subcategory" >
<option value="">Select Model</option>
</select>
</noscript></td>
</tr>
</table>

</form>
 

</body>
</html>

home2.html
Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"> 
<head> 

	<link href="index.css" rel="stylesheet" type="text/css"> 	
	<script type="text/javascript" src="cars.js"></script>
</head> 
<body> 

	<div id="wrapperLeft"> 
		<div id="wrapperRight"> 
			<div id="main"> 
				<div id="columnLeft"> 
					<div id="center"><h3></h3></div> 
					</div> 
				<div id="columnRight"> 
					<div id="center"><h3></h3> 
					</div> 
				</div> 
				<div id="columnCenter"> 
					<div id="center">
						<form id="carinfo" name="carinfo" method="post"> <!--action="?"-->
						<fieldset><legend>Legalization of Autmoibles</legend>
						<table>
							<tbody>
								<tr>
									<td>First Name:</td><td><input type="text" name="firstname" maxlength="30"></td>
								</tr>
								<tr>
									<td>Last Name:</td><td><input type="text" name="lastname" maxlength="30"></td>
								</tr>
								<tr>
									<td>Number:</td><td><input type="text" name="number" maxlength="20"></td>
								</tr>
								<tr>
									<td>Email:</td><td><input type="text" name="email" maxlength="35"></td>
								</tr>
								<tr>
									<td>City:</td><td><input type="text" name="city" maxlength="30"></td>
								</tr>
								<tr>
									<td>State:</td><td><select name="state" size="1">
									<option selected value=""></option>
									<option value="AL">Alabama</option>
									<option value="AK">Alaska</option>
									<option value="AZ">Arizona</option>
									<option value="AR">Arkansas</option>
									<option value="CA">California</option>
									<option value="CO">Colorado</option>
									<option value="CT">Connecticut</option>
									<option value="DE">Delaware</option>
									<option value="FL">Florida</option>
									<option value="GA">Georgia</option>
									<option value="HI">Hawaii</option>
									<option value="ID">Idaho</option>
									<option value="IL">Illinois</option>
									<option value="IN">Indiana</option>
									<option value="IA">Iowa</option>
									<option value="KS">Kansas</option>
									<option value="KY">Kentucky</option>
									<option value="LA">Louisiana</option>
									<option value="ME">Maine</option>
									<option value="MD">Maryland</option>
									<option value="MA">Massachusetts</option>
									<option value="MI">Michigan</option>
									<option value="MN">Minnesota</option>
									<option value="MS">Mississippi</option>
									<option value="MO">Missouri</option>
									<option value="MT">Montana</option>
									<option value="NE">Nebraska</option>
									<option value="NV">Nevada</option>
									<option value="NH">New Hampshire</option>
									<option value="NJ">New Jersey</option>
									<option value="NM">New Mexico</option>
									<option value="NY">New York</option>
									<option value="NC">North Carolina</option>
									<option value="ND">North Dakota</option>
									<option value="OH">Ohio</option>
									<option value="OK">Oklahoma</option>
									<option value="OR">Oregon</option>
									<option value="PA">Pennsylvania</option>
									<option value="RI">Rhode Island</option>
									<option value="SC">South Carolina</option>
									<option value="SD">South Dakota</option>
									<option value="TN">Tennessee</option>
									<option value="TX">Texas</option>
									<option value="UT">Utah</option>
									<option value="VT">Vermont</option>
									<option value="VA">Virginia</option>
									<option value="WA">Washington</option>
									<option value="WV">West Virginia</option>
									<option value="WI">Wisconsin</option>
									<option value="WY">Wyoming</option>
									</select></td>
								</tr>
														
									<tr><td>Do you have the following:</td></tr>
									<tr><td><input type="checkbox" name="mandatory" value="license" /></td><td>Driver's License</td></tr>
									<tr><td><input type="checkbox" name="mandatory" value="title" /></td><td>Vehicle Title</td></tr>
									<tr><td><input type="checkbox" name="mandatory" value="receipt" /></td><td>Utility Receipt from Mexico showing recieving address</td></tr>
									<tr><td><input type="submit" value="Submit" /></td></tr>
																	
									<tr><td>Make</td>
									<td>
									<select name="category" id="category" onchange="javascript: dropdownlist(this.options[this.selectedIndex].value);">
									<option value="">Select Make</option>
									<option value="bmw">BMW</option>
									<option value="buick">Buick</option>
									<option value="cadillac">Cadillac</option>
									<option value="chevrolet">Chevrolet</option>
									<option value="chryler">Chrysler</option>
									<option value="dodge-plymouth">Dodge-Plymouth</option>
									<option value="ford">Ford</option>
									<option value="gmc">GMC</option>
									<option value="honda">Honda</option>
									<option value="isuzu">Isuzu</option>
									<option value="lincoln">Lincoln</option>
									<option value="mercedez">Mercedez</option>
									<option value="mercury">Mercury</option>
									<option value="mitsubishi">Mitsubishi</option>
									<option value="nissan">Nissan</option>
									<option value="oldsmobile">Oldsmobile</option>
									<option value="pontiac">Pontiac</option>
									<option value="saturn">Saturn</option>
									<option value="toyota">Toyota</option>
									<option value="volkswagen">Volkswagen</option>
									</select>
									</td>
									</tr>
								
									<tr>
									<td>Model:</td>
									<td>
									<script type="text/javascript" language="JavaScript">
										document.write('<select name="subcategory"><option value="">Select Sub-Category</option></select>')
									</script></td>
						</fieldset>
						</form>
						</tbody>
					</table>						
					</div>
				</div> 
		</div> 
			</div> 
		</div>	
	<div class="footer"> 
		
	</div> 	
</body> 
</html>

--cars.js contained in next post--

Sql Based In The Dropdown List Value

Similar Tutorials

View Content

Hi,
I have a table displaying records from query, now i want to have a small dropdown listbox on the top right corner called "sort by". The list index would be "date modified", "Price(High-low)" and "Price(Low-High)".
I want my order by clause in my SQL to change according to the values in the dropdownlistbox.
Code:

SELECT * FROM Cars
ORDER BY date modified

How can i pass my selected value from the listbox to my PHP SQL statement?
Thanks

Newb Trying To Add To Dropdown List

Similar Tutorials

View Content

I play a text game that allows you to input javascript into a "QuickBar" set up for links. I currently have a couple of short "links" set up to fill in a form for me, but I am trying to do something else now.

An example for one I use that fills in a specific blank text area:
javascript: var doc=document; if(window.frames.length>0) doc=window.main.document; doc.getElementsByName('light')[0].value=40; doc.getElementsByName('Okay')[0].click(); end();

On a different page than the empty text areas, there is a fixed drop down select with 5 choices, and I would like to set up a 6th choice using the same insert javascript "link" system.

Code:

<tr>
<td>Map size:</td>
<td><select name="map_size">

<option label="7x7" value="7">7x7</option>
<option label="9x9" value="9">9x9</option>
<option label="11x11" value="11">11x11</option>
<option label="13x13" value="13">13x13</option>
<option label="15x15" value="15" selected="selected">15x15</option>

</select></td>
</tr>

What I would like to do is set up another javascript "link" that will add a "30x30" option to that list and be able to select it after clicking the javascript "link."

Retrieve Dropdown List Selected Id ?

Similar Tutorials

View Content

HI
I'm using this form in my site, but I want to amend it so the form updates based on the option ID, not the option Value.

This will make it easier for me to save the correct data in the value field..

Any ideas ?

PHP Code:
<html>
<head>
<script type="text/javascript">
function setOptions(chosen) {
var selbox = document.myform.opttwo;

selbox.options.length = 0;
if (chosen == " ") {
  selbox.options[selbox.options.length] = new Option('Please select one of the options above first',' ');

}
if (chosen == "1") {
  selbox.options[selbox.options.length] = new Option('first choice - option one','oneone');
  selbox.options[selbox.options.length] = new Option('first choice - option two','onetwo');
}
if (chosen == "2") {
  selbox.options[selbox.options.length] = new Option('second choice - option one','twoone');
  selbox.options[selbox.options.length] = new Option('second choice - option two','twotwo');
}
if (chosen == "3") {
  selbox.options[selbox.options.length] = new Option('third choice - option one','threeone');
  selbox.options[selbox.options.length] = new Option('third choice - option two','threetwo');
}
}
</script>
</head>
<body>
<form name="myform"><div class="centre">
<select name="optone" size="1"
onchange="setOptions(document.myform.optone.options[document.myform.optone.selectedIndex].value);">
<option id="0" value=" " selected="selected"> </option>
<option id="1" value="1">First Option</option>
<option id="2" value="2">Second Choice</option>
<option id="3" value="3">Third Choice</option>
</select><br /> <br />
<select name="opttwo" size="1">
<option value=" " selected="selected">Please select one of the options above first</option>
</select>
<input type="button" name="go" value="Value Selected"
onclick="alert(document.myform.opttwo.options[document.myform.opttwo.selectedIndex].value);">
</div></form>
</body>
</html>

So how do I get CHOSEN to equal the ID not the value ?

Thanks

Dynamic Dropdown List Script

Similar Tutorials

View Content

hello,

i am writing a script that will update a dropdown list based on the selection of a previous list.

the script is run by a PHP script, so instead of posting the PHP, i will post an example client-side script.

the hierachy is:

category, sub category, brand (but sometimes there exists no sub category and the PHP script queries and adds brands instead)
everything works correctly, except for one major issue: you can not change the selection of the third (brand) box

this could be an easy fix for some coders, but i am not experienced in javascript and could really use some help.

here is an example script, sorry it is so long
Code:

<script language="javascript"> 
 
 
function fillprodCat(){ 
 // this function is used to fill the category list on load
addOption(document.prodCatSubCatBrand_list.add_prodCat, "1", "HD Video");
addOption(document.prodCatSubCatBrand_list.add_prodCat, "2", "Components");
addOption(document.prodCatSubCatBrand_list.add_prodCat, "3", "Audiophiles");
addOption(document.prodCatSubCatBrand_list.add_prodCat, "4", "Speakers");
addOption(document.prodCatSubCatBrand_list.add_prodCat, "5", "Whole House Audio");
addOption(document.prodCatSubCatBrand_list.add_prodCat, "6", "Furniture");
addOption(document.prodCatSubCatBrand_list.add_prodCat, "7", "Accessories");
}
 
function SelectprodSubCat(){
// on selection of category, this is called
 
removeAllOptions(document.prodCatSubCatBrand_list.add_prodSubCat);
 
if(document.prodCatSubCatBrand_list.add_prodCat.value == "1"){
document.prodCatSubCatBrand_list.add_prodSubCat.disabled=false;
addOption(document.prodCatSubCatBrand_list.add_prodSubCat,"1", "HD Television");
addOption(document.prodCatSubCatBrand_list.add_prodSubCat,"2", "HD Projectors");
addOption(document.prodCatSubCatBrand_list.add_prodSubCat,"3", "Screens");
}
if(document.prodCatSubCatBrand_list.add_prodCat.value == "2"){
document.prodCatSubCatBrand_list.add_prodSubCat.disabled=false;
addOption(document.prodCatSubCatBrand_list.add_prodSubCat,"4", "Turntables");
addOption(document.prodCatSubCatBrand_list.add_prodSubCat,"5", "Receivers, amps & preamps");
addOption(document.prodCatSubCatBrand_list.add_prodSubCat,"6", "DVD & CD players");
}
if(document.prodCatSubCatBrand_list.add_prodCat.value == "3"){
document.prodCatSubCatBrand_list.add_prodSubCat.disabled=true;
addOption(document.prodCatSubCatBrand_list.add_prodSubCat,"0", "None");
}
if(document.prodCatSubCatBrand_list.add_prodCat.value == "4"){
document.prodCatSubCatBrand_list.add_prodSubCat.disabled=true;
addOption(document.prodCatSubCatBrand_list.add_prodSubCat,"0", "None");
}
if(document.prodCatSubCatBrand_list.add_prodCat.value == "5"){
document.prodCatSubCatBrand_list.add_prodSubCat.disabled=true;
addOption(document.prodCatSubCatBrand_list.add_prodSubCat,"0", "None");
}
if(document.prodCatSubCatBrand_list.add_prodCat.value == "6"){
document.prodCatSubCatBrand_list.add_prodSubCat.disabled=false;
addOption(document.prodCatSubCatBrand_list.add_prodSubCat,"8", "AV Furniture");
addOption(document.prodCatSubCatBrand_list.add_prodSubCat,"7", "Armchairs");
}
if(document.prodCatSubCatBrand_list.add_prodCat.value == "7"){
document.prodCatSubCatBrand_list.add_prodSubCat.disabled=false;
addOption(document.prodCatSubCatBrand_list.add_prodSubCat,"10", "Power Conditioning");
addOption(document.prodCatSubCatBrand_list.add_prodSubCat,"9", "Remote Controls");
addOption(document.prodCatSubCatBrand_list.add_prodSubCat,"11", "Mounts");
addOption(document.prodCatSubCatBrand_list.add_prodSubCat,"12", "Cables & Interconnects");
}
}
 
function SelectprodBrand(){
// ON selection of category, sub category, or brand this is called
 
removeAllOptions(document.prodCatSubCatBrand_list.add_prodBrand);
if(document.prodCatSubCatBrand_list.add_prodCat.value == "1"){
if(document.prodCatSubCatBrand_list.add_prodSubCat.value == "1"){
document.prodCatSubCatBrand_list.add_prodBrand.disabled=false;
addOption(document.prodCatSubCatBrand_list.add_prodBrand,"1", "Hitachi");
addOption(document.prodCatSubCatBrand_list.add_prodBrand,"2", "JVC");
addOption(document.prodCatSubCatBrand_list.add_prodBrand,"3", "Panasonic");
addOption(document.prodCatSubCatBrand_list.add_prodBrand,"4", "Pioneer");
addOption(document.prodCatSubCatBrand_list.add_prodBrand,"5", "Samsung");
addOption(document.prodCatSubCatBrand_list.add_prodBrand,"6", "Sharp");
}

if(document.prodCatSubCatBrand_list.add_prodSubCat.value == "2"){
document.prodCatSubCatBrand_list.add_prodBrand.disabled=false;
addOption(document.prodCatSubCatBrand_list.add_prodBrand,"7", "Epson");
addOption(document.prodCatSubCatBrand_list.add_prodBrand,"8", "JVC");
}

if(document.prodCatSubCatBrand_list.add_prodSubCat.value == "3"){
document.prodCatSubCatBrand_list.add_prodBrand.disabled=false;
addOption(document.prodCatSubCatBrand_list.add_prodBrand,"9", "Da-Lite");
}
}
if(document.prodCatSubCatBrand_list.add_prodCat.value == "2"){
if(document.prodCatSubCatBrand_list.add_prodSubCat.value == "4"){ 
document.prodCatSubCatBrand_list.add_prodBrand.disabled=false;
addOption(document.prodCatSubCatBrand_list.add_prodBrand,"10", "Music Hall Audio");
}

if(document.prodCatSubCatBrand_list.add_prodSubCat.value == "5"){ 
document.prodCatSubCatBrand_list.add_prodBrand.disabled=false;
addOption(document.prodCatSubCatBrand_list.add_prodBrand,"11", "Arcam");
addOption(document.prodCatSubCatBrand_list.add_prodBrand,"12", "Bose");
addOption(document.prodCatSubCatBrand_list.add_prodBrand,"13", "Integra");
addOption(document.prodCatSubCatBrand_list.add_prodBrand,"14", "Krell");
addOption(document.prodCatSubCatBrand_list.add_prodBrand,"15", "Pioneer");
}

if(document.prodCatSubCatBrand_list.add_prodSubCat.value == "6"){ 
document.prodCatSubCatBrand_list.add_prodBrand.disabled=true;
addOption(document.prodCatSubCatBrand_list.add_prodBrand,"", "None");
}
}
if(document.prodCatSubCatBrand_list.add_prodCat.value == "3"){
if(document.prodCatSubCatBrand_list.add_prodSubCat.value == "0"){
document.prodCatSubCatBrand_list.add_prodBrand.disabled=true;
addOption(document.prodCatSubCatBrand_list.add_prodBrand,"", "None");
}
}
if(document.prodCatSubCatBrand_list.add_prodCat.value == "4"){
if(document.prodCatSubCatBrand_list.add_prodSubCat.value == "0"){
document.prodCatSubCatBrand_list.add_prodBrand.disabled=false;
addOption(document.prodCatSubCatBrand_list.add_prodBrand,"16", "Canton");
addOption(document.prodCatSubCatBrand_list.add_prodBrand,"17", "Dali");
addOption(document.prodCatSubCatBrand_list.add_prodBrand,"18", "Tru Audio");
addOption(document.prodCatSubCatBrand_list.add_prodBrand,"19", "Von Schweikert");
}
}
if(document.prodCatSubCatBrand_list.add_prodCat.value == "5"){
if(document.prodCatSubCatBrand_list.add_prodSubCat.value == "0"){
document.prodCatSubCatBrand_list.add_prodBrand.disabled=false;
addOption(document.prodCatSubCatBrand_list.add_prodBrand,"20", "Elan");
}
}
if(document.prodCatSubCatBrand_list.add_prodCat.value == "6"){
if(document.prodCatSubCatBrand_list.add_prodSubCat.value == "8"){
document.prodCatSubCatBrand_list.add_prodBrand.disabled=false;
addOption(document.prodCatSubCatBrand_list.add_prodBrand,"21", "BDI");
addOption(document.prodCatSubCatBrand_list.add_prodBrand,"22", "Bello");
}

if(document.prodCatSubCatBrand_list.add_prodSubCat.value == "7"){ 
document.prodCatSubCatBrand_list.add_prodBrand.disabled=true;
addOption(document.prodCatSubCatBrand_list.add_prodBrand,"", "None");
}
}
if(document.prodCatSubCatBrand_list.add_prodCat.value == "7"){ 
if(document.prodCatSubCatBrand_list.add_prodSubCat.value == "10"){
document.prodCatSubCatBrand_list.add_prodBrand.disabled=false;
addOption(document.prodCatSubCatBrand_list.add_prodBrand,"23", "Richard Gray's Power Company");
}

if(document.prodCatSubCatBrand_list.add_prodSubCat.value == "9"){ 
document.prodCatSubCatBrand_list.add_prodBrand.disabled=true;
addOption(document.prodCatSubCatBrand_list.add_prodBrand,"", "None");
}

if(document.prodCatSubCatBrand_list.add_prodSubCat.value == "11"){ 
document.prodCatSubCatBrand_list.add_prodBrand.disabled=true;
addOption(document.prodCatSubCatBrand_list.add_prodBrand,"", "None");
}

if(document.prodCatSubCatBrand_list.add_prodSubCat.value == "12"){
document.prodCatSubCatBrand_list.add_prodBrand.disabled=false;
addOption(document.prodCatSubCatBrand_list.add_prodBrand,"24", "Analysis Plus");
addOption(document.prodCatSubCatBrand_list.add_prodBrand,"25", "Tributaries");
}
}
}
 
function removeAllOptions(selectbox)
{
	var i;
	for(i=selectbox.options.length-1;i>=0;i--)
	{
		//selectbox.options.remove(i);
		selectbox.remove(i);
	}
}
 
 
function addOption(selectbox, value, text )
{
	var optn = document.createElement("OPTION");
	optn.text = text;
	optn.value = value;
 
	selectbox.options.add(optn);
}
 
</script>

please let me know if this is too confusing to follow (because it certainly looks like it could be), and i will attempt to clean it up

Onchange Event Of Dropdown List

Similar Tutorials

View Content

Hi all,

I want to reload an html page onChange event of dropdown list and retain the old values filled in the page.

Plz help.....

Creating A Dropdown List To Navigate Through My Website

Similar Tutorials

View Content

I am pretty much learning Javascript as I am building my website so I apologize for this being such a simple question.

I am trying to put on my homepage a dropdown list of 4 options where each option would bring you to a different page on my website.

So far, I have this:

<option value=""></option>
<option value ="1">I would like to process credit cards face to face with my customers.</option>
<option value = "2">I would like to process credit cards online.</option>
<option value = "3">I would like to process credit cards on the road, wherever my customers are.</option>

which I built in Dreamweaver.

What I would like it to do is when the user clicks on an option, it brings them to one of the pages on my site.

Can someone please give me some direction as to how to do this?

Thank you in advance for the help.

Dropdown List To Show The Pubs In The Town

Similar Tutorials

View Content

hi,
I would like to show a list of pubs in a town that the user has selected from the drop down list

http://www.mypubspace.com/dashtest/order.html

it is all there working but in a different way

If you type Brighton into the Town search, it shows a list of pubs in that town, GREAT!

If you click the 'show towns list' link, a drop down appears, (this is where my problem is) When you click the town, I would like to get the list of pubs in that town

basically get rid of the form where you type in the box and click the button

here is my code HTML and Javascript
Code:

<html>
<body>

<script language="javascript" type="text/javascript">
<!-- 
//Browser Support Code
function ajaxFunction(){
	var townRequest;  // The variable that makes Ajax possible!
	
	try{
		// Opera 8.0+, Firefox, Safari
		townRequest = new XMLHttpRequest();
	} catch (e){
		// Internet Explorer Browsers
		try{
			townRequest = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			try{
				townRequest = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e){
				// Something went wrong
				alert("Your browser broke!");
				return false;
			}
		}
	}
	// Create a function that will receive data sent from the server
	townRequest.onreadystatechange = function(){
		if(townRequest.readyState == 4){
			var ajaxDisplay = document.getElementById('ajaxDiv');
			ajaxDisplay.innerHTML = townRequest.responseText;
		}
	}
	var name = document.getElementById('name').value;
	var county = document.getElementById('county').value;
	var town = document.getElementById('town').value;
	var queryString = "?name=" + name + "&county=" + county + "&town=" + town;
	townRequest.open("GET", "http://www.mypubspace.com/dashtest/pubs.php" + queryString, true);
	townRequest.send(null); 
}



function townlistFunction(){
	var ajaxRequest;  // The variable that makes Ajax possible!
	
	try{
		// Opera 8.0+, Firefox, Safari
		ajaxRequest = new XMLHttpRequest();
	} catch (e){
		// Internet Explorer Browsers
		try{
			ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			try{
				ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e){
				// Something went wrong
				alert("Your browser broke!");
				return false;
			}
		}
	}
	// Create a function that will receive data sent from the server
	ajaxRequest.onreadystatechange = function(){
		if(ajaxRequest.readyState == 4){
			var ajaxDisplay = document.getElementById('ajaxTownlist');
			ajaxDisplay.innerHTML = ajaxRequest.responseText;
		}
	}
	ajaxRequest.open("GET", "http://www.mypubspace.com/dashtest/town-select.php", true);
	ajaxRequest.send(null); 
}

function countylistFunction(){
	var ajaxRequest;  // The variable that makes Ajax possible!
	
	try{
		// Opera 8.0+, Firefox, Safari
		ajaxRequest = new XMLHttpRequest();
	} catch (e){
		// Internet Explorer Browsers
		try{
			ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			try{
				ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e){
				// Something went wrong
				alert("Your browser broke!");
				return false;
			}
		}
	}
	// Create a function that will receive data sent from the server
	ajaxRequest.onreadystatechange = function(){
		if(ajaxRequest.readyState == 4){
			var ajaxDisplay = document.getElementById('ajaxCountylist');
			ajaxDisplay.innerHTML = ajaxRequest.responseText;
		}
	}
	ajaxRequest.open("GET", "http://www.mypubspace.com/dashtest/county-select.php", true);
	ajaxRequest.send(null); 
}

function MM_jumpMenu(targ,selObj,restore){ //v3.0
  eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
  if (restore) selObj.selectedIndex=0;
}

//-->
</script>

<a href="#" onClick="townlistFunction();">show towns list</a>
<a href="#" onClick="countylistFunction();">show counties list</a>
<div id="ajaxTownlist"></div>
<div id="ajaxCountylist"></div>



<form name='myForm'>
Pub Name: <input type='text' id='name' /> <br />
County: <input type='text' id='county' />
<br />
Town: <input type='text' id='town' />
<input type='button' onclick='ajaxFunction()' value='Query MySQL' />
</form>
<div id='ajaxDiv'></div>
</body>
</html>

here is my pubs.php code
Code:

<?php
$dbhost = "xxx";
$dbuser = "xxx";
$dbpass = "xxx";
$dbname = "xxx";
	//Connect to MySQL Server
mysql_connect($dbhost, $dbuser, $dbpass);
	//Select Database
mysql_select_db($dbname) or die(mysql_error());
	// Retrieve data from Query String
$name = $_GET['rsPubName'];
$sex = $_GET['rsTown'];
$wpm = $_GET['rsCounty'];
	// Escape User Input to help prevent SQL Injection
$name = mysql_real_escape_string($name);
$town = mysql_real_escape_string($town);
$county = mysql_real_escape_string($county);
	//build query
$query = "SELECT * FROM pubs WHERE rsTown = '$town'";
$qry_result = mysql_query($query) or die(mysql_error());

	//Build Result String
$display_string = "<table>";
$display_string .= "<tr>";
$display_string .= "<th>Region</th>";
$display_string .= "<th>Pub Name</th>";
$display_string .= "<th>Town</th>";
$display_string .= "<th>County</th>";
$display_string .= "</tr>";

	// Insert a new row in the table for each person returned
while($row = mysql_fetch_array($qry_result)){
	$display_string .= "<tr>";
	$display_string .= "<td>$row[Region]</td>";
	$display_string .= "<td>$row[rsPubName]</td>";
	$display_string .= "<td>$row[rsTown]</td>";
	$display_string .= "<td>$row[rsCounty]</td>";
	$display_string .= "</tr>";
	
}
$display_string .= "</table>";
echo $display_string;
?>

here is my town_select.php code
Code:

<?php
$dbhost = "xxx";
$dbuser = "xxx";
$dbpass = "xxx";
$dbname = "xxx";
	//Connect to MySQL Server
mysql_connect($dbhost, $dbuser, $dbpass);
	//Select Database
mysql_select_db($dbname) or die(mysql_error());
	// Retrieve data from Query String
$town = $_GET['rsTown'];
	// Escape User Input to help prevent SQL Injection

$town = mysql_real_escape_string($town);
//build query
$query = "SELECT DISTINCT rsTown, COUNT(PUBID) As PubCount FROM pubs GROUP BY rsTown  ORDER BY rsTown ASC";
$qry_result = mysql_query($query) or die(mysql_error());

	// Insert a new row in the table for each person returned
		  

	$display_string .= "<form name=\"form3\" method=\"post\" action=\"\">";
	$display_string .= "<select name=\"menu2\" onChange=\"MM_jumpMenu('parent',this,0)\" class=\"textbox\">";
	$display_string .= "<option value=\"\">Search by Town...</option>";
while($row = mysql_fetch_array($qry_result)){
	$display_string .= '<option value="rsTown='.$row['rsTown'].'" onclick=\"ajaxFunction()\" id=\"town\">'.$row['rsTown'].'&nbsp;('.$row['PubCount'].')</option>';
}
	$display_string .= "</select>";
	$display_string .= "</form>";

echo $display_string;
?>

Dropdown List Doesnt Change Image

Similar Tutorials

View Content

Hey i am using a dropdown list to change an image but i doesnt work

Javascript:

Code:

addEventListener("load", configurator, false);

function configurator() {
    var model = document.getElementById("Model").value
    var afbeelding = document.getElementById("modelafbeelding")

    

    switch (model) {
        case "Audi A1":

            var foto = "./images/audia1.png"
       
            afbeelding.innerHTML = ("<img class='sizedgarage' src='" + foto + "'>");
            break;
        case "Audi A3":

            var foto = "./images/audia3.png"

            afbeelding.innerHTML = ("<img class='sizedgarage' src='" + foto + "'>");
            break;
        case "Audi A4":

            var foto = "./images/audia4.png"

            afbeelding.innerHTML = ("<img class='sizedgarage' src='" + foto + "'>");
            break;
        case "Audi A5":

            var foto = "./images/audia5.png"

            afbeelding.innerHTML = ("<img class='sizedgarage' src='" + foto + "'>");
            break;
        case "Audi A6":

            var foto = "./images/audia6.png"

            afbeelding.innerHTML = ("<img class='sizedgarage' src='" + foto + "'>");
            break;
        case "Audi R8":

                var foto = "./images/audir8.png"

        afbeelding.innerHTML = ("<img class='sizedgarage' src='" + foto + "'>");
            break;


    }
}

HTML:

Code:

   <tr>                    
                        <td><select id="Model" name="Model">
                            <option>Audi A1</option>
                            <option>Audi A3</option>
                            <option>Audi A4</option>
                            <option>Audi A5</option>
                            <option>Audi A6</option>
                            <option>Audi R8</option>
                        </select></td>
                        <div id="modelafbeelding"></div>
                    </tr>

Opening Items From A Dropdown List In A New Window

Similar Tutorials

View Content

I haven't been able to find anything about this on here or clear direction on the net, so I'm hoping y'all can help me out.

I have a dropdown list that I use to navigate pages on an external website. Currently, my dropdown list will open a new page in my current window. I want to be able to open the page in a new window.

I'm sure it's a simple fix, but being somewhat of a noob to Javascript I can't figure out how to solve it.

Here's what I have for the navigation dropdown:

Code:

<FORM 
     ACTION="../cgi-bin/redirect.pl" 
     METHOD=POST onSubmit="return dropdown(this.gourl)">
<SELECT NAME="gourl">

<OPTION VALUE="">Make Your Selection
<OPTION VALUE="http://url1.html>Choice 1
<OPTION VALUE="http://url2.html>Choice 2
<OPTION VALUE="http://url3.html">Choice 3

</SELECT>

<INPUT TYPE=SUBMIT VALUE="Go">
</FORM>

And here's what I have in the header:

Code:

<SCRIPT TYPE="text/javascript">
<!--
function dropdown(mySel)
{
var myWin, myVal;
myVal = mySel.options[mySel.selectedIndex].value;
if(myVal)
   {
   if(mySel.form.target)myWin = parent[mySel.form.target];
   else myWin = window;
   if (! myWin) return true;
   myWin.location = myVal;
   }
return false;
}
//-->
</SCRIPT>

Any ideas?

Reload Dropdown List Without Refreshing Page

Similar Tutorials

View Content

How can I execute this:

From the dropdown list build up from mysql database (say a list of fruits).

I select "Add New Fruit". This triggers it to either have a modal form to add new fruit or a table form.

Once submitted, Select dropdown list RELOADS including the newly added data (fruit) without reloading the whole page which contains other form control such as textbox.

Changing The Default Of A Dropdown List Depending On The Url You Are Coming From

Similar Tutorials

View Content

I have a form that I am using for several different pages as they are exactly the same... however at the top you must make a choice from the drop down box that then shows the appropriate fields to fill in.

Can I make the drop down default to a certain option depending on which page they are coming from?

Javascript Config File + Javascript Class/functions File - Variables Not Found

Similar Tutorials

View Content

All --

I have a JavaScript config file called gameSetting.js which contains a bunch of variables which configures a particular game.

I also have a shared JavaScript library which uses the variables in gameSetting.js, which I include like so:

<script type="text/javascript" src="gameSetting.js" ></script>
<script type="text/javascript" src="gameLibrary.js" ></script>

In gameSetting.js I have:

$(document).ready(function()
{
// call some functions / classes in gameLibrary.js
}

in Firefox, Safari, and Chrome, this works fine. However, in IE, when it's parsing gameSetting.js, it complains that the functions that live in gameLibrary.js aren't defined. When it gets to parsing gameLibrary.js, the variables in gameSetting.js are reported as not being defined.

I've tried dynamically bootstrapping the gameLibrary file using this function in document.ready for dynamic load...

$.getScript("gameLibrary.js");

However, the same problem still happens in IE, where when it parses the files individually it's not taking into context the file/variables that came before, so it's not an out of load order problem.

My options a

1) collapsing all the functions in gameLibrary.js and variables in gameSetting.js into one file. However, this is not practical because this is dealing with literally hundreds of games, and having a gameLibrary.js in ONE location for ONE update is what makes most logical sense.

2) figure out a way to get this to work where variables in file1 are accessible to file2 in IE (as it seems they are in other browsers).

jQuery seems to be able to have multiple plugins that all refer to the based jQuery-1.3.2.js, so I know there is a way to get this to work.

Help appreciated.

Nero