load database values into drop down with radio buttons

vasox56 · May 8, 2007

hello there.. i currently use this method to preload airport names into my drop down..

Code:

<%
set myconn = Server.CreateObject("ADODB.connection")
connection = "Provider=Microsoft.Jet.OLEDB.4.0; Data Source=" &_
Server.MapPath("/_db_import/prices.mdb") & ";"
myconn.open (connection)

set rs=Server.CreateObject("ADODB.recordset")
rs.Open "Select airportNAME from tblAIRPORT", myconn
%>

then i use..

Code:

<% 
if not rs.eof then
do until rs.eof 
%>
<option class="grey" value="<%=rs("airportNAME")%>"><%=rs("airportNAME")%></option>
<%
rs.movenext
loop
end if
%>

i would like to expand on this.

i would like a new set of values (from a different table in my database) to be loaded into my drop down when my user clicks a radio button.

here is the page at the moment.. it loads the values correctly and the radio buttons are ready..

http://www.londonheathrowcars.com/new.asp

if i wanted to load the field hotelNAME from the table tblHotel into the drop down when the hotel radio is clicked.. how would i do it?

ive tried using some pure javascript and holding the values in an array but i would rather pre load them from my database..

here is the page code

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
</HEAD>
<%
set myconn = Server.CreateObject("ADODB.connection")
connection = "Provider=Microsoft.Jet.OLEDB.4.0; Data Source=" &_
Server.MapPath("/_db_import/prices.mdb") & ";"
myconn.open (connection)

set rs=Server.CreateObject("ADODB.recordset")
rs.Open "Select airportNAME from tblAIRPORT", myconn
%>
<BODY>
<form>

<p>
	<input type="radio" name="chooseList" value="C1">&nbsp;&nbsp;Airports<br>
	<input type="radio" name="chooseList" value="C2">&nbsp;&nbsp;Hotels<br>
	<input type="radio" name="chooseList" value="C3">&nbsp;&nbsp;Seaports<br>
	<input type="radio" name="chooseList" value="C4">&nbsp;&nbsp;Misc
</p>

<p><select class="droppy" name="postcode">
<option value="">...</option>
<% 
if not rs.eof then
do until rs.eof 
%>
<option class="grey" value="<%=rs("airportNAME")%>"><%=rs("airportNAME")%></option>
<%
rs.movenext
loop
end if
%>
</select></p>
</form>

</BODY>
</HTML>

Sheco · May 8, 2007

ASP logic is primarily used to build HTML but really it is just writing Response data... so why not have it write JavaScript?

By having your ASP dynamically write four JavaScript arrays, you can then use client-side script to add and remove array elements as options to the select dropdown.

vasox56 · May 8, 2007

hi.. i am actually doing that now.. this javascript changed the drop down when radio buttons were pressed..

i would prefer however if the user can choose a category using another drop down.. like this..

http://londonheathrowcars.com/page.htm

i just need some help removing the radio button code and puttin that command on the first drop down.. i know this post should now be in the javascript section.. but if you could give me a hand i would be most grateful

thank you.. here is the page code at the moment..

Code:

<html>
<head>
<title>Loading list dynamically</title>
<script type="text/javascript">
// an array to hold the contents of all lists
var lists = [
	["C1","WC1"],
	["C1","WC2"],
	["C2","Waterloo"],
	["C2","Kings Cross"],
	["C3","Hilton Kensington"],
	["C3","Ritz Kensington"],
	["C4","London Gatwick"],
	["C4","London Stansted"],
	["C5","Southampton"],	
	["C5","Portsmouth"],
	["C6","Big Ben"],
	["C6","Buckingham Palace"],
	["C7","Reading"],
	["C7","Brighton"],
	["C7","Liverpool"],
	["C7","Southend"]
];

// onclick handler for radio buttons
function switchList() {
	
	var listId = this.value;	

	// get rid of current items in list
	var list = document.getElementById("theList");
	while (list.options.length > 0) {
		list.removeChild(list.options[0]);
	}
	
	var opt = new Option();

	
	for (var i=0; i < lists.length; i++) {
		if (lists[i][0] == listId) {
			var opt = new Option();
			opt.value = lists[i][1];
			opt.text = lists[i][1];
			list.options.add(opt);
		}
	}
}

// add onclick handler to radio buttons
window.onload = function () {
	var inps = document.getElementsByTagName("input");
	for (var i=0; i < inps.length; i++) {
		if (inps[i].type.toLowerCase()== "radio") {
			inps[i].onclick = switchList;
		}
	}
}


</script>
</head>
<body>

<select id="theList" name="A" name="D1" size="1" style="width:150px;">
<option>Please Select..</option>
<option name="chooseList" value="C1">London Postcodes</option>
<option name="chooseList" value="C2">Train Stations</option>
<option name="chooseList" value="C3">Hotels</option>
<option name="chooseList" value="C4">Airports</option>
</select>
<br><br>
<select id="theList" name="A" name="D1" size="6" style="width:150px;">
<option selected="selected" value="Place">..</option>
</select>

</body>
</html>

Sheco · May 8, 2007

Code:

<html>
<head>
<title>Loading list dynamically</title>
<script type="text/javascript">
  // an array to hold the contents of all lists
  var DataArray = new Array();
  DataArray[0] = new Array("C1","WC1");
  DataArray[1] = new Array("C1","WC2");
  DataArray[2] = new Array("C2","Waterloo");
  DataArray[3] = new Array("C2","Kings Cross");
  DataArray[4] = new Array("C3","Hilton Kensington");
  DataArray[5] = new Array("C3","Ritz Kensington");
  DataArray[6] = new Array("C4","London Gatwick");
  DataArray[7] = new Array("C4","London Stansted");


  // swap contents of second list
  function switchList(List1) 
  { var i, k;
    var List2 = document.getElementById("SecondList");
    var TypeOfValues = List1.options[List1.selectedIndex].value;

    //Remove all items in SecondList listbox
    //Start removing items at end and work back to front
    k = List2.options.length - 1;
    for (i = k; i >= 0; i--) 
    { List2.options[i] = null;
    }

    k = 0;
    for(i = 0; i < DataArray.length; i++)
    { if (DataArray[i][0] == TypeOfValues)
      { List2.options[k] = new Option(DataArray[i][1], DataArray[i][1]);  
        k++;
      }
    }
  }
</script>
</head>
<body>
  <select id="FirstList" name="FirstList" style="width:150px;" onChange="switchList(this);">
    <option value="">Please Select..</option>
    <option value="C1">London Postcodes</option>
    <option value="C2">Train Stations</option>
    <option value="C3">Hotels</option>
    <option value="C4">Airports</option>
  </select>
  <br>
  <br>
  <select id="SecondList" name="SecondList" style="width:150px;">
  </select>
</body>
</html>

vasox56 · May 9, 2007

thats really great.. thanks.. ill be customising it so i might need a bit more help but thanks for this.

vasox56 · May 9, 2007

ok i have a question..

you see here..

Code:

DataArray[7] = new Array("C4","London Stansted");

i know that C4 is the group and London Stansted will be used as the string in the drop down..

i presume that when i send that value to my server it will be sent as "London Stansted"

i dont want this.. i want to assign my own value to that.. like you can in traditional drop downs..

eg

Code:

<option value="a1">London Stansted</option>

the reason being the values in my database wont exactly match the string in the drop down.. a lot of the time the values will need to be numbers.. can i do this with the code you gave me?

Sheco · May 9, 2007

Yeah, first change the DataArray to add a third element to the second array dimension.
[tt]
DataArray[0] = new Array("C1","WC1"[red], "WC1"[/red]);
DataArray[1] = new Array("C1","WC2"[red], "WC2"[/red]);
DataArray[2] = new Array("C2","Waterloo"[red], "Trains1"[/red]);
DataArray[3] = new Array("C2","Kings Cross"[red], "Trains2"[/red]);
DataArray[4] = new Array("C3","Hilton Kensington"[red], "H1"[/red]);
DataArray[5] = new Array("C3","Ritz Kensington"[red], "H2"[/red]);
DataArray[6] = new Array("C4","London Gatwick"[red], "A1"[/red]);
DataArray[7] = new Array("C4","London Stansted"[red], "A2"[/red]);
[/tt]

Then use the new element on the following line line:[tt]
List2.options[k] = new Option(DataArray[1], [red]DataArray[2][/red]);
[/tt]

vasox56 · May 9, 2007

you legend.. thanks

vasox56 · May 10, 2007

one more thing.. suppose these are the values im loading into my drop down..

Code:

DataArray[0] = new Array("C1","EC1 - City, Clerkenwell", "p1");
DataArray[1] = new Array("C1","EC2 - City, Tower", "p2");
DataArray[2] = new Array("C1","EC3 - City, Bank", "p3");
DataArray[3] = new Array("C1","EC4 - City, Holborn", "p4");

DataArray[4] = new Array("C1","WC1 - Bloomsbury", "p5");
DataArray[5] = new Array("C1","WC1 - St Pancras", "p6");
DataArray[6] = new Array("C1","WC2 - Charing Cross", "p7");
DataArray[7] = new Array("C1","WC2 - Covent Garden", "p8");
DataArray[8] = new Array("C1","WC2 - Holborn", "p9");
DataArray[9] = new Array("C1","WC2 - Leicester Square", "p10");

in the drop down they will just look standard.

if i wanted to add css to them how could i...

eg.. underline certain items, make them dif colors.. margins.. etc..

can i do that?

Sheco · May 10, 2007

I tried doing this and had only partial success. Also the behavior was not the same in IE 6 as it was in FireFox.

Client-side script is not my area of expertise so maybe you can use what I came up with as a starting point for more investigation:

Code:

.
.
.
    k = 0;
    for(i = 0; i < DataArray.length; i++)
    { if (DataArray[i][0] == TypeOfValues)
      { List2.options[k] = new Option(DataArray[i][1], DataArray[i][2]);
        if (k % 2)
        { List2.options[k].style.cssText = "color:red;background:yellow;";
        }
        else
        { 
          List2.options[k].style.cssText = "font-Weight:bold;color:green;padding-left:10px;text-decoration:underline";
        } 
        k++;
      }
    }

Sheco · May 10, 2007

Also to clarify that code block I just posted above was what I came up with as a replacement for the following:
[tt]
k = 0;
for(i = 0; i < DataArray.length; i++)
{ if (DataArray[0] == TypeOfValues)
{ List2.options[k] = new Option(DataArray[1], DataArray[1]);
k++;
}
}
[/tt]

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

load database values into drop down with radio buttons

vasox56

Technical User

Sheco

Programmer

vasox56

Technical User

Sheco

Programmer

vasox56

Technical User

vasox56

Technical User

Sheco

Programmer

vasox56

Technical User

vasox56

Technical User

Sheco

Programmer

Sheco

Programmer

Similar threads

Part and Inventory Search

Sponsor