|
JavaScript - Dynamic Selectedindex In Option List Not Working
I knocked up the following code in response to a recent question in this forum, but it has a defect which I can't overcome.
If the user types "a" then the select box is populated with "Choose An Animal...", then the three three animals beginning with A. So far so good. But if the user selects say Albatross and then types the letter b then the option "Bear" is selected rather than "Choose An Animal". Although the code is sel.selectedIndex = 0; (not 1). Question - How can I force the selected index to 0 when a choice has been made previously? Is this a bug - if so it is the same in IE and FF. Code: <html>
<head>
</head>
<body>
<form name = "myform">
<select id = "mysel" onchange = "alertValue()">
</select>
</form>
<script type = "text/javascript">
function alertValue() {
var x = document.getElementById("mysel").value;
alert ("You selected " + x);
}
var words65 = ["Albatross","Anteater", "Aardvark"];
var words66 = ["Bear", "Bat","Bison", "Bobcat"];
var words67 = ["Cat", "Cougar","Canada Goose", "Caribou"];
var key;
document.onkeydown = function(ev) {
ev = ev || event;
key = ev.keyCode;
if ((key >= 65) && (key <= 90)) { // a-z
tmp = eval("words" + key);
var sel = document.getElementById("mysel");
sel.options.length = 0;
sel.options[0] = new Option('Choose An Animal...','',true,true); // text value defaultSelected selected
for (var i=0; i<tmp.length; i++){
if (tmp[i]) {
sel.options[sel.options.length]=new Option(tmp[i],tmp[i],false,false); // text value defaultSelected selected
}
}
sel.selectedIndex = 0; // WHY DOES THIS NOT WORK?
}
}
</script>
</body>
</html>
Similar TutorialsIf i have a drop down list on my website, and i want to use javascript to change its selected value, however, i do not have the id/name attribute of the option i want to select, only have the "value" attribute of the option, can it be done? <select name="category"> <option value="">No Preference</option> <option value="Apples">Apples</option> <option value="Oranges">Oranges</option> <option value="Pears">Pears</option> <option value="Banana">Banana</option> </select> I imagine somehow.. selecting the options and looping through them and match the value. Really new to javascript, can anyone advise? Thanks in advance! I have selectitem list which has name value pairs SelectItem(value, name), i need to iterate in JS and i need to populate in to option list, like below, but it dint work for me. Please any help function loadme(listVle){ // listVle is the List<SelectItem> var ele = document.getElementById('numadts'); for (var i=0;i<listVle.length;i++) { var elOpt = document.createElement('option'); var fldName = listVle.item(i).getAttribute('name'); // This line the problem is elOpt.text = fldName; elOpt.value = fldName; try { ele.add(elOpt, null); } catch(ex) { ele.add(elOpt); } } } and the HTML <BODY> <FORM> <select name="numadts" id="numadts" onclick="loadme()""> </select> </FORM> </BODY> I am getting an error: "document.getElementById("gender") is null" Any ideas how I can get this to work? Code: <head>
<script type="text/javascript">
var selected = document.getElementById("gender").selectedIndex;
var lname = document.getElementById("lastname");
var boyarray=new Array();
boyarray[0]="Joseph James";
boyarray[1]="Robert Michael";
boyarray[2]="Brian Shawn";
boyarray[3]="Joseph Duke";
var boymax=(boyarray.length - 1);
var boychoose = Math.round(Math.random() * boymax);
var girlarray=new Array();
girlarray[0]="Christine Louise";
girlarray[1]="Cheyenne Lynn";
girlarray[2]="Kelly Anne";
girlarray[3]="Julia Marie";
var girlmax=(girlarray.length - 1);
var girlchoose = Math.round(Math.random() * girlmax);
function randomname()
{
if (selected = "2") {
alert((girlarray[girlchoose]) + lname);
}
else if (selected="1") {
alert((boyarray[boychoose]) + lname);
}
else {
alert("Please select a gender.");
}
}
</script>
</head>
<body>
<form onsubmit="randomname(this);">
Last Name:<input type="text" name="lastname" id="lastname"/>
<br/>
Gender:
<select id="gender">
<option value="0">Please select a gender</option>
<option value="1">Boy</option>
<option value="2">Girl</option>
</select>
<br/>
<input type="submit" id="submit" name="submit" value="Submit"/>
</form>
</body>
Please help, My session_type_id is not being passed through?! I get the following error: SessionSel.selectedIndex is undefined JavaScript Code: function confirmsession() {
var SessionID = document.getElementById('session_type_id').value;
var SessionSel = document.getElementById('session_type_id');// that is all: no value
var SettingSession = SessionSel.options[SessionSel.selectedIndex].text;
var answer = confirm("Delete entry "+SettingSession+" ?")
if (answer){
alert("System Deleted")
window.location = "delete_session_type.php?session_type_id="+SessionID;
}
else{
alert("No action taken")
}
}
HTML Code: <input type="hidden" id="session_type_id" value="'.$row1['session_type_id'].'" /> echo '<td><input type="image" src="images/close.gif" height="16" width="16" name="remove" value="remove" onClick="javascript:confirmsession()" /></td>'; 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-- 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 Hello. Been searching all night for a way to do this, so thanks in advance for any help forthcoming. I'd like to be able to create a list of post titles that share the same tag in tumblr (rather than a list of tags). Tumblr allows you to filter your posts by tag by typing in a url, but this brings up a full page of posts, and I'd just like a list of the titles that I can then use as a menu. Hope this all makes sense. I'd imagine this is fairly simple as the capability to filter by tag already exists, but I cannot for the life of me work out how to do it. Thanks again. Hi Chaps, I have a dynamic list menu: PHP Code: <?php $currentCat = ''; $first = true ;?> <ul> <?php do { if ($currentCat != $row_rsCategory['catname']) { if (!$first) { echo "\n</ul>\n</li>\n"; } $currentCat = $row_rsCategory['catname']; ?> <li><?php echo $row_rsCategory['catname']; ?> <ul> <?php }?> <li><?php echo $row_rsCategory['galleryname']; ?></li> <?php $first = false; } while ($row_rsCategory = mysql_fetch_assoc($rsCategory)); ?> </ul> </li> </ul> I've tried looking for a show/hide script, to toggle category names/gallery names, but could only find ones that have static menu options, and have failed to edit existing code to fit....any help or guidence would be appreciated! I'm trying to use this code to create 6 sets of (each set 2 Dynamic List boxes). However I have the problem that Category 1-6 selection does not select the correct (adjacent) subcateory list box and instead populates the last selection in subcategory list box 1. How can I set the Java/HTML code so that for example Category #3, populates the selection/case into SubCategory#3 list box? Form Code (only with 2 Category, SubCategory) this when working will be expanded to 6. Code: <table border="0" width="560">
<tbody>
<tr>
<td align="center"><strong>Item#</strong></td>
<td align="center">Paint Type</td>
<td align="center">Colour</td>
<td align="center">Litres</td>
</tr>
<tr>
<td width="56%" align="left" valign="middle">1.<select name="category" id="category" onchange="javascript: dropdownlist(this.options[this.selectedIndex].value);">
<option value="">Select Range</option>
<option value="New Paint">New Paint</option>
<option value="Recycled Paint">Recycled Paint</option>
</select></td><td name="cell1">
<script type="text/javascript" language="JavaScript" >
document.write('<select name="subcategory1" id="subcategory1" name="cell1" ><option value="" name="subcategory1">Select Product</option></select>')
</script>
<noscript><select name="subcategory1" id="subcategory1" >
<option value="">Select Product</option>
</select>
</noscript>
</td><td>
<input class="formbox" size="20" name="01_colour" /></td><td>
<input class="formbox" size="5" name="01_litres" /></td>
</tr><br>
<tr>
<td width="56%" align="left" valign="middle">2.<select name="category2" id="category2" onchange="javascript: dropdownlist(this.options[this.selectedIndex].value);">
<option value="">Select Range</option>
<option value="New Paint2">New Paint</option>
<option value="Recycled Paint2">Recycled Paint</option>
</select></td><td name="cell2">
<script type="text/javascript" language="JavaScript">
document.write('<select name="subcategory" id="subcategory"><option value="" name="subcategory">Select Product</option></select>')
</script>
<noscript><select name="subcategory" id="subcategory" >
<option value="">Select Product</option>
</select>
</noscript>
</td><td>
<input class="formbox" size="20" name="02_colour" /></td><td>
<input class="formbox" size="5" name="02_litres" /></td>
</tr>
</table>
Java Script which I think is the problem, I cant work out how to name the relevant cell the selection should display in. Code: <script language="javascript" type="text/javascript">
function dropdownlist(indexlist)
{
document.SampleForm.subcategory1.options.length = 0;
switch(indexlist)
{
case "New Paint" :
document.SampleForm.subcategory1.options[0]=new Option("Select Product","");
document.SampleForm.subcategory1.options[1]=new Option("Air-Conditioners/Coolers","Air-Conditioners/Coolers");
document.SampleForm.subcategory1.options[2]=new Option("Audio/Video","Audio/Video");
document.SampleForm.subcategory1.options[3]=new Option("Beddings","Beddings");
document.SampleForm.subcategory1.options[4]=new Option("Camera","Camera");
document.SampleForm.subcategory1.options[5]=new Option("Cell Phones","Cell Phones");
break;
case "Recycled Paint" :
document.SampleForm.subcategory1.options[0]=new Option("Select Product","");
document.SampleForm.subcategory1.options[1]=new Option("Interior, Flat/Matt","Interior, Flat/Matt");
document.SampleForm.subcategory1.options[2]=new Option("Interior, Low Sheen","Interior, Low Sheen");
document.SampleForm.subcategory1.options[3]=new Option("Interior, Semi Gloss, Acrylic","Interior, Semi Gloss, Acrylic");
document.SampleForm.subcategory1.options[4]=new Option("Interior, Gloss, Acrylic","Interior, Gloss, Acrylic");
document.SampleForm.subcategory1.options[5]=new Option("Interior, High Gloss, Acrylic","Interior, High Gloss, Acrylic");
document.SampleForm.subcategory1.options[6]=new Option("Interior, Suede","Interior, Suede");
document.SampleForm.subcategory1.options[7]=new Option("Exterior, Flat/Matt","Exterior, Flat/Matt");
document.SampleForm.subcategory1.options[8]=new Option("Exterior, Low Sheen","Exterior, Low Sheen");
document.SampleForm.subcategory1.options[9]=new Option("Exterior, Semi Gloss, Acrylic","Exterior, Semi Gloss, Acrylic");
document.SampleForm.subcategory1.options[10]=new Option("Exterior, Gloss, Acrylic","Exterior, Gloss, Acrylic");
document.SampleForm.subcategory1.options[11]=new Option("Exterior, High Gloss, Acrylic","Exterior, High Gloss, Acrylic");
document.SampleForm.subcategory1.options[12]=new Option("Paving/Concrete","Paving/Concrete");
document.SampleForm.subcategory1.options[13]=new Option("Dulux Acratex","Dulux Acratex");
break;
}
return true;
}
</script>
Thanks Daniel I am developing a messaging service between members of my site. I am developing this with asp.net mvc. When a user goes to the SendMessage view to send a message to another member, there is a dropdown list which presents the sender with all the members of the site, which he or she will pick as the recipient. However, i don't want it to be a dropdown, i want it to be a text box, where a user types in the first couple of letters of a name, and the dropdown appears then with only the members which have the same couple of letters. This is basically like every email system out there (facebook and gmail have it just like that). And after they chose one, they can select another one in the same textbox, just separated by a comma or something like that. Basically, how do i achieve that in javascript? I'm not even sure what that functionality is called, that's why i had to explain it properly. Any help is greatly appreciated. thank you I have a form that has a pretty complicated combo box - a user starts typing text, it queries a database for matches, and displays the results to the user. The user can then select the match they desire and it has a value id, which I am currently sending to a hidden field in the form. So, for example: user starts typing in a movie name, Seven - it returns Seven and user selects it. The form submits the id of the movie seven (say 12) to a hidden field. Where I am stumped: Once a user selects a movie title, I have another drop down select box that is to display the available formats of the movie by querying my database based on the product id (12) and returning the available formats in the list: DVD BLUERAY VHS I am pretty good at programming, but I cannot figure this out - how to make the select box fire and return results once the value for the textbox has been captured. Can anyone help me? Is there a way to remove (not disable and not delete) an option in a "select" list, and restore it later when needed? I have a form with many huge lists ("select" with many "options") that depend on eachother. I am dynamically updating the form through server, and wish to update the list values by sending a mask string. This way I could remove and restore the options without the need to pass the whole list again. I tried many ways but none work: * option.diabled="disabled" is not good because it is still shown * option.style.visibility='hidden' is not good because it is still taking a row * option=null is not good because I will not be able to restore it I need a method similar to the following one for remove/add fields in a form: remove: <field>.style.display='none'; resto <field>.style.display=block'; Thank you!!! Hi folks, I'm frustrated . I've been trying to get this single piece of code to work. I've looked at quite a few sources out there, but everything I try fails. My site uses AJAX to upload a file, and once complete I dynamically add the file name, size, description, etc to a table. I have a javascript method that will allow me to download the file once uploaded - and I put an onclick event into some of the TDs in the row I added. (Note: I didn't want to put it in the TR because I also have a delete button in the row). I've tried Code: 1. cell1.onclick = 'javascript:downloadAttachmentFile('+attachID+');';
2. cell1["onclick"] = new Function("downloadAttachmentFile('+attachID+')");
3. cell3.setAttribute('onclick','javascript:downloadAttachmentFile('+attachID+');');
but none seem to work!! I know the function is ok because the files that are already on the page work correctly, meaning it's only the dynamically created rows that are having the issues. Code:
function addNewTableRow(fileTable, fileTitle, fileName)
{
var table = getMyElement(fileTable);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell0 = row.insertCell(0);
cell0.width = 25;
cell0.className = "tblTicketFilesWhite";
cell0["onclick"] = new Function("downloadAttachmentFile('+attachID+')");
}
Hey guys..... I've built a tool where users can search for something & the results show up in a select list as selectable options..... sometimes the results can take a few seconds to load depending on how many results there are... so I was attempting to show some "Results are loading" text when they search, & then hide it when they are displayed. However for some reason it's not working correctly...... both commands don't appear to work until the select list options have loaded & hence rendering them redundant.... I have tried putting them inside separate functions but no change in the behavior. What basically happens is I press the button to search & it searches & once the results show up so does the loading text.... however if I include the hide text command then the text doesn't show at all as it's hidden as soon as it's shown. Here is the code I am using.. PHP Code: function searchCats(text) { // Set URL for ajax request var url = 'search_cats.php?search_text='+text; // Set up element we're modifying var results = document.getElementById('cat_list'); // Trim string text.replace(/^ss*/, '').replace(/ss*$/, ''); if (text.length < 3) { alert('Please enter a search string more than 2 characters.'); return; } // Send the request, giving it an anonymous function that acts as the oncomplete event ajaxRequest(url, (function(ajaxResponse) { /* Deal with results */ // First we remove all current childs while(results.hasChildNodes()) { while (results.childNodes.length >= 1) { results.removeChild(results.firstChild); } } if (ajaxResponse == '') { // Display no results text document.getElementById('no_results').style.display='block'; } else { // Hide no results text document.getElementById('no_results').style.display='none'; // Display loading text document.getElementById('loading_results').style.display='block'; // Check for occurence of cat seperator (if not there then we know we only have one results) var sep_found = ajaxResponse.indexOf('!@!'); if (sep_found === -1) { // One result only // Seperate ID & cat name var parts = ajaxResponse.split('^@^'); // Create option element var option = document.createElement('option'); // Add attribute option.setAttribute('value', parts[0]); // Create text node var textNode = document.createTextNode(parts[1]); // Append text node to option element option.appendChild(textNode); // Now append option element to select list results.appendChild(option); } else { // Seperate cat data var cats = ajaxResponse.split('!@!'); // Loop through cat data for(i = 0; i < cats.length; i++) { // Seperate ID & cat name var parts = cats[i].split('^@^'); // Create option element var option = document.createElement('option'); // Add attribute option.setAttribute('value', parts[0]); // Create text node var textNode = document.createTextNode(parts[1]); // Append text node to option element option.appendChild(textNode); // Now append option element to select list results.appendChild(option); } } } })); // Hide loading text document.getElementById('loading_results').style.display='none'; } Thanks guys! Hello all, I am currently looking to create a JavaScript menu for a website I am working on. It currently expands and collapses on click. The code in question is pasted below:- menu_status = new Array(); function showHide(theid){ if (document.getElementById) { var switch_id = document.getElementById(theid); if(menu_status[theid] != 'show') { switch_id.className = 'show'; menu_status[theid] = 'show'; }else{ switch_id.className = 'hide'; menu_status[theid] = 'hide'; } } } As you can see, it basically shows and hides the menu (when clicked). I want it to open the menu when clicked and close when another menu is opened. I have looked and have not been able to find a solution into it. Ideally I donot want it to be a long piece of code as I do have a working menu but with many more lines of JavaScript than the one I have posted. I need a solution to it urgently, your help is appreciated. Thanks Hi All, i know how to create a dynamic form or DIv ..but what i do not know is how to create a dynamic form/ or div into a previous dynamic one.. i need basically to see 5 dynamic forms / DIV in cascade where each one trigger the one coming after.. For what i need that : i have my user inserting information on the level 1. let say Copagny info 2- then he will be asked if he wants to add a sub level information ( subform) for that compagny or even many subforms at the same level .. and so on... 3- those sub level ( subforms ) can also call their respective subforms.. Any idea how to design this ? thanks I have made a script where you can add extra fields, and next to the row is a span that automatically displays the outcome from a calculation of three fields in that row. i.e. Q x (B - A) = total. Here is the bit that does the calculation: Code: function advCalc(selected) {
var result = Number(document.formmain.elements["quantity"+selected].value) * (Number(document.formmain.elements["provideamount"+selected].value) - Number(document.formmain.elements["supplyamount"+selected].value)) ;
result = result.toFixed(2) ;
result = addCommas(result) ;
document.getElementById("total"+selected).innerHTML = result ;
}
The bit that adds a new row of fields is: Code: function addPart(divName){
var newdiv = document.createElement('div') ;
newdiv.setAttribute('id', 'partrow' + counter) ;
newdiv.setAttribute('style', 'clear:both;') ;
newdiv.innerHTML = "<div style='float:left;width:40px;text-align:center;margin:5px 5px 0px 0px;'>\r<input onkeyup=\"advCalc('" + counter + "')\" id=' quantity " + counter + "' type='text' value='1' size='1'/>\r</div>\r<div style='float:left;width:100px;text-align:left;margin:5px 0px 0px 0px;'>\r<input id='manufacturer" + counter + "'type='text' value='' size='9'/>\r</div>\r<div style='float:left;width:95px;text-align:left;margin:5px 5px 0px 0px;'>\r<input id='partnumber" + counter + "'type='text' value='' size='9'/>\r</div>\r<div style='float:left;width:80px;text-align:left;margin:5px 5px 0px 0px;'>\r<input id='supplier" + counter + "'type='text' value='' size='4'/>\r</div>\r<div style='float:left;width:100px;text-align:left;margin:5px 5px 0px 0px;'>\r<input id='type" + counter + "'type='text' value='' size='6'/>\r</div>\r<div style='float:left;width:85px;text-align:left;margin:5px 5px 0px 0px;'>\r<input id='deliverytime" + counter + "'type='text' value='' size='13'/>\r</div>\r<div style='float:left;width:40px;text-align:left;margin:5px 0px 0px 45px;'>\r<select id='supplyCurrency" + counter + "'>\r<option value='pound' selected='selected'>£</option><option value='dol'>$</option><option value='euro'>€</option></select>\r</div>\r<div style='float:left;width:15px;text-align:left;margin:5px 5px 0px 0px;'>\r<input onkeyup=\"advCalc(\'" + counter + "\')\" id=' supplyamount " + counter + "'type='text' value='' size='3'/>\r</div>\r<div style='float:left;width:40px;text-align:left;margin:5px 0px 0px 45px;'>\r<select name='provideCurrency" + counter + "'><option value='pound' selected='selected'>£</option><option value='dol'>$</option><option value='euro'>€</option></select>\r</div>\r<div style='float:left;width:15px;text-align:left;margin:5px 5px 0px 0px;'>\r<input onkeyup=\"advCalc(\'" + counter + "\') id=' provideamount " + counter + "' type='text' value='' size='3'/>\r</div>\r<div style='float:left;width:20px;text-align:left;margin:5px 0px 0px 45px;'>\r<strong>£</strong>\r</div>\r<div style='float:left;width:40px;text-align:left;margin:5px 5px 0px 0px;'><span id=' total " + counter + "'></span></div> \r" ;
document.getElementById(divName).appendChild(newdiv) ;
counter++ ;
}
The problem I am having is that it works fine for the first row which is hardcoded as e.g. id="provideamount0" etc. It isn't working for any other fields added but I can't see what is wrong 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. I would like to make an ordered list, for example: 1. Airplane 2. Boat 3. Car I'd like one of the words to be displayed on my webpage, for example: Boat Then I'd want an up button, and a down button. The up button would display Airplane instead of Boat, and the down button would display Car instead of Boat. Once it got to Car, the same up button would change it back to boat. How do I do this? Thanks. |
|||||||