|
JavaScript - Dependable Dropdown Lists (4 Level) With Multiple Selection
Dependable dropdown lists (4 level)
1 Level dropdown list 2 Level dropdown list 3 Level dropdown list 4 Level dropdown list Every dropdown list is depends on another dropdown list For example if I select a value from 1 dropdown list then 2 dropdown list will appear. And then I select a value from 2 dropdown list then 3 dropdown list will appear. And if I select a value from 3 dropdown list then 4 dropdown list Multiple selection will be enable. It means every dropdown list may have hundreds of values. Thus, In this situation of multiple selection of values I analyze that, use of dropdown isn't suitable because if a dropdown value has 500 related values then these 500 values disturb the page design. So, is there any other better solution for it? Similar TutorialsIs it possible to pull multiple variables from a single dropdown menu selection? example: I have this: Code: function material_choices_menu() /* Provides Specific Gravity for various materials */
{
var data = "Material <select name='material'>";
data += "<option value='.926'>CYCOLAC MG47 (ABS)<\/option>";
data += "<option value='1.050'>CYCOLAC MG47MD (ABS)<\/option>";
data += "<option value='.958'>CYCOLAC T (ABS)<\/option>";
data += "<\/select>";
document.write(data);
}
I'd like to have multiple option values: Code: function material_choices_menu() /* Provides Specific Gravity for various materials */
{
var data = "Material <select name='material'>";
data += "<option value1='.926', option value2='.005-.008'>CYCOLAC MG47 (ABS)<\/option>";
data += "<option value1='1.050', option value2='.005-.008'>CYCOLAC MG47MD (ABS)<\/option>";
data += "<option value1='.958', option value2='.005-.008'>CYCOLAC T (ABS)<\/option>";
data += "<\/select>";
document.write(data);
}
I plan to use the first value in some math formulas to determine weights and the rest of the values will just be shown as data for the user and/or possibly a link to the datasheet for the material selected. Is this possible or am I reaching here? Hello, I am completely new to HTML/JS/CSS, therefore I know very little. I have two drop-down prompt controls with month names. One has just one value (say "July") and the other has all the months of the year ("January".."December"). The first prompt control is hidden on the page. How do I set the default selection of the second prompt control to the value present in the first prompt control? So, when the page is run, the second prompt control should automatically show "July". I was reading up on the selectedIndex property (?), but I know that it won't work because I want Index 0 to be selected in the first control and Index 6 in the second, and I expect it to change every month (next month it will be index 7 that should be automatically selected). If it matters, I am using IE8. Thanks! 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 Hi, I have two dropdown lists, and I want to have each option from the first dropdown list to give the specific options on the second dropdown list. For instance, <select name="module"> <option value="pic1.jpg>TM1</option> <option value="pic2.jpg>TM2</option> <option value="pic3.jpg>TM3</option> </select> <select name="location"> <option value="loc_1">Box1</option> <option value="loc_2">Box2</option> <option value="loc_3">Box3</option> Note: The option values are just examples, but each option must have a value in order for other things to work. Here is what I need to do: If TM1 is selected, only Box1 and Box 2 are available (Box3 is removed from the dropdown "location" list); If TM2 is selected, only Box 2 is available (Box 1 and 3 are removed from the dropdown "location" list); If TM3 is selected, all options in the dropdown "location" list are available. My javascript knowledge is very limited. Any help is greatly appreciated. Thanks in advance, JW 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 Need a javascript function... If a checkbox is checked, then corresponding dropdown selection is must... Please help me with this... Thanks Reply With Quote Hi Everyone, I'm encountering errors with a form I have created. I feel confident that the issue is with my JS validation form because when I allow the form to submit without validating any of the fields, my php processor correctly uploads all the content into my database (but, I will need the form validation to prevent the user from skipping fields). The issue (I believe) is with IE. In IE, both drop-downs seem to populate correctly but when I submit the form, I get a prompt to make a selection for the first drop-down menu. The form does submit properly in FireFox and Safari but with some testing I noticed that I was getting a prompt to make a selection in the first drop-down in instances where a selection was already made but I just had not yet populated the second country/state drop-down. Still, in Firefox and Safari, the form does pass validation upon submit.. So, I am hoping it's just IE specific issue. I'm thinking the issue is with IE not recognizing my selection. The form had a drop-down menu where the user selects a letter, then that selection triggers (in JS using a function to process the selection) another drop-down to populate with all the countries or states that begin with the letter from the first selection. Here is the code from my form: Code: <p><span class="title">Sign Up</span></p>
<br />
<form id = "signupForm" action="signup_process.php" method = "post" onsubmit="return validateSignupForm();">
<p>All required fields are marked with ( <span class = "requiredStar">*</span> )</p>
<br />
<p><label for="first_name">First Name: <span class = "requiredStar">*</span></label></p>
<div class = "contactRight"><input type="text" name="first_name" id="first_name" style="height: 20px;" size="30" tabindex="1" maxlength="30" /></div>
<br />
<p><label for="last_name">Last Name: <span class = "requiredStar">*</span></label></p>
<div class = "contactRight"><input type="text" name="last_name" id="last_name" style="height: 20px;" size="30" tabindex="2" maxlength="30" /></div>
<br />
<p><label for="countryLtr">Select the first letter of your country: <span class = "requiredStar">*</span></label></p>
<select id="countryLtr" name="countryLtr" id="countryLtr" size="1" tabindex="3" onchange="processSelection()">
<option value=""></option>
<option value="USA">USA</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>
<option value="F">F</option>
<option value="G">G</option>
<option value="H">H</option>
<option value="I">I</option>
<option value="J">J</option>
<option value="K">K</option>
<option value="L">L</option>
<option value="M">M</option>
<option value="N">N</option>
<option value="O">O</option>
<option value="P">P</option>
<option value="Q">Q</option>
<option value="R">R</option>
<option value="S">S</option>
<option value="T">T</option>
<option value="U">U</option>
<option value="V">V</option>
<option value="W">W</option>
<option value="Y">Y</option>
<option value="Z">Z</option>
</select>
<br />
<br />
<p><label for="countryState">Select your country/ state (if USA): <span class = "requiredStar">*</span></label></p>
<select id="countryState" name="countryState" id="countryState" size="1" tabindex="4">
</select>
<br />
<br />
<p><label for="username">Create a username: <span class = "requiredStar">*</span></label></p>
<div class = "contactRight"><input type="text" name="username" id="username" style="height: 20px;" size="30" tabindex="5" maxlength="30" /></div>
<br />
<p><label for="email">Email: <span class = "requiredStar">*</span></label></p>
<div class = "contactRight"><input type="text" name="email" id="email" style="height: 20px;" size="30" tabindex="6" maxlength="30" /></div>
<br />
<p><label for="password">Create a password: <span class = "requiredStar">*</span></label></p>
<div class = "contactRight"><input type="password" name="password" id="password" style="height: 20px;" size="30" tabindex="7" maxlength="30" /></div>
<br />
<br />
<input type="hidden" name="source" value="12345">
<input type="image" name="submit" value="Submit" class="submitButton" src="images/submit-button.png" />
<input type="image" name="reset" value="Reset" class="resetButton" src="images/reset-button.png" />
<br />
</form>
and here is the code for processing the selection of the first drop-down and populating the second drop-down (I reduced the number of options for the countries to save on characters for this post): Code: function processSelection() {
choice1 = document.getElementById("countryLtr");
choice2 = document.getElementById("countryState");
choice2.length = 0;
if (choice1.value == "USA") {
choice2[choice2.length] = new Option("");
choice2[choice2.length] = new Option("Alaska");
choice2[choice2.length] = new Option("American Samoa");
choice2[choice2.length] = new Option("Arizona");
choice2[choice2.length] = new Option("Arkansas");
choice2[choice2.length] = new Option("California");
choice2[choice2.length] = new Option("Colorado");
choice2[choice2.length] = new Option("Connecticut");
choice2[choice2.length] = new Option("Delaware");
choice2[choice2.length] = new Option("District of Columbia");
choice2[choice2.length] = new Option("Florida");
choice2[choice2.length] = new Option("Georgia");
choice2[choice2.length] = new Option("Guam");
choice2[choice2.length] = new Option("Hawaii");
choice2[choice2.length] = new Option("Idaho");
choice2[choice2.length] = new Option("Illinois");
choice2[choice2.length] = new Option("Indiana");
choice2[choice2.length] = new Option("Iowa");
choice2[choice2.length] = new Option("Kansas");
choice2[choice2.length] = new Option("Kentucky");
choice2[choice2.length] = new Option("Louisiana");
choice2[choice2.length] = new Option("Maine");
choice2[choice2.length] = new Option("Maryland");
choice2[choice2.length] = new Option("Massachusetts");
choice2[choice2.length] = new Option("Michigan");
choice2[choice2.length] = new Option("Minnesota");
choice2[choice2.length] = new Option("Mississippi");
choice2[choice2.length] = new Option("Missouri");
choice2[choice2.length] = new Option("Montana");
choice2[choice2.length] = new Option("Nebraska");
choice2[choice2.length] = new Option("Nevada");
choice2[choice2.length] = new Option("New Hampshire");
choice2[choice2.length] = new Option("New Jersey");
choice2[choice2.length] = new Option("New Mexico");
choice2[choice2.length] = new Option("New York");
choice2[choice2.length] = new Option("North Carolina");
choice2[choice2.length] = new Option("North Dakota");
choice2[choice2.length] = new Option("Northern Marianas Islands");
choice2[choice2.length] = new Option("Ohio");
choice2[choice2.length] = new Option("Oklahoma");
choice2[choice2.length] = new Option("Oregon");
choice2[choice2.length] = new Option("Pennsylvania");
choice2[choice2.length] = new Option("Puerto Rico");
choice2[choice2.length] = new Option("Rhode Island");
choice2[choice2.length] = new Option("South Carolina");
choice2[choice2.length] = new Option("South Dakota");
choice2[choice2.length] = new Option("Tennessee");
choice2[choice2.length] = new Option("Texas");
choice2[choice2.length] = new Option("Utah");
choice2[choice2.length] = new Option("Vermont");
choice2[choice2.length] = new Option("Virginia");
choice2[choice2.length] = new Option("Virgin Islands");
choice2[choice2.length] = new Option("Washington");
choice2[choice2.length] = new Option("West Virginia");
choice2[choice2.length] = new Option("Wisconsin");
choice2[choice2.length] = new Option("Wyoming");
} else if (choice1.value == "A") {
choice2[choice2.length] = new Option("");
choice2[choice2.length] = new Option("Azerbaijan");
} else if (choice1.value == "B") {
choice2[choice2.length] = new Option("");
choice2[choice2.length] = new Option("The Bahamas");
} else if (choice1.value == "C") {
choice2[choice2.length] = new Option("");
choice2[choice2.length] = new Option("Czech Republic");
} else if (choice1.value == "D") {
choice2[choice2.length] = new Option("");
choice2[choice2.length] = new Option("Denmark");
} else if (choice1.value == "E") {
choice2[choice2.length] = new Option("");
choice2[choice2.length] = new Option("Ecuador");
} else if (choice1.value == "G") {
choice2[choice2.length] = new Option("");
choice2[choice2.length] = new Option("Gabon");
} else if (choice1.value == "H") {
choice2[choice2.length] = new Option("");
choice2[choice2.length] = new Option("Haiti");
} else if (choice1.value == "I") {
choice2[choice2.length] = new Option("");
choice2[choice2.length] = new Option("Iceland");
} else if (choice1.value == "J") {
choice2[choice2.length] = new Option("");
choice2[choice2.length] = new Option("Jamaica");
} else if (choice1.value == "K") {
choice2[choice2.length] = new Option("");
choice2[choice2.length] = new Option("Kazakhstan");
} else if (choice1.value == "L") {
choice2[choice2.length] = new Option("");
choice2[choice2.length] = new Option("Laos");
} else if (choice1.value == "M") {
choice2[choice2.length] = new Option("");
choice2[choice2.length] = new Option("Macau");
} else if (choice1.value == "N") {
choice2[choice2.length] = new Option("");
choice2[choice2.length] = new Option("Namibia");
} else if (choice1.value == "O") {
choice2[choice2.length] = new Option("");
choice2[choice2.length] = new Option("Oman");
} else if (choice1.value == "P") {
choice2[choice2.length] = new Option("");
choice2[choice2.length] = new Option("Pakistan");
} else if (choice1.value == "Q") {
choice2[choice2.length] = new Option("");
choice2[choice2.length] = new Option("Qatar");
} else if (choice1.value == "R") {
choice2[choice2.length] = new Option("");
choice2[choice2.length] = new Option("Reunion");
} else if (choice1.value == "S") {
choice2[choice2.length] = new Option("");
choice2[choice2.length] = new Option("Saint Helena");
} else if (choice1.value == "T") {
choice2[choice2.length] = new Option("");
choice2[choice2.length] = new Option("Taiwan");
} else if (choice1.value == "U") {
choice2[choice2.length] = new Option("");
choice2[choice2.length] = new Option("Uganda");
} else if (choice1.value == "V") {
choice2[choice2.length] = new Option("");
choice2[choice2.length] = new Option("Vanuatu");
} else if (choice1.value == "W") {
choice2[choice2.length] = new Option("");
choice2[choice2.length] = new Option("Wake Island");
} else if (choice1.value == "Y") {
choice2[choice2.length] = new Option("");
choice2[choice2.length] = new Option("Yemen");
} else if (choice1.value == "Z") {
choice2[choice2.length] = new Option("");
choice2[choice2.length] = new Option("Zambia");
}
}
Here is the code for validating the form upon submission: Code:
function validateRequestForm() {
var theForm = document.getElementById("requestForm"); //form reference
var valid = true; //flag, must be true to proceed
if (theForm.name.value == "") {
alert ("Please enter a name");
valid = false;
theForm.username.focus();
} else if (theForm.countryLtr.value == "") {
alert ("Please select the first letter of your country");
valid = false;
theForm.countryLtr.focus();
} else if (theForm.countryState.value == "") {
alert ("Please select your country. If USA, please select your state");
valid = false;
theForm.countryState.focus();
} else if (theForm.email.value == "") {
alert ("Please enter your email address");
valid = false;
theForm.email.focus();
} else if (theForm.title.value == "") {
alert ("Please enter a title for your request");
valid = false;
theForm.title.focus();
} else if (theForm.request.value == "") {
alert ("Please enter your request");
valid = false;
theForm.request.focus();
} if (valid == true) {
alert ("Thank you for your prayer request. Your request has been submitted for review. Please check your account to see the status of your prayer request. You may also check recent requests to view your request after it has been posted.");
return true; //submit form
} else {
return false; //form invalid
}
}
I'm totally stumped as to what could be going on in IE that is not allowing the form to pass JS validation.. Any help would be greatly appreciated!! Thanks! Hello, I would like to know how can I send the selection from a dropdown from a webpage to another. In the first page where I have the dropdown list, I have this: Code: <td valign="top" align="left" nowrap width="90%">
<input name="time" style="width:100%" />
</td>
<td valign="top" align="left" nowrap width="50">
<select name="time2">
<option value="60">Minutes</option>
<option value="3600">Hour</option>
<option value="86400">Days</option>
</select>
</td>
In the second page, where I want this selection to be dispalyed, I created this code: Code: <td width="188" valign="top" align="left" nowrap> <SCRIPT LANGUAGE="JavaScript">document.write(window.opener.document.form.elements["time"].value + " " + window.opener.document.form.elements["time2"].value);</SCRIPT> </td> The issue I have with this is that the value dispalyed for the "time2" element is the actual attribute value (for instance 60) and not the actual value (for instance "Minutes"). If anyone have a clue what I'm doing wrong, I appreciate your help. Regards, I have a long list consisting of a name and associated number, like this: SITE01 2111 SITE02 4567 SITE03 5555 and so on. I would like to put two dropdown boxes where the user can select either the name or the number. Then based upon the users selection have both the name and number appear. I'm thinking of putting all the data in an array and using the dropdowns to query the array. That sounds good but I'm new to javascript and a detailed example of how to do this would be needed, if its even the right approach to take to accomplish this. Hi, i am building a website form which I would like the user to select a product of interest. Some products are three tiered and some are two tiered. 1. Example of three tier (3 dropdowns required only): Scooters (dropdown 1) Three Wheel Scooters (dropdown 2) Delux 503S Bird Scooter (dropdown 3) 2. Example of two tier (2 dropdowns required only): Standing Bikes (dropdown 1) Children 300 Series (dropdown 2) If the user wants to submit their interest for one of the products, I need to have at most 3 dropdown menus. So in Example 1, I would have 3 dropdowns in my form. Dropdown 1: Scooters Dropdown 2: Three Wheel Scooters Dropdown 3: Delux 503S Bird Scooter In Example 2, I would only need to use the first 2 dropdown menus. (Obviously the first dropdown would contain 'Scooters' and 'Standing Bikes' in the menu list) The below code is perfect except, I would like to alter the code so that the second and third dropdowns are hidden until a selection from the first drop down is made. Once for example, 'Standing Bikes' is selected from the first dropdown menu, the second dropdown menu appears and the third remains hidden due to the fact that it is not required. If I selected Scooters from the first dropdown menu, the second dropdown would appear listing all items associated with this and at this point the third dropdown menu is hidden. If i select 'Three Wheel Scooter' from the second dropdown the third dropdown menu now appears listing all Three wheel Scooters such as 'Delux 503S Bird Scooter'. I hope this makes sense. Let me know if you require clarrification. Here is the code: Code: <script language="JavaScript" type="text/javascript">
<!--
/*
*** Multiple dynamic combo boxes
*** by Mirko Elviro, 9 Mar 2005
*** Script featured and available on JavaScript Kit (http://www.javascriptkit.com)
***
***Please do not remove this comment
*/
// This script supports an unlimited number of linked combo boxed
// Their id must be "combo_0", "combo_1", "combo_2" etc.
// Here you have to put the data that will fill the combo boxes
// ie. data_2_1 will be the first option in the second combo box
// when the first combo box has the second option selected
// first combo box
data_1 = new Option("1", "$");
data_2 = new Option("2", "$$");
// second combo box
data_1_1 = new Option("11", "-");
data_1_2 = new Option("12", "-");
data_2_1 = new Option("21", "--");
data_2_2 = new Option("22", "--");
data_2_3 = new Option("23", "--");
data_2_4 = new Option("24", "--");
data_2_5 = new Option("25", "--");
// third combo box
data_1_1_1 = new Option("111", "*");
data_1_1_2 = new Option("112", "*");
data_1_1_3 = new Option("113", "*");
data_1_2_1 = new Option("121", "*");
data_1_2_2 = new Option("122", "*");
data_1_2_3 = new Option("123", "*");
data_1_2_4 = new Option("124", "*");
data_2_1_1 = new Option("211", "**");
data_2_1_2 = new Option("212", "**");
data_2_2_1 = new Option("221", "**");
data_2_2_2 = new Option("222", "**");
data_2_3_1 = new Option("231", "***");
data_2_3_2 = new Option("232", "***");
// fourth combo box
data_2_2_1_1 = new Option("2211","%")
data_2_2_1_2 = new Option("2212","%%")
// other parameters
displaywhenempty=""
valuewhenempty=-1
displaywhennotempty="-select-"
valuewhennotempty=0
function change(currentbox) {
numb = currentbox.id.split("_");
currentbox = numb[1];
i=parseInt(currentbox)+1
// I empty all combo boxes following the current one
while ((eval("typeof(document.getElementById(\"combo_"+i+"\"))!='undefined'")) &&
(document.getElementById("combo_"+i)!=null)) {
son = document.getElementById("combo_"+i);
// I empty all options except the first one (it isn't allowed)
for (m=son.options.length-1;m>0;m--) son.options[m]=null;
// I reset the first option
son.options[0]=new Option(displaywhenempty,valuewhenempty)
i=i+1
}
// now I create the string with the "base" name ("stringa"), ie. "data_1_0"
// to which I'll add _0,_1,_2,_3 etc to obtain the name of the combo box to fill
stringa='data'
i=0
while ((eval("typeof(document.getElementById(\"combo_"+i+"\"))!='undefined'")) &&
(document.getElementById("combo_"+i)!=null)) {
eval("stringa=stringa+'_'+document.getElementById(\"combo_"+i+"\").selectedIndex")
if (i==currentbox) break;
i=i+1
}
// filling the "son" combo (if exists)
following=parseInt(currentbox)+1
if ((eval("typeof(document.getElementById(\"combo_"+following+"\"))!='undefined'")) &&
(document.getElementById("combo_"+following)!=null)) {
son = document.getElementById("combo_"+following);
stringa=stringa+"_"
i=0
while ((eval("typeof("+stringa+i+")!='undefined'")) || (i==0)) {
// if there are no options, I empty the first option of the "son" combo
// otherwise I put "-select-" in it
if ((i==0) && eval("typeof("+stringa+"0)=='undefined'"))
if (eval("typeof("+stringa+"1)=='undefined'"))
eval("son.options[0]=new Option(displaywhenempty,valuewhenempty)")
else
eval("son.options[0]=new Option(displaywhennotempty,valuewhennotempty)")
else
eval("son.options["+i+"]=new Option("+stringa+i+".text,"+stringa+i+".value)")
i=i+1
}
//son.focus()
i=1
combostatus=''
cstatus=stringa.split("_")
while (cstatus[i]!=null) {
combostatus=combostatus+cstatus[i]
i=i+1
}
return combostatus;
}
}
//-->
</script>
<form>
<select name="combo0" id="combo_0" onChange="change(this);" style="width:200px;">
<option value="value1">-select-</option>
<option value="value2">1</option>
<option value="value3">2</option>
</select>
<BR><BR>
<select name="combo1" id="combo_1" onChange="change(this)" style="width:200px;">
<option value="value1"> </option>
</select>
<BR><BR>
<select name="combo2" id="combo_2" onChange="change(this);" style="width:200px;">
<option value="value1"> </option>
</select>
<BR><BR>
<select name="combo3" id="combo_3" onChange="change(this);" style="width:200px;">
<option value="value1"> </option>
</select>
</form>
<p align="center">This free script provided by<br />
<a href="http://javascriptkit.com">JavaScript
Kit</a></p>
Hi, On a registration form I have 4 fields that are all dropdown select fields. NAME, CLASS-1, CLASS-2, CODE 1) I would like to activate the CLASS-1, CLASS-2, CODE fields only if the NAME IS Selected from the dropdown. 2) Also would like to make the CLASS-1, CLASS-2 as required fields if the NAME is selected from the dropdown. How can I achieve this? Can I use some kind of a server event to activate / deactivate the fields on the form? Please advice Thanks Vinny The Script works in Firefox, BUT not in Internet Explorer. What am I missing? I need Drop Down menu Boxes to appear when User clicks on a certian Menu option. The way it appears now on the website is all the boxes appear. They should stay "hidden" until a User clicks on the drop down menu selection. Thanks! <head> <script type="text/javascript" language="javascript"> function showInfo() { var typeOne = document.getElementById('bmp'); var typeTwo = document.getElementById('junction'); var typeThree = document.getElementById('mile'); if(document.basicform01.Location_Type.value == "BMP to EMP") { typeOne.style.display="inline"; typeTwo.style.display="none"; typeThree.style.display="none"; } else if(document.basicform01.Location_Type.value == "Junction to Junction") { typeOne.style.display="none"; typeTwo.style.display="inline"; typeThree.style.display="none"; } else if(document.basicform01.Location_Type.value == "Milepost") { typeOne.style.display="none"; typeTwo.style.display="none"; typeThree.style.display="inline"; } else { typeOne.style.display="none"; typeTwo.style.display="none"; typeThree.style.display="none"; } } </script> <style>*[style] {outline:none}</style> </head> <body> <fieldset> <dl> <dt><label for="Location_Type">Location Type *</label></dt> <dd><select class="inputselect" name="Location_Type" id="Location_Type" onchange="showInfo()"> <option value="" selected="selected">Select One...</option> <option value="BMP to EMP">BMP to EMP</option> <option value="Junction to Junction">Junction to Junction</option> <option value="Milepost">Milepost</option> </select></dd> <div id="bmp" style="display:none;"> <dt><label for="bmpDetails">BMP</label></dt> <dd><input class="inputtext" type="text" name="bmpDetails" id="bmpDetails" /></dd> <dt><label for="empDetails">EMP</label></dt> <dd><input class="inputtext" type="text" name="empDetails" id="empDetails" /></dd> </div> <div id="junction" style="display:none;"> <dt><label for="fromJunction">From Junction:</label></dt> <dd><input class="inputtext" type="text" name="fromJunction" id="fromJunction" /></dd> <dt><label for="toJunction">To Junction:</label></dt> <dd><input class="inputtext" type="text" name="toJunction" id="toJunction" /></dd> </div> <div id="mile" style="display:none;"> <dt><label for="milepostNum">Milepost</label></dt> <dd><input class="inputtext" type="text" name="milepostNum" id="milepostNum" /></dd> </div> <p> </dl> <p> </fieldset> </body> Hello Folks, Here is my dropdown menu: Code: <select name="peeps"> <option value="Frank Tompson">Frank Tompson</option> <option value="Henry Wilson">Henry Wilson</option> <option value="Bill Kent">Bill Kent</option> <option value="Jessi McDonald"> Jessi McDonald</option> <option value="John Hays">John Hays</option> How can i make it so if i click on John Hays a JavaScript pop up will say Hello John Hays, and if i click on Bill Kent a popup will say hello Bill Kent and if i click on any other name nothing happens? form is .asp scenario: I have 3 radio buttons above number of boxes (dropdown). I want the dropdown selection box greyed out on selecting Electronic (radio button) Physical (radio button) Image (radio button) Electronic (radio button) Number of Boxes [dropdown box] Thanks for your help I am new to coding. Codes for Dropdown menu based on radio buttons selection needed!? I need urgent help with this: I need codes for a dropdown menu that is altered by radio buttons. I want to insert the value selected from the dropdown menu into a table. How can I hide/disable the submit button if the name Todd is selected? Code: <html> <head> </head> <body> <form name="people"> <select name="group"> <option value="Pick Your Name">Choose</option> <option value="Tom">Tom</option> <option value="Freddy">Freddy</option> <option value="Todd">Todd</option> <option value="Fred">Fred</option> <option value="William">William</option> <option value="Johnson">Johnson</option> </select> <INPUT TYPE=submit VALUE="submit"> </form> </body> </html> Dear Javascript programmers, Do you have an example of a Javascript something like this: A dropdownlist with values "one" and "two". The radio button is not visible (as a start). - If you have selected "one" from the dropdown list, then a radio button will appear. - If you have selected "two" from the dropdown list, then a radio button will NOT appear. Thanks, Cornelis Gouda - The Netherlands Hello. The code below lets a user select a drop down option and a picture changes depending on the selection. I am trying to make it so when you select an option on the dropdown the picture shows up in the center of the screen and in the background behind the text. Here is the code. Code: <html>
<head>
<style type='text/css'>
#txt {background-repeat:no-repeat;width:200px;height:200px;}
</style>
<script type='text/javascript'>
function div_bg(team){
document.getElementById('txt').style.backgroundImage="url(images/" + team + ".jpg)";
}
</script>
</head>
<body>
<select name='team' onChange='div_bg(this.value);'>
<option name='arsenal' value='arsenal'>Arsenal</option>
<option name='liverpool' value='liverpool'>Liverpool</option>
</select>
<div id='txt'></div>
</body>
Thanks in advance!! What I want to do, is that, when the user select one option out of many from the dropdown box some new fields appears. I was so close to make it , using this example: Code: <script type="text/javascript">
function showInfo()
{
var elem = document.getElementById('verify');
if(document.forms[0].menu.value == "verify"){
elem.style.display="inline";}
else{
elem.style.display="none";}
}
</script>
</head>
<body>
<form action="#" method="post">
<select name="menu" onchange="showInfo()">
<option value="none">Select an option</option>
<option value="email">Email</option>
<option value="verify">Verify</option>
</select>
<div id="verify" style="display:none;">
<input type="text" value="Username" >
<input type="password" value="password" >
</div>
</form>
But what I do want, is that two differen things appear on the page and in the different location of the page. And this script does not read the second <div>. So the result is, that the only first <div> appears. Here are some images of what I want to do. Befo http://img82.imageshack.us/img82/7093/beforens9.jpg After http://img246.imageshack.us/img246/2759/afterzh2.jpg (what has to be changed is on the red circules). So can someone help me with this script?? Please! I am pritty noob to the javascript. I have a cgi script (using perl for database queries) in which I have two select boxes. I am populating the left select box with rows from a database, and then provide buttons for people to move items to the right select box. So far so good, everything works, the move right, move left, and move right all and move left all buttons work, data is always sorted in both lists. My only problem is, when I click the submit button, the follow up program only displays data that was highlighted/selected in the right select box, not all of the data in the right select box. I don't know how to tell the script, via javascript, to highlight everything in the right select box when the submit form button is clicked. I would think i could just call a function via -onClick for the submit button. I could use some help with the function to select all data in that list. I can post code if it is helpful. Thanks, Taylor |
|||||||