JavaScript - Change 2nd Select Values Based On 1st Select
Hi JS Experts,
I am working on a class registration system that requires students to register for a main class (101, 102 or 103). The student is supposed to select one main course as well as provide a second choice in case the first is not available. I have two dropdown select fields to capture data 1) Choice -1: 101 / 102 / 103 ( Student needs to select one - Reading the classID from classes table) 2) Choice -2: 101 / 102 / 103 ( If student selects 101 in Choice-1 then the only classes available under Choice-2 should be 102 or 103). How can I accomplish the above? Further to this there are two fields on the form where I would like to auto populate based on what they have selected in Choice-1 and Choice-2. For Example: If a parent selects choice1: 101 the child Choice1 field should autopopulate with 100. If a parent selects Choice2: 201 the child Choice2 field should autopopulate with 200 Any help would be really appreciated. Thanks Vinny Similar TutorialsI've been having problems getting my select option to change the options of another select option. I'm not much of a javacsript coder, so I'm at a lost. When I select the first option nothing appears in the second option. here's the javascript code: Code: function createOption(OptionText, OptionValue){ var temp = document.captcha_form("option"); temp.innerHTML = OptionText; temp.value = OptionValue; return temp; } function valChange(){ var firstList = document.getElementById("emailaddress"); var secondList = document.getElementById("subject"); while(secondList.hasChildNodes()) secondList.removeChild(secondList.childNodes[0]); switch(firstList.value){ case "1":{ secondList.appendChild(createOption("Report Site Browsing Issue", Report Site Browsing Issues)); secondList.appendChild(createOption("Report Page Errors", Report Page Errors)); secondList.appendChild(createOption("Other", Other)); break; } case "2":{ secondList.appendChild(createOption("Report Unauthorized Game", Report Unauthorized Game)); secondList.appendChild(createOption("Report Spam", Report Spam)); secondList.appendChild(createOption("Report Harassment", Report Harassment)); secondList.appendChild(createOption("Report Illegal Activities", Report Illegal Activities)); secondList.appendChild(createOption("Request Account Removal", Request Account Removal)); break; } // .... default:{ secondList.appendChild(createOption("Please select from the first list", "")); break; } } } window.onload = valChange; this is the form code Code: <div class="mailto_form"> <form method="POST" id="captcha_form" name="captcha_form" action="../includes/mailform.php"> <div style="padding-bottom: 1em;">Choose Recipient: <select name="emailaddress" id="emailaddress" onchange="valChange();"> <option value=""></option> <option value="1">Webmaster</option> <option value="2">Admin</option> </select> </div> <div style="padding-bottom: 1em;">Subject: <br /><select name="subject" id="subject"> </div> <div style="padding-bottom: 1em;">From: <br /><input type="text" name="email" id="email" value=""> </div> <div style="padding-bottom: 1em;">Enter the text contained in the image into the text box: <br /><img src="../includes/captcha.php" /> <br /><input type="text" name="userpass" value=""> </div> <div style="padding-bottom: 1em;">Message: <br /><textarea name="message" id="message" rows="10" cols="60"><?php echo "</tex" . "tarea>"; ?> </div> <div style="padding-bottom: 1em;"><input name="submit" type="submit" value="Submit"> </div> </form> </div> Link to the page http://www.netgamegurus.com/contact/ I am trying to change a character limit based on items changed in a drop down menu. To do this I have one function that will change the posted count based on the currently selected option and another function that is a commonly used char count with a few tweaks. The main issue is getting the value of the currently selected option. I know that selectedIndex will return the position of the selected element rather than the actual value. I tried to code around that. I've tried every method I could find on google and nothing works. So, I may have a bigger problem on a higher level that I just don't understand. If any of you can take a look at my code and give me your thoughts I would be most appreciative. Thanks! 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" xml:lang="en" lang="en"> <head> <title></title> <script type="text/javascript"> function checkTextArea(fromto){ var textstring = "textarea"; var id = textstring + fromto; var destination = document.forms["form1"].[id.selectedIndex].text; if (destination=="1") { var limit = "500"; } else { var limit = "1000"; } if (document.getElementById(id)){ var txt = document.getElementById(id).value; if (txt.length>limit){ document.getElementById(id).value = txt.substr(0,limit); } len = document.getElementById(id).value.length; span_id = "span" + id; if (document.getElementById(span_id)){ document.getElementById(span_id).innerHTML = (limit-len); } // if } //if } //function function chardisplay(fromto) { var deststring = "dest"; var identifier = deststring + fromto; // no idea how to make this work...seems to stop working whenever I try to assign it to any kind of variable // I have also tried assigning .value and .text // I have also tried naming it with document.forms["form1"].[identifier.selectedIndex] // also using .value and .text var harmless = document.getElementById('identifier').selectedIndex; alert("value="+document.getElementById('identifier').value); alert("text="+document.getElementById('identifier').options.[harmless].text); var spanstring = "spantextarea"; var spanidentifier = spanstring + fromto; if (harmless=="1") { document.getElementById(spanidentifier).innerHTML = "500"; } else { document.getElementById(spanidentifier).innerHTML = "1000"; } } </script> </head> <body> <form id="form1" name="form1" method="POST" action="myurl"> <p><span id="spantextareafrSOMENUMBER">500</span> characters left </p> <select name="destfrSOMENUMBER" onchange="javascript:chardisplay('frSOMENUMBER');\" onfocusout="javascript:chardisplay('frSOMENUMBER');\" onblur="javascript:chardisplay('frSOMENUMBER');\"> <option value="opt1">display option 1</option> <option value="opt2">display option 2</option> <option value="opt3">display option 3</option> </select> <textarea onkeyup="checkTextArea('textareafrSOMENUMBER');" name="mesgfrSOMENUMBER" id="textareafrSOMENUMBER" cols=50 rows=4></textarea> </form> </table> </body> </html> Hello, I am trying to change the value of #name and #category inputs based on the value of select. A friend gave me the code below, but I can't get it to work. Thanks so much for your help Code: <script type="text/javascript"> $('#Gift_Type').change(function(){ if ($(this).val() == 'Monthly'){ $('#name').val('Partnership') $('#category').val('Partnership') } else { $('#name').val('Donation') $('#category').val('Donations') } }) </script> Code: <SELECT NAME="sub_frequency" ID="Gift_Type" onchange="OnSelectionChanged (this)"> <OPTION VALUE="1m">Monthly</OPTION> <OPTION VALUE="">One Time</OPTION> </SELECT> Code: <input type="text" id="name" name="name" value="Partnership" /> <input type="text" id="category" name="category" value="Partnership" /> Hello, I just joined the forum. I'm hoping someone could help me out or point me in the right direction. I am trying to set up a simple interaction for users. The user would be required to select a width then height from two separate drop down menus. I used this as an example to work from: http://www.w3.org/TR/WCAG20-TECHS/wo...dynselect.html The list of heights would not be available until the user selects a width.(similar to the example link above). Each width would have slightly different heights associated with it. After the user selects a width then height an image would be displayed based on that combination. So for example if the user selects 12w/30h they would see "01.jpg" if the user selects 12w/36h they would see "02.jpg". This would all be done on the same page. The user should be able to update the image by combining the different width/height options indefinitely. If anyone has a link to an example or can provide a basic structure I could build of off I would be extremely grateful, thanks. I have a web page created using plsql web toolkit. I want to set the text box values for street line 2 and zip based on user selection in select drop down which is street line 1. The select drop down list is based on a cursor selecting data from the Oracle database. I'm not sure if I need to use an array in the javascript code or if I can set the values some where in my package. Any advice would be appreciated. cursor: Quote: cursor bldglistc is select stvbldg_code, stvbldg_desc, slbbldg_street_line1, slbbldg_city, slbbldg_stat_code, slbbldg_zip from stvbldg, slbbldg where stvbldg_code = slbbldg_bldg_code (+) and stvbldg_desc not like 'DNU%' and stvbldg_desc not like 'Online%' order by slbbldg_bldg_code; bldg_record bldglistc%ROWTYPE; Javascript in package: Quote: htp.p(' <SCRIPT LANGUAGE="JavaScript" TYPE = "text/javascript"> function UpdateNextField(which1,which2,fld1,fld2) { document.getElementById(fld1).value = which1.value; document.getElementById(fld2).value = which2.value; } </SCRIPT> '); Form code from package: Quote: HTP.formopen ('bwgkogad.P_ProcAddrUpdate', 'post'); twbkfrmt.P_FormHidden ('atyp', atyp); twbkfrmt.P_FormHidden ('seqno', seqno); twbkfrmt.p_tableopen ( 'DATAENTRY', cattributes =>G$_NLS.Get('BWGKOAD1-0003','SQL','SUMMARY="This table shows Address Selected for Update."') ); twbkfrmt.p_tablerowopen; twbkfrmt.p_tabledataheader (stvatyp_rec.stvatyp_desc, ccolspan => '5'); twbkfrmt.p_tablerowclose; twbkfrmt.p_tablerowopen; twbkfrmt.p_tabledatalabel ( twbkfrmt.f_formlabel ( g$_nls.get ('BWGKOAD1-0007', 'SQL', 'Address Line 1:'), idname => 'street_line1_input_id' ) ); twbkfrmt.p_tabledataopen (ccolspan => '5'); HTP.formselectopen ( 'str1', '', 1, cattributes => 'ID="street_line1_input_id" onChange="javascript: UpdateNextField(this,this,''street_line2_input_id' ',''zip_input_id'')"' ); OPEN bldglistc; LOOP FETCH bldglistc INTO bldg_record; IF bldglistc%NOTFOUND THEN EXIT; END IF; IF address_rec.spraddr_street_line1 = bldg_record.slbbldg_street_line1 THEN twbkwbis.p_formselectoption ( bldg_record.slbbldg_street_line1, bldg_record.slbbldg_street_line1, 'selected' ); ELSE twbkwbis.p_formselectoption ( bldg_record.slbbldg_street_line1, bldg_record.slbbldg_street_line1 ); END IF; END LOOP; CLOSE bldglistc; HTP.formselectclose; twbkfrmt.p_tabledataclose; twbkfrmt.p_tablerowclose; twbkfrmt.p_tablerowopen; twbkfrmt.p_tabledatalabel ( twbkfrmt.f_formlabel ( g$_nls.get ('BWGKOAD1-0008', 'SQL', 'Address Line 2:'), idname => 'street_line2_input_id' ) ); twbkfrmt.p_tabledata ( twbkfrmt.f_formtext ( 'str2', 70, 75, address_rec.spraddr_street_line2, cattributes => 'ID="street_line2_input_id" readonly' ), ccolspan => '5' ); twbkfrmt.p_tablerowclose; twbkfrmt.p_tablerowopen; twbkfrmt.p_tabledatalabel ( twbkfrmt.f_formlabel ( g$_nls.get ('BWGKOAD1-0013', 'SQL', 'ZIP or Postal Code:'), idname => 'zip_input_id' ) ); twbkfrmt.p_tabledata ( twbkfrmt.f_formtext ( 'zip', NULL, 30, address_rec.spraddr_zip, cattributes => 'ID="zip_input_id" readonly' ), ccolspan => '5' ); twbkfrmt.p_tablerowclose; twbkfrmt.p_tableclose; HTP.para; -- HTP.formsubmit (NULL, G$_NLS.Get('BWGKOAD1-0054','SQL','Submit')); HTP.formreset (g$_nls.get ('BWGKOAD1-0055', 'SQL', 'Reset')); HTP.formclose; Hi, what would be the best way to have a hidden array of possible text directed at a textarea and then if something is not within that array "onfocus", a certain select option is chosen within that form? Thanks Hello, I am trying to make a simple code that has a selection list (with the choice fruit or veggie). When the user chooses fruit, the second list displays the options apple, orange, banana. When the user changes their choice to veggie, the second select list then contains carrot, corn, potatoes (and the apple, orange, banana disappear). I need some advice on how to do this Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Untitled</title> </head> <body> <form name = "form1"> <fieldset> <legend>Fruit or Veggie</legend> <select name = "S1"> <option name = "fruit">Fruit </option> <option name = "veggie">Veggie</option> </select> <select name = "S2" </select> </fieldset> </form> <script language="JavaScript" type="text/javascript"> ??? </script> </body> </html> Ok so let's say I have this dropdown with a list of these items: PALCO TRIBUNA ORO And in a button on the page I want to send it one of those names, let's say I send it ORO, and through Javascript select that in the dropdown list. How is this done? Do I have to iterate through everything, and how? Thanks for any help in the subject. Hi, I'm trying to build up a multi-select filter with checkboxes. I found few good scripts but I've got a problem to adapt them.. The script below can filter results based on criteria (that you can select via checkboxes). The results displayed are checked or unchecked boxes. What I want is : display results with div (for ex:<div>result1</div>) and not checkbox. How can I do that? Code: <script type="text/javascript" src="js/jquery.js.css"></script> <script type="text/javascript"> $(function() { $('#search input:checkbox').click(function() { var classes = $('#search input:checkbox:checked'). map(function() { return $(this).val(); }).get().join('.'); classes = (classes ? '.' : '') + classes; $('#results input:checkbox').attr('checked', false). filter(classes).attr('checked', true); }); }); </script> </head> <body> <div id="search"> <fieldset> <label><input type="checkbox" value="animal"> Animal</label> <label><input type="checkbox" value="vegetable"> Vegetable</label> </fieldset> <fieldset> <label><input type="checkbox" value="small"> Small</label> <label><input type="checkbox" value="large"> Large</label> </fieldset> </div> <div id="results"> <p><input type="checkbox" class="small animal"> Cat</p> <p><input type="checkbox" class="medium animal"> Tiger</p> <p><input type="checkbox" class="large animal"> Elephant</p> <p><input type="checkbox" class="small vegetable"> Pea</p> <p><input type="checkbox" class="large vegetable"> Pumpkin</p> </div> </ul> </body> </html> Thanks for your help Ok so I have a select box where the value must be passed via the form. If the users selects choice B or Choice C then I want a specific div to show. If they choose choice A then I want the div to hide or remain hidden. It should be hidden on page load. Code: <select name="Event_Type_ID"> <option value="1">Choice A</option> <option value="2">Choice B</option> <option value="3">Choice C</option> </select> <div id="showme"> Content to show if EITHER Choice B or C is chosen. Otherwise this div should be hidden. </div> Can anyone lead me in the right direction? Thanks! Here's the code that I'm working with: 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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <script type ="text/javascript"> function HouseSel(){ document.getElementById("HouseSelect").value = '3' alert (document.getElementById("HouseSelect").value); } </script> </head> <body> <form action="https://www.paypal.com/us/cgi-bin/webscr" method="post" name="_xclick"> <select name="item_name" id="HouseSelect"> <option value="0" selected="selected">--Please Select a House--</option> <option value="1">Nags Head</option> <option value="Rent Deposite: Calib ">Calibre</option> </select> <input name="calculate3" type="button" id="calculate3" tabindex="2" onclick="HouseSel(); " value="Calculate"/> </form> </body> </html> But it's still returning the initial value. How do I get it to 3? Dear all, background information: I did code a timesheet management system for my company with PHP where the user has to submit time entries and has an online form with several start and end times. The start and end times are all simple HTML select option dropdowns. I want that the first End time selection will be the next start time selection. Basically a simple dependency of the dropdown. My approach was that I want to solve this with JavaScript. In my php code I am echoing the following (in this select the end times are the values): echo "<select class='normal' name='$field_id' onChange=set_time_hour(this.value,'$field_id_js')>"; When the user changes then the end time dropdown the next field (next start time entry) should be changed accordingly. The javascript looks like this function set_time_hour(hour_value,next_field){ alert (hour_value); alert (next_field); document.getElementById(next_field).value = hour_value; } The alert calls are giving me the right values. but the document.getElementById(next_field).value = hour_value; is not working. What is wrong there? Do you have an idea? How can I change the value of a select box with Javascript? The select box values are already popoluated with PHP so I just want to select the right value. Hello I am trying to create a form which when the submit button is selected will open a new window with 1 of 4 URLs based on the the combination of data in 2 select boxes. For example: if select box 1 = a and select box 2 = a then open new window with URL 1 if select box 1 = a and select box 2 = b then open new window with URL 2 if select box 1 = b and select box 2 = a then open new window with URL 3 if select box 1 = b and select box 2 = b then open new window with URL 4 Any help would be greatly appreciated. Thanks Daniel I have html like this Code: <form> <select name="otype[]" class="txtText" id="otype[]"> <option value="Processing">Processing</option> <option value="Shipped">Shipped</option> </select> some code...... <select name="otype[]" class="txtText" id="otype[]"> <option value="Processing">Processing</option> <option value="Shipped">Shipped</option> </select> some code....... <select name="otype[]" class="txtText" id="otype[]"> <option value="Processing">Processing</option> <option value="Shipped">Shipped</option> </select> I need to change all select lists options to "Shipped" if admin clicks on "Shipped" on top of the page and "Processing" if customer clicks on "Processing" link (<a href="javascript:select_processing()">Processing</a>) Can somebody help me in doing so? I am having trouble writing this javascript for my work, normally I would do this in ASP or PHP, but the environment I am working with will only allow javascript for dynamic function. The form has two different select boxes and based on your options selected for select box #1 and select box #2, the hidden input field "redirect" (which is currently empty) would then populate dynamically with the URL associated with that combination mentioned below. The hidden redirect input field (now containing dyanmically generated data) would then pass the new value via HTTP_POST to .net script that will handle the redirect processing step fed to it. Here are the mappings: If selections = Elementary & Vocabulary = http://www.widget.com/content/elem-vocab If selections = Elementary & Writing = http://www.widget.com/content/elem-writing If selections = Elementary & ELD = http://www.widget.com/content/elem-eld If selections = Middle School & Vocabulary = http://www.widget.com/content/midscl-vocab If selections = Middle School & Writing = http://www.widget.com/content/midscl-writing If selections = Middle School & ELD = http://www.widget.com/content/midscl-eld If selections = High School & Vocabulary = http://www.widget.com/content/hiscl-vocab If selections = High School & Writing = http://www.widget.com/content/hiscl-writing If selections = High School & ELD = http://www.widget.com/content/hiscl-eld Here's a snippet of a different method that I tried, but it did not work. I think the above mentioned method would probably be best. Code: <script language="javascript" type="text/javascript"> <!-- function build() { document.fillgaps.redirect.value = "http://www.widget.com/content/" + document.fillgaps.grade.value + "-" + document.fillgaps.solution.value ; //print example: http://www.widget.com/content/ELM-VOC return true; } --> </script> <form name="fillgaps" action="http://www.widget.com/submit.aspx" method="post" onSubmit="return build();"> <input type="hidden" name="redirect" value=""> <table class="elqFormTable" border="0" cellspacing="2" cellpadding="2"> <tr> <td valign="top">Grade:</td> <td> <select name="grade"> <option value="ELM">Elementary</option> <option value="MID">Middle School</option> <option value="HIG">High School</option> </select> </td> </tr> <tr > <td valign="top">Solution:</td> <td> <select name="solution"> <option value="VOC">Vocabulary</option> <option value="WRI">Writing</option> <option value="ELD">ELD</option> </select> <!--truncated code --> Hi Guys, Im in need of some help with regards to forms. I am looking to build as basic as possible, a form that has 3 select dropdowns that have predetermined options. The user will select the first option and based on that option the second will populate and based on that, the third one will give the last option. Now, when the last one is selected, i need a div or a paragraph displaying information to be displayed. So here's the framework. Option 1 = fruit or vegitables of which fruit is selected is selected by the user Option 2 = Apples, Grapes, and pears of which apples is then selected Option 3 = Red, Green and Yellow of which Green is selected. Once green is selected, I need a description about the green aple to be displayed. Can anyone help me out on this? I am not sure where to begin and my boss is adament it must be done like yesterday. Ay help will be appreciated. Thanks. Hello all, I am having a problem, and since I am quite new in the Javascript code I hope somebody can help me here. This is my current code: Code: <select class="Form" name="opties"> <option value="AAA">AAA</option> <option value="BBB">BBB</option> <option value="SLX" selected>Selecteer optie</option> </select> Now my intention is the following: When the option with value SLX gets selected it needs to get a special css style. It is not a problem to give the option this style in the list itself, but once selected it always changes to the original style (standard font and color) in Chrome and Mozilla. Now I searched on the net and sometimes I find things like this: Code: function displayOption(divName) { document.getElementById(divName).innerText=document.form1.select1.options[document.form1.select1.selectedIndex].value; } <select class="Form" name="opties" onChange="displayOption('div1');"> <option value="AAA">AAA</option> <option value="BBB">BBB</option> <option value="SLX" selected>Selecteer optie</option> </select> But I suppose this always changes the style of the selected item? It only needs to change when the option SLX is chosen... Anyone knows how to solve this problem? the script below should open a new window with a url specified in the select area. However, my script ignores the changes in the select area. it keeps opening the same page. I was wondering could someone take a look and tell me why? Thank you very much. <code> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> Jump Menu</title> <meta http-equiv="content-type" content="text/html;charset=UTF-8" /> <script type="text/javascript"> function jump_menu() { var i=document.getElementById("page_select").selectedIndex; document.getElementById("jump_to_page").onclick=function() { (i==0) ? alert("Please select a page to go"):window.open("http://www."+document.getElementById("page_select").options[i].value); } } window.onload=jump_menu; </script> </head> <body> <select id="page_select"> <option>Select a Page</option> <option value="yahoo.ca">Yahoo</option> <option value="topnews.ru">Top News</option> <option value="google.com">Google</option> <option value="amazon.com">Amazon</option> </select> <button type="button" id="jump_to_page">Go</button> </body> </html> </code> Hey chaps, hope someone can help with this: I have a PHP form, with a couple of dynamic Select menus, which are populated from two SQL tables: // tbl_main_colour: Code: ID, NAME 1, Red 2, Blue 3, Green // tbl_shade_colour: Code: ID, NAME, FK_MAIN_COLOUR_ID 1, Light Red, 1 2, Dark Red, 1 3, Light Blue, 2 4, Dark Blue, 2 5, Light Green, 3 6, Dark Green, 3 What I'm after is something to filter the second select option, after the first select option has been chosen // Select 1: Code: Red // Select 2: Code: Light Red Dark Red I'm pretty sure this is possible, but not sure how to go about it, any help would be most appreciated. Hello, I'm working on a project that involves extracting values from a series of select boxes and then working out the result. The select boxes contain the following: Code: <select name="select_Col1_Row1"> <option value="blue">Blue</option> <option value="green">Green</option> <option value="red>Red</option> </select> <select name="select_Col1_Row2"> <option value="blue" selected="selected">Blue</option> <option value="green">Green</option> <option value="red>Red</option> </select> <input type="text" name="RedSum"> <input type="text" name="BlueSum"> <input type="text" name="GreenSum"> </select> As you can see by my code, I'm early days at this and guessing the steps on the way. I tried using getElementsByTagName on the select and then on the option but had no luck with that. The code below does a wonderful job of returning blue for both select statements... Code: <script type="text/javascript"> function getElements() { var table = document.getElementById("x"); var x = table.getElementsByTagName("option"); for (var i = 0; i < x.length; i++) { var status = x[i].getAttribute("selected"); alert(status); if (status == "selected") { var statushcap = x[i].getAttribute("id"); var statusvalue =x[i].getAttribute("value"); if (statusvalue == "blue") { alert(statusvalue); } } } alert(x.length); } </script> If someone could suggest some way to map the select tag and then extract its option value to being the user selected value, I'd most appreciate it. I can probably do the rest of it. Can you extract additional information from the id of the option that is selected as I'd like to sum additional information from the user's choice. Best, John |