|
JavaScript - Dynamic Dropdown List For Sending Messages To Multiple Members
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 Similar TutorialsHowdy, 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 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 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 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 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. 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 Hi I have two drop down menus I want the first one has name of the folders and when change the other dropdown has names of the sub-folders of this folder i have the top folders at the first dropdown how can i have the subfolders at the second when change first? the problem is how to open folder if i have folders aaaaa has subfolders(1111,2222,2233) bbbbb has subfolders(3333,4422,2433) ccccc has subfolders(1131,2232,2532) and each folder has subfolders how can i have name of these subfolders when change the topfolders(aaaaa, bbbbb, ccccc) I have more than 1000 top folders and eachone have 10 subfolders already i have all topfolders at first dropdown ,i want to have subfolders at second automatic , any help?? Hi, im looking for some help figuring out how to achieve the following: i have an ecommerce site. on a product a customer can select attributes associated with that product (i.e colour, size, shape etc.). Each attriute is represented by a HTML select, containing the values allowed for that product. the problem comes when certain colours do not come in certain sizes. Say my product has the following: colours: red, yellow, blue size: small, medium, large shape: square, circle but there is no stock for red,medium and red,large. I need to dynamically remove medium + large when red is selected so they cannot be chosen from the select. This could apply for any combination of attributes. Also this is completely dynamic so there could be 2 attributes or 10 attributes, and changing one would need to cascade down the selects. i have posted the code at the bottom of the post. The js representation of what is selectable is an object, containing other objects, each object representing a variation and wether to show or not. i know this is a right mouthful to try and explain, its even hard to figure out how to do it! an example of what im trying to achieve is: http://www.bit-cart.com/online-store-front-live-demo/products/Mikes-Test-Product.html. I do have jquery available on my page if it helps. any ideas would be most appreciated! thanks mike HTML: Code: <select name='attribute_12' id='attribute_12' class='attribute-select'>
<option value='166'>attribute_12 166</option>
<option value='165'>attribute_12 165</option>
<option value='171'>attribute_12 171</option>
</select>
<select name='attribute_10' id='attribute_10' class='attribute-select'>
<option value='108'>attribute_10 108</option>
<option value='110'>attribute_10 110</option>
<option value='120'>attribute_10 120</option>
<option value='148'>attribute_10 148</option>
</select>
<select name='attribute_19' id='attribute_19' class='attribute-select'>
<option value='201'>attribute_19 201</option>
<option value='202'>attribute_19 202</option>
<option value='203'>attribute_19 203</option>
</select>
JS: Code: <script type="application/javascript">
var variants = {
"304" : {"attrs":[171,108,201], "show":0},
"305" : {"attrs":[171,108,202], "show":1},
"306" : {"attrs":[171,108,203], "show":0},
"307" : {"attrs":[171,120,201], "show":1},
"308" : {"attrs":[171,120,202], "show":0},
"309" : {"attrs":[171,120,203], "show":1},
"310" : {"attrs":[171,148,201], "show":0},
"311" : {"attrs":[171,148,202], "show":1},
"312" : {"attrs":[171,148,203], "show":0},
"313" : {"attrs":[171,110,201], "show":1},
"314" : {"attrs":[171,110,202], "show":0},
"315" : {"attrs":[171,110,203], "show":1},
"316" : {"attrs":[166,108,201], "show":0},
"317" : {"attrs":[166,108,202], "show":1},
"318" : {"attrs":[166,108,203], "show":0},
"319" : {"attrs":[166,120,201], "show":1},
"320" : {"attrs":[166,120,202], "show":0},
"321" : {"attrs":[166,120,203], "show":1},
"322" : {"attrs":[166,148,201], "show":0},
"323" : {"attrs":[166,148,202], "show":1},
"324" : {"attrs":[166,148,203], "show":0},
"325" : {"attrs":[166,110,201], "show":1},
"326" : {"attrs":[166,110,202], "show":0},
"327" : {"attrs":[166,110,203], "show":1},
"328" : {"attrs":[165,108,201], "show":0},
"329" : {"attrs":[165,108,202], "show":1},
"330" : {"attrs":[165,108,203], "show":0},
"331" : {"attrs":[165,120,201], "show":1},
"332" : {"attrs":[165,120,202], "show":0},
"333" : {"attrs":[165,120,203], "show":1},
"334" : {"attrs":[165,148,201], "show":0},
"335" : {"attrs":[165,148,202], "show":1},
"336" : {"attrs":[165,148,203], "show":0},
"337" : {"attrs":[165,110,201], "show":1},
"338" : {"attrs":[165,110,202], "show":0},
"339" : {"attrs":[165,110,203], "show":1}
}
</script>
I have been searching everywhere and have found a few of articles available regarding dropdown menu.. couldnt get exactly what i wanted.. i am not really good at javascript, or even programing..am trying my best. anyway~ Here is what i want. something simple if there is more than 1 data entity (count>1) (Case 1), then execute 'select(drop down)' else (count <=1)(Case 2), then just show the data entity itself. (i dun even want the dropdown box to appear) as below screenshot or the attachment I have a script getting me the dropdown menu as below, i wanna modify this but not sure where to start... -------------------------------- <div id="abcdefg"> <form id="setLanguage" action="{$request_uri}" method="post"> <select name="selectlanguage" id="selectlanguage" onchange="setLanguage(this.value)"> {foreach from=$languages key=k item=language name="languages"} <option value="{$language.id_lang}" {if $language.iso_code == $lang_iso} selected {/if} >{$language.name} </option> {/foreach} </select> <input type="hidden" name="id_lang" id="id_lang" value=""/> </form> </div> -------------------------------- Really appreciate your help with modifying this. Please try not to give me a totally new script (i bet it will/may work better but i wouldnt be able to understand..:-( so no point...) Hi there, im new to the forum and currently in the process of building a website. Unfortunetly it needs a little javascript putting in and I dont know any javascript atall. So heres my problem: -------------------- I want 3 drop down menus where you change the top option, the middle menu updates (from a sql database), you change the middle option then the bottom option updates (again from the database). you select the 3rd option. it searches a database for the item matching all 3 entrys it displays the price all without reloading the page then you add the item to cart. ------------ Heres my site with fake data in the dropdowns: http://xeon.donov.co.uk/~blinky/?a=cat_sub&cid=3&f=A3 hi Peers, i am having issue capturing the value of the selected DDL using IE. the code below works just fine in Firefox... // Create a new drop down list -- for text box use 'input' instead of 'select' var newDDL = document.createElement('select'); // size lenght of the DDL for both IE or Firefox newDDL.setAttribute("style","width:300px"); //firefox newDDL.setAttribute("width","300px"); newDDL.style.width = "300px"; newDDL.id = 'id' + elementid + ColumnElement; newDDL.setAttribute('name','newDDL'+ elementid+ColumnElement); // filling the DDL by ITEM array Elements var i=0; for (i=0;i<=rec_count;i++) { objOption = document.createElement('option') objOption.text = ITEM[i] newDDL.options.add(objOption) } counter++; newDDL.onchange = show1; both cases are giving the value selected in firefox function 1: function show1() { alert('id=' + this.getAttribute('id') + 'name = ' + this.getAttribute('name') + 'value=' + this.value ); } function 2: function show1() { alert('id=' + this.getAttribute('id') + 'name = ' + this.getAttribute('name') + 'value='+ this.getAttribute('value')); } any suggestion will be appreciated thanks Javascript novice here looking to create a dynamic dropdown based on date. It's a list of preset prices that will change each month to reflect a pro-rated system. Any thoughts/examples on how I would go about setting this up using javascript would be much appreciated. Thanks. Here's what I need: In September, the dropdown will display these prices Code: <option value="100">Product 1</option> <option value="150">Product 2</option> <option value="200">Product 3</option> In October, the dropdown will display these prices <option value="50">Product 1</option> <option value="100">Product 2</option> <option value="150">Product 3</option> Hey, Were I am stuck is with the jquery I have a form that is done in a form class and when an option is selected from the dynamically populated drop down menu I would like it to fill in the text boxes so they can be edited. I currently have: getfeed.php - the page that is connected to the javascript Code: <?php
include('class/class.form.php');
include('class/class.users.php');
$iID = trim($_GET['extension']);
if(!$iID) die('No User Data found.');
$getValues = new Extension();
$user_info = $getValues->getUsersInformation($iID);
$sip_info = $getValues->getSipInformation($iID);
//print_r($user_info);
//print_r($sip_info);
$array = $getValues->getUsersInformation($iID);
echo '<br /><br />-- end of query --';
The Javascript Code:
if(document.id('LoadExtension') && document.id('ExtensionResponse')) { // id of select box
var sel = document.id('LoadExtension'); // ser select box as var.
sel.addEvent('change', function(chg) { // add change event to select box.
if(sel.getSelected().get('value') != '') { // on change if selected value is not empty.
new Request.HTML({
url : 'http://Domain.co.nz/Air/includes/getFeed.php?extension='+ sel.getSelected().get('value'),
onRequest: function() {
document.id('ExtensionResponse').set('html', 'loading...');
},
onComplete: function(r1, r2, html, js) {
document.id('ExtensionResponse').set('html', html);
}
}).send();
}
});
}
At the moment it does not load any data(I somehow need to get the $iID sent from the index.php but the drop down menu is a count array would I take it from this?) and is in a separate div below the form. Ok so i am trying to make 3 dropdowns based off a mysql table. and the 3 dropdowns need to be based off of the previous dropdown. i.e Source, School, Sub. Select Source, and the schools in dropdown 2 are based off of the source they selected, and when they select a school, all the sub cats for that school are in the sub category dropdown. It seems like a simple concept, but i've google'd EVERYWHERE and notihng. I have the 3 dropdown's pulling from my database perfectly. i just cannot base the next dropdown on the previous selection! I know nothing of javascript..im a front end designer with little php/mysql. I've read that Ajax is the way to go, so here i am ! any tutotials, links or sample script layouts i can use would be amazing! Thank you! jt I have three radio button groups with different values. My script only works for one group. Please help! <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script> function emailTo(){ var emails = document.getElementsByName("email1"); var emailAdress = null; for(var i = 0; i < emails.length; i++){ if(emails[i].checked){ emailAdress = emails[i].value; } } if(emailAdress == null){ alert("select the email address"); return; } var mailto_link = 'mailto:'+emailAdress; var win = window.open(mailto_link,'emailWindow'); if (win && win.open &&!win.closed) win.close(); } </script> </head> <body> <p> <input type = "radio" name = "email1" value = "email1.com"/> recipient 1a <input type = "radio" name = "email1" value = "email1.com"> recipient 1b </p> <p> <input type = "radio" name = "email2" value = "email2.com"/> recipient 2a <input type = "radio" name = "email2" value = "email2.com"> recipient 2b</p> <p> <input type = "radio" name = "email3" value = "email3.com"/> recipient 3a <input type = "radio" name = "email3" value = "email3.com"> recipient 3b</p> <p> </p> <p> <input type = "button" onClick = "emailTo()" value = "Email"/> </p> </body> </html> So i have a form with fields (30+), and about 5 of them are fields that need to pass into my dropdown (actually a dynmaic dropdown, select SOURCE, then whatever source u select it'll show options that are mysql source=$source), so it can go into my mysql query, and filter out the best results. (i.e date_of_birth, min_credits, state, etc). Needs to be done without submitting, hence javascript. Im echo'ing my query and its saying the variables i'm trying to pass are UNDEFINED. Am I not passing the vars correctly? do i need to prep the vars to "grab" them in the current field? this is what i have in my <head> Code: <script language="javascript" type="text/javascript">
function getXMLHTTP() { //fuction to return the xml http object
var xmlhttp=false;
try{
xmlhttp=new XMLHttpRequest();
}
catch(e) {
try{
xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e){
try{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e1){
xmlhttp=false;
}
}
}
return xmlhttp;
}
function getSchool(id,hs_grad_year,dob_day,dob_month,dob_year,min_credits,state) {
var strURL="findSchool.php?source="+id+"&hs_grad_year="+hs_grad_year+"&dob_day="+dob_day+"&dob_month="+dob_month+"&dob_year="+dob_year+"&min_credits="+min_credits+"&state="+state;
var req = getXMLHTTP();
if (req) {
req.onreadystatechange = function() {
if (req.readyState == 4) {
// only if "OK"
if (req.status == 200) {
document.getElementById('schooldiv').innerHTML=req.responseText;
} else {
alert("There was a problem while using XMLHTTP:\n" + req.statusText);
}
}
}
req.open("GET", strURL, true);
req.send(null);
}
}
function getSub(id,cid) {
var strURL="findSub.php?source="+id+"&cid="+cid;
var req = getXMLHTTP();
if (req) {
req.onreadystatechange = function() {
if (req.readyState == 4) {
// only if "OK"
if (req.status == 200) {
document.getElementById('subdiv').innerHTML=req.responseText;
} else {
alert("There was a problem while using XMLHTTP:\n" + req.statusText);
}
}
}
req.open("GET", strURL, true);
req.send(null);
}
}
</script>
The only var that is passing is SOURCE, and that's because its the name of the first dropdown I'm VERY new to javascript, do i need to set up like a GET method on my RECEIVING page? or can i just pass variables through? Do i need to get the "existing" data in the fields first? Thanks in advance, JT 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"> </td>
<td width="109" rowspan="3"> </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>
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." 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 |
|||||||