JavaScript - Need To Compare Items In A Drop Down List.
I want to compare items based on what the user picks there will be 3 drop down menus and the drop down menus should alter the HTML table each time it is changed, giving different option values and stuff. I am wondering how to go about this I have the basic stuff setup but I am not really sure how to add to a table that all 3 options use. Any help would be greatly appreciated.
Here is my current code for the drop downs. Code: <form name="compare"> <select name="compare"> <option value="V1">Value 1</option> <option value="V2">Value 2</option> <option value="V3">Value 3</option> <option value="V4">Value 4</option> </select> <select name="compare2"> <option value="V1">Value 1</option> <option value="V2">Value 2</option> <option value="V3">Value 3</option> <option value="V4">Value 4</option> </select> <select name="compare3"> <option value="V1">Value 1</option> <option value="V2">Value 2</option> <option value="V3">Value 3</option> <option value="V4">Value 4</option> </select> <input type="button" onClick="location=document.jump.menu.options[document.jump.menu.selectedIndex].value;" value="Compare"> </form> I want the user to select one of the options from above and a table to show up showing the differences between the others for example; someone selects Value 1 for compare, and Value 2 for compare 2, and Value 3 for Compare 3, they should be shown a table which has the differences between Value 1, Value 2, Value 3. So lets say Value 1 and Value 3 offers you "Help" while value 2 doesn't. it should show a table that says Features Value 1 Value 2 Value 3 Help YES NO YES how would I go about doing this? Similar TutorialsI have a php web page with a list box. I select 4 items in the list and then submit to another php file to do some processing with those selected items. Then that script calls the original script - here's my question: Is there anyway to keep the four items selected when the original page is called again? Right now only one of the items is selected. I was thinking if the itemindex is 'remembered' then maybe the other items can be too? Or no? Thanks Hi all, I have been struggling on a bit of code for a while now. I need to populate a second drop down list (Region) based upon the selection of the first (County). I have found a piece of code that works on its own and have adapted to suit my needs - see below. However, when I drop it into my main page the javascript is not working. It's because of the formObject but I just don't know enough to resolve this! Furthermore, I need the textboxes the user has already completed in the form to retain their value once the javascript kicks in as the completed form will submit to a database. This piece of code is working well . . . . Code: <?php $link = mysql_connect('myhost', 'myusername', 'mypassword') or die('Could not connect: ' . mysql_error()); mysql_select_db('mydatabase') or die('Could not select database'); if(isset($_GET["County"]) && is_numeric($_GET["County"])) { $County = $_GET["County"]; } if(isset($_GET["Region"]) && is_numeric($_GET["Region"])) { $Region = $_GET["Region"]; } ?> <script language="JavaScript"> function autoSubmit() { var formObject = document.forms['theForm']; formObject.submit(); } </script> <form name="theForm" method="get"> <!-- County SELECTION BASED ON city VALUE --> <?php ?> <select name="County" onChange="autoSubmit();"> <option value=''</option> <?php //POPULATE DROP DOWN MENU WITH COUNTRIES FROM A GIVEN city $sql = "SELECT * FROM county_regions"; $counties = mysql_query($sql,$link); while($row = mysql_fetch_array($counties)) { echo ("<option value=\"$row[CountyID]\" " . ($County == $row["CountyID"]? " selected" : "") . ">$row[County]</option>"); } ?> </select> <?php ?> <br><br> <?php if($County!= null && is_numeric($County)) { ?> <select name="Region" onChange="autoSubmit();"> <?php //POPULATE DROP DOWN MENU WITH RegionS FROM A GIVEN city, County $sql = "SELECT * FROM county_regions WHERE CountyID = $County "; $Regions = mysql_query($sql,$link); while($row = mysql_fetch_array($Regions)) { echo ("<option value=\"$row[CountyID]\" " . ($Region == $row["CountyID"]? " selected" : "") . ">$row[Region]</option>"); } ?> </select> <?php } ?> What follows is my form where the javascript is not working - edited quite a bit to save on space! Code: <head> <script language="JavaScript"> function autoSubmit() { var formObject = document.forms['subform']; formObject.submit(); } </script> </head> <form enctype="multipart/form-data" method="post" action="add_attraction01.php" FORM NAME="FormName"> <input type="hidden" name="MAX_FILE_SIZE" value="32768" /> <label for="Business_name">Business Name</label> <input type="text" size="60" STYLE="color: #FFFFFF; font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-size: 12px; background-color: #72A4D2;" <id="Business_name" name="Business_name" maxlength=60/><font size="1" face="arial" color="red">Required field</font><br /> <label for="StreetAddress">Address</label> <input type="text" size="60" rows="2" id="StreetAddress" name="StreetAddress" maxlength=120/><font size="1" face="arial" color="red">Required field</font><br /> <label for="Town">Town</label> <input type="text" size="25" id="Town" name="Town" maxlength=25/><font size="1" face="arial" color="red">Required field</font><br /> <?php $link = mysql_connect('myhost', 'myusername', 'mypassword') or die('Could not connect: ' . mysql_error()); mysql_select_db('mydatabase') or die('Could not select database'); if(isset($_GET["County"]) && is_numeric($_GET["County"])) { $County = $_GET["County"]; } if(isset($_GET["Region"]) && is_numeric($_GET["Region"])) { $Region = $_GET["Region"]; } ?> <form name = "subform" method="get"> <select name="County" onChange="autoSubmit();"> <option value=''</option> <?php $sql = "SELECT * FROM county_regions"; $counties = mysql_query($sql,$link); while($row = mysql_fetch_array($counties)) { echo ("<option value=\"$row[CountyID]\" " . ($County == $row["CountyID"]? " selected" : "") . ">$row[County]</option>"); } ?> </select> <?php ?> <br><br> <?php if($County!= null && is_numeric($County)) { ?> <select name="Region" onChange="autoSubmit();"> <?php $sql = "SELECT * FROM county_regions WHERE CountyID = $County "; $Regions = mysql_query($sql,$link); while($row = mysql_fetch_array($Regions)) { echo ("<option value=\"$row[CountyID]\" " . ($Region == $row["CountyID"]? " selected" : "") . ">$row[Region]</option>"); } ?> </select> <?php } ?> <input type="text" size="20"id="Tel_No" name="Tel_No" maxlength=20 onkeypress="return isNumberKey(event)"/><font size="1" face="arial" color="red">Required field</font><br /> <br/> <input type="submit" value="Submit your attraction" name="submit" onclick="return BothFieldsIdenticalCaseSensitive();"/> </form> </body> </html> It's probably obvious to you guys!! Thanks in advance for your help. I was recommended to vertically align these list items using javascript. I am needing to vertically align the "identity" and "web presence" list items with each other: http://shilohcreative.gethifi.com/work#/esque Thank you in advance! I haven't been able to find anything about this on here or clear direction on the net, so I'm hoping y'all can help me out. I have a dropdown list that I use to navigate pages on an external website. Currently, my dropdown list will open a new page in my current window. I want to be able to open the page in a new window. I'm sure it's a simple fix, but being somewhat of a noob to Javascript I can't figure out how to solve it. Here's what I have for the navigation dropdown: Code: <FORM ACTION="../cgi-bin/redirect.pl" METHOD=POST onSubmit="return dropdown(this.gourl)"> <SELECT NAME="gourl"> <OPTION VALUE="">Make Your Selection <OPTION VALUE="http://url1.html>Choice 1 <OPTION VALUE="http://url2.html>Choice 2 <OPTION VALUE="http://url3.html">Choice 3 </SELECT> <INPUT TYPE=SUBMIT VALUE="Go"> </FORM> And here's what I have in the header: Code: <SCRIPT TYPE="text/javascript"> <!-- function dropdown(mySel) { var myWin, myVal; myVal = mySel.options[mySel.selectedIndex].value; if(myVal) { if(mySel.form.target)myWin = parent[mySel.form.target]; else myWin = window; if (! myWin) return true; myWin.location = myVal; } return false; } //--> </SCRIPT> Any ideas? I need some help with a drop down menu. I am working on a site with a left menu that slides out, and I've converted it to the top to drop down. So far, it is working ok, but the submenu items need to be below the parent, preferably left aligned. I have played with it a bit and so far can't seem to achieve what I want. See below where I'm clicking Resources and the menu is way too high and over to the right. Thanks in advance for any help. : ) Code: //** Dynamic Drive Equal Columns Height script v1.01 (Nov 2nd, 06) //** http://www.dynamicdrive.com/style/bl...height-script/ var ddequalcolumns=new Object() //Input IDs (id attr) of columns to equalize. Script will check if each corresponding column actually exists: ddequalcolumns.columnswatch=["sidebar-a", "content"] ddequalcolumns.setHeights=function(reset){ var tallest=0 var resetit=(typeof reset=="string")? true : false for (var i=0; i<this.columnswatch.length; i++){ if (document.getElementById(this.columnswatch[i])!=null){ if (resetit) document.getElementById(this.columnswatch[i]).style.height="auto" if (document.getElementById(this.columnswatch[i]).offsetHeight>tallest) tallest=document.getElementById(this.columnswatch[i]).offsetHeight } } if (tallest>0){ for (var i=0; i<this.columnswatch.length; i++){ if (document.getElementById(this.columnswatch[i])!=null) document.getElementById(this.columnswatch[i]).style.height=tallest+"px" } } } ddequalcolumns.resetHeights=function(){ this.setHeights("reset") } ddequalcolumns.dotask=function(target, functionref, tasktype){ //assign a function to execute to an event handler (ie: onunload) var tasktype=(window.addEventListener)? tasktype : "on"+tasktype if (target.addEventListener) target.addEventListener(tasktype, functionref, false) else if (target.attachEvent) target.attachEvent(tasktype, functionref) } ddequalcolumns.dotask(window, function(){ddequalcolumns.setHeights()}, "load") ddequalcolumns.dotask(window, function(){if (typeof ddequalcolumns.timer!="undefined") clearTimeout(ddequalcolumns.timer); ddequalcolumns.timer=setTimeout("ddequalcolumns.resetHeights()", 200)}, "resize") /************************************************************************************************************ (C) www.dhtmlgoodies.com, November 2005 This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website. Terms of use: You are free to use this script as long as the copyright message is kept intact. However, you may not redistribute, sell or repost it without our permission. Thank you! www.dhtmlgoodies.com Alf Magne Kalleland ************************************************************************************************************/ var timeBeforeAutoHide = 700; // Microseconds to wait before auto hiding menu(1000 = 1 second) var slideSpeed_out = 10; // Steps to move sub menu at a time ( higher = faster) var slideSpeed_in = 10; var slideTimeout_out = 25; // Microseconds between slide steps ( lower = faster) var slideTimeout_in = 10; // Microseconds between slide steps ( lower = faster) var showSubOnMouseOver = true; // false = show sub menu on click, true = show sub menu on mouse over var fixedSubMenuWidth = false; // Width of sub menu items - A number(width in pixels) or false when width should be dynamic var xOffsetSubMenu = 0; // Offset x-position of sub menu items - use negative value if you want the sub menu to overlap main menu var slideDirection = 'right'; // Slide to left or right ? /* Don't change anything below here */ var activeSubMenuId = false; var activeMainMenuItem = false; var currentZIndex = 1000; var autoHideTimer = 0; var submenuObjArray = new Array(); var okToSlideInSub = new Array(); var subPositioned = new Array(); function stopAutoHide() { autoHideTimer = -1; } function initAutoHide() { autoHideTimer = 0; if(autoHideTimer>=0)autoHide(); } function autoHide() { if(autoHideTimer>timeBeforeAutoHide) { if(activeMainMenuItem){ activeMainMenuItem.className=''; activeMainMenuItem = false; } if(activeSubMenuId){ var obj = document.getElementById('subMenuDiv' + activeSubMenuId); showSub(); } }else{ if(autoHideTimer>=0){ autoHideTimer+=50; setTimeout('autoHide()',50); } } } function getTopPos(inputObj) { var returnValue = inputObj.offsetTop; while((inputObj = inputObj.offsetParent) != null)returnValue += inputObj.offsetTop; return returnValue; } function getLeftPos(inputObj) { var returnValue = inputObj.offsetLeft; while((inputObj = inputObj.offsetParent) != null)returnValue += inputObj.offsetLeft; return returnValue; } function showSub() { var subObj = false; if(this && this.tagName){ var numericId = this.parentNode.id.replace(/[^0-9]/g,''); okToSlideInSub[numericId] = false; var subObj = document.getElementById('subMenuDiv' + numericId); if(activeMainMenuItem)activeMainMenuItem.className=''; if(subObj){ if(!subPositioned[numericId]){ if(slideDirection=='right'){ subObj.style.left = getLeftPos(submenuObjArray[numericId]['parentDiv']) + submenuObjArray[numericId]['parentDiv'].offsetWidth + xOffsetSubMenu + 'px'; }else{ subObj.style.left = getLeftPos(submenuObjArray[numericId]['parentDiv']) + xOffsetSubMenu + 'px'; } submenuObjArray[numericId]['left'] = subObj.style.left.replace(/[^0-9]/g,''); subObj.style.top = getTopPos(submenuObjArray[numericId]['parentDiv']) + 'px'; subPositioned[numericId] = true; } subObj.style.visibility = 'visible'; subObj.style.zIndex = currentZIndex; currentZIndex++; this.className='activeMainMenuItem'; activeMainMenuItem = this; } }else{ var numericId = activeSubMenuId; } if(activeSubMenuId && (numericId!=activeSubMenuId || !subObj))slideMenu(activeSubMenuId,(slideSpeed_in*-1)); if(numericId!=activeSubMenuId && this && subObj){ subObj.style.width = '0px'; slideMenu(numericId,slideSpeed_out); activeSubMenuId = numericId; }else{ if(numericId!=activeSubMenuId)activeSubMenuId = false; } if(showSubOnMouseOver)stopAutoHide(); } function slideMenu(menuIndex,speed){ var obj = submenuObjArray[menuIndex]['divObj']; var obj2 = submenuObjArray[menuIndex]['ulObj']; var width = obj.offsetWidth + speed; if(speed<0){ if(width<0)width = 0; obj.style.width = width + 'px'; if(slideDirection=='left'){ obj.style.left = submenuObjArray[menuIndex]['left'] - width + 'px'; obj2.style.left = '0px'; }else{ obj2.style.left = width - submenuObjArray[menuIndex]['width'] + 'px' } if(width>0 && okToSlideInSub[menuIndex])setTimeout('slideMenu(' + menuIndex + ',' + speed + ')',slideTimeout_in); else{ obj.style.visibility = 'hidden'; obj.style.width = '0px'; if(activeSubMenuId==menuIndex)activeSubMenuId=false; } }else{ if(width>submenuObjArray[menuIndex]['width'])width = submenuObjArray[menuIndex]['width']; if(slideDirection=='left'){ obj.style.left = submenuObjArray[menuIndex]['left'] - width + 'px'; obj2.style.left = '0px'; }else{ obj2.style.left = width - submenuObjArray[menuIndex]['width'] + 'px' } obj.style.width = width + 'px'; if(width<submenuObjArray[menuIndex]['width']){ setTimeout('slideMenu(' + menuIndex + ',' + speed + ')',slideTimeout_out); }else{ okToSlideInSub[menuIndex] = true; } } } function resetPosition() { subPositioned.length = 0; } function initLeftMenu() { var isMSIE = navigator.userAgent.indexOf('MSIE')>=0?true:false; var browserVersion = parseInt(navigator.userAgent.replace(/.*?MSIE ([0-9]+?)[^0-9].*/g,'$1')); if(!browserVersion)browserVersion=1; var menuObj = document.getElementById('dhtmlgoodies_menu'); var mainMenuItemArray = new Array(); var mainMenuItem = menuObj.getElementsByTagName('LI')[0]; while(mainMenuItem){ if(mainMenuItem.tagName && mainMenuItem.tagName.toLowerCase()=='li'){ mainMenuItemArray[mainMenuItemArray.length] = mainMenuItem; var aTag = mainMenuItem.getElementsByTagName('A')[0]; if(showSubOnMouseOver) aTag.onmouseover = showSub; else aTag.onclick = showSub; } mainMenuItem = mainMenuItem.nextSibling; } var lis = menuObj.getElementsByTagName('A'); for(var no=0;no<lis.length;no++){ if(!showSubOnMouseOver)lis[no].onmouseover = stopAutoHide; lis[no].onmouseout = initAutoHide; lis[no].onmousemove = stopAutoHide; } for(var no=0;no<mainMenuItemArray.length;no++){ var sub = mainMenuItemArray[no].getElementsByTagName('UL')[0]; if(sub){ mainMenuItemArray[no].id = 'mainMenuItem' + (no+1); var div = document.createElement('DIV'); div.className='dhtmlgoodies_subMenu'; document.body.appendChild(div); div.appendChild(sub); if(slideDirection=='right'){ div.style.left = getLeftPos(mainMenuItemArray[no]) + mainMenuItemArray[no].offsetWidth + xOffsetSubMenu + 'px'; }else{ div.style.left = getLeftPos(mainMenuItemArray[no]) + xOffsetSubMenu + 'px'; } div.style.top = getTopPos(mainMenuItemArray[no]) + 'px'; div.id = 'subMenuDiv' + (no+1); sub.id = 'submenuUl' + (no+1); sub.style.position = 'relative'; if(navigator.userAgent.indexOf('Opera')>=0){ submenuObjArray[no+1] = new Array(); submenuObjArray[no+1]['parentDiv'] = mainMenuItemArray[no]; submenuObjArray[no+1]['divObj'] = div; submenuObjArray[no+1]['ulObj'] = sub; submenuObjArray[no+1]['width'] = sub.offsetWidth; submenuObjArray[no+1]['left'] = div.style.left.replace(/[^0-9]/g,''); } sub.style.left = 1 - sub.offsetWidth + 'px'; if(browserVersion<7 && isMSIE)div.style.width = '1px'; if(navigator.userAgent.indexOf('Opera')<0){ submenuObjArray[no+1] = new Array(); submenuObjArray[no+1]['parentDiv'] = mainMenuItemArray[no]; submenuObjArray[no+1]['divObj'] = div; submenuObjArray[no+1]['ulObj'] = sub; submenuObjArray[no+1]['width'] = sub.offsetWidth; submenuObjArray[no+1]['left'] = div.style.left.replace(/[^0-9]/g,''); if(fixedSubMenuWidth)submenuObjArray[no+1]['width'] = fixedSubMenuWidth; } if(!document.all)div.style.width = '1px'; } } menuObj.style.visibility = 'visible'; window.onresize = resetPosition; } window.onload = initLeftMenu; Hi, I am looking for an efficient way to go thru all the list items I have in an unordered page and change an attribute. I know I should be able to do it using getElementsByTagName, but I can't seem to get it all working. Can someone please point me in the right direction? Thanks, Thad Hi, please tell how to dynamically insert items in list box in javascript.That is . When ever new element in stored in oracle that should be listed in listbox I have a scenario where I show a drop-down-with-few-items in a JSP page, to the user. The length of few options in the drop down is greater than that of the drop down's, hence our requirement is to show the hovered (not selected) option as tooltip for user's convenience. I am not able to use title attribute for displaying tooltips in my browser. Now the code in http://dossett.org/11/No_onmouseover_for_options_in_IE/ implements a tooltip for multiple select drop down menu.Can you modify the code for single select I use a ticketing website at a call center. I have javascript injection bookmarks with some of the more common issues, but my issue is even after I populate everything when I try to submit the ticket, it won't recognize that somethign is there unless i go through and hit enter in each form i autopopulated. javascript:if((top.arid1000000000.value="Inquiry - ")!=""); Most are drop down lists. Is there any way to submit each form(when i hit enter) after the text gets entered in there? Hi There. I've been reading this forum for quite sometime, but today is my first post, hope you guys can help. Here is how the code works: (its like a phone directory) -User first selects the dept. -Once selected, a second drop down populates with the names of each person in that department. -I want the contact info to show on the page once they select this last step. I need for when the user selects this second options for a link to open inside a iFrame inside of the same html page. I uploaded the file here for you to see: www.pioneer-energy.us/tf2/contact-us.html Here is the code for the HTML doc: Code: <body bgcolor="#ffffff" text="#000000" link="#0000ff" vlink="#800080" alink="#ff0000" onLoad="fillCategory();"> <FORM name="drop_list" action="yourpage.php" method="POST" > <SELECT NAME="Department" onChange="SelectSubCat();" > <Option value="">Select Department</option> </SELECT> <SELECT id="SubCat" NAME="SubCat"> <Option value="">SubCat</option> </SELECT> </form> Here is the .js file code Code: function fillCategory(){ // this function is used to fill the category list on load addOption(document.drop_list.Department, "Executive-Management", "Executive Management"); addOption(document.drop_list.Department, "Marketing", "Marketing", ""); addOption(document.drop_list.Department, "Annuities", "Annuities", ""); addOption(document.drop_list.Department, "Underwriting/Case Management", "Underwriting/Case Management", ""); addOption(document.drop_list.Department, "Human Resources", "Human Resources", ""); addOption(document.drop_list.Department, "Commissions", "Commissions", ""); addOption(document.drop_list.Department, "Policy Owner Services", "Policy Owner Services", ""); addOption(document.drop_list.Department, "Information Technology", "Information Technology", ""); addOption(document.drop_list.Department, "APS", "APS", ""); } function SelectSubCat(){ // ON selection of category this function will work removeAllOptions(document.drop_list.SubCat); addOption(document.drop_list.SubCat, "", "SubCat", ""); if(document.drop_list.Department.value == 'Executive-Management'){ addOption(document.drop_list.SubCat,"MartyGreenberg", "Marty Greenberg - President"); addOption(document.drop_list.SubCat,"LisaGreenberg ", "Lisa Greenberg - Vice President"); addOption(document.drop_list.SubCat,"CraigBrown", "Craig Brown - CFO"); addOption(document.drop_list.SubCat,"RitaBogan", "Rita Bogan - Executive Secretary & Case Management"); addOption(document.drop_list.SubCat,"DianaGreenberg", "Diana Greenberg - Underwriting Manager"); } if(document.drop_list.Department.value == 'Marketing'){ addOption(document.drop_list.SubCat,"RonBielefelt", "Ron Bielefelt - Chief Marketing Officer"); addOption(document.drop_list.SubCat,"PeterMilanez", "Peter Milanez - Brokerage Manager"); addOption(document.drop_list.SubCat,"MarkRBugli", "Mark R. Bugli - CLU, ChFC "); addOption(document.drop_list.SubCat,"HowardMandel", "Howard Mandel - Director of Business Development"); addOption(document.drop_list.SubCat,"DeborahSanchez", "Deborah Sanchez - Brokerage Supervisor "); addOption(document.drop_list.SubCat,"SylviaMariscal", "Sylvia Mariscal - Life Settlements"); addOption(document.drop_list.SubCat,"PeterMilanez", "Peter Milanez - Brokerage Manager"); addOption(document.drop_list.SubCat,"JosephTanner", "Joseph Tanner - Brokerage Manager Assistant", ""); } if(document.drop_list.Department.value == 'Annuities'){ addOption(document.drop_list.SubCat,"SethMoses", "Seth Moses - Director of Annuities"); addOption(document.drop_list.SubCat,"SteveAvila", "Steve Avila - Assistant to Seth Moses"); } if(document.drop_list.Department.value == 'Underwriting/Case Management'){ addOption(document.drop_list.SubCat,"DianaGreenberg", "Diana Greenberg - Underwriting Manager"); addOption(document.drop_list.SubCat,"KimberlyFleming", "Kimberly Fleming - Case Manager "); addOption(document.drop_list.SubCat,"LarissaBurton", "Larissa Burton - Case Manager Assistant to Kimberly Fleming"); addOption(document.drop_list.SubCat,"MariaAntebi", "Maria Antebi - Case Manager"); addOption(document.drop_list.SubCat,"LilianaGalvan", "Liliana Galvan - Case Manager"); addOption(document.drop_list.SubCat,"KimberlyKoontz", "Kimberly Koontz - Case Manager Assistant to Liliana Galvan"); addOption(document.drop_list.SubCat,"ChastaSpikes", "Chasta Spikes - Case Manager"); addOption(document.drop_list.SubCat,"SylviaMarsicalShank", "Sylvia Marsical-Shank - Case Manager"); addOption(document.drop_list.SubCat,"TriciaRomain ", "Tricia Romain - Case Manager"); addOption(document.drop_list.SubCat,"BetoRuiz", "Beto Ruiz - Case Manager"); addOption(document.drop_list.SubCat,"DavidGarcia", "David Garcia - Case Manager Assistant"); } if(document.drop_list.Department.value == 'Human Resources'){ addOption(document.drop_list.SubCat,"MarieOkamura", "Marie Okamura - Human Resources Director"); } if(document.drop_list.Department.value == 'Commissions'){ addOption(document.drop_list.SubCat,"WalterHelbig", "Walter Helbig, FLMI - Licensing"); addOption(document.drop_list.SubCat,"KenFong", "Ken Fong - Licensing"); addOption(document.drop_list.SubCat,"JimTigrak", "Jim Tigrak - Commissions"); } if(document.drop_list.Department.value == 'Licensing'){ addOption(document.drop_list.SubCat,"TessSlezak ", "Tess Slezak - Licensing"); addOption(document.drop_list.SubCat,"ArleneAuerhan ", "ArleneAuerhan - Licensing"); addOption(document.drop_list.SubCat,"JimTigrak", "Jim Tigrak - Forms & Supplies"); } if(document.drop_list.Department.value == 'Policy Owner Services'){ addOption(document.drop_list.SubCat,"LanTran", "Lan Tran - Policy Services"); addOption(document.drop_list.SubCat,"GianSanchez ", "Gian Sanchez - Receptionist"); addOption(document.drop_list.SubCat,"ArmonTodd ", "Armon Todd - Office Support"); } if(document.drop_list.Department.value == 'Information Technology'){ addOption(document.drop_list.SubCat,"HenryCholakyan ", "Henry Cholakyan - IT Director"); } if(document.drop_list.Department.value == 'APS'){ addOption(document.drop_list.SubCat,"CarmenAllen ", "Carmen Allen - APS Supervisor"); } } ////////////////// 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); } Thanks for any help in advanced! Hello All, I am trying to create a three drop down lists for my job. The three drop downs would be: Degree Type (certificate, associate's, bachelor's, etc) Category (Arts & Humanities, Automotive, Computers & IT etc.) Program (Desktop Publishing, Automotive Technician Training, Network Systems, etc.) The Category list needs to be dependent on the degree type and the Program list needs to be dependent on the Category list. I need to have values that will submit to my form but ONLY for the Program List. For example: <option value="CECS">Cisco</option> <option value="CEIT">Information Technology (General)</option> <option value="CEMS">Microsoft</option> <option value="CENSYS">Network Systems</option> Please note that I must use these program codes as values and I cannot use the option name as the value. This does not have to look good, it just needs to work as it is for internal use only within my company. This form will never be used by random web surfers. If someone can point me to a tutorial for a good triple drop down that will pass ONLY the values of the third list, that would be great! Thanks! Hello everyone! =] I need help with Javascript. I want to have a script that if one chooses to register for dinner, then validation will be performed to ensure whether the user have chosen that they are Vegetarian or not. If the user chooses not to attend dinner, then there is no need to validate the Vegetarian option. Here's the code: Code: <p>Register for Conference Dinner?<select type="text" name="conf_dinner" id="conf_dinner"> <option> Please Select </option> <option value="N">No</option> <option value="Y">Yes</option> </select></p> <p> Are you a vegetarian?<select type="text" name="vegetarian" id="vegetarian"> <option value="N">No</option> <option value="Y">Yes</option> </select></p> Hi everyone, My website has 10 drop down lists. And I want to carry out form validation. I have written the code for form validation, but I am not sure where the code should be inserted, nor am I sure how to link it to the click of a submit button. My code (without the form validation function) is as follows: 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" lang="en" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>sample title</title> <script type = "text/javascript"> //<![CDATA[ var opts = []; var age, caste, profession, bachelor, master, doc, country, color, height, marriage, father; function formValues(form, ele) { var form = document.forms[form].elements[ele], val = form.value, index = form.selectedIndex; if (typeof opts[ele] === 'undefined') opts.push(ele); opts[ele] = form.options[index].text; } function processForm() { var set = [ {form: 'age', ele: 'groomage'}, {form: 'caste', ele: 'groomcaste'}, {form: 'profession', ele: 'groomprofession'}, {form: 'bachelor', ele: 'groombachelor'}, {form: 'doc', ele: 'groomdoc'}, {form: 'country', ele: 'groomcountry'}, {form: 'color', ele: 'groomcolor'}, {form: 'height', ele: 'groomheight'}, {form: 'marriage', ele: 'groommarriage'}, {form: 'father', ele: 'groomfather'} ]; for (var i in set) { formValues(set[i].form, set[i].ele); } switch (opts['groomage']) { case '23': age = 0.25; break; case '24': age = 0.35; break; case '25': age = 0.55; break; case '26': age = 0.75; break; case '27': age = 0.99; break; case '28': age = 0.85; break; case '29': age = 0.75; break; case '30': age = 0.65; break; case '31-35': age = 0.45; break; case '36-40': age = 0.35; break; default: age = 0.5; } switch (opts['groomcaste']) { case 'Bania': caste = 0.75; break; case 'Brahmin': caste = 0.99; break; case 'Labanas': caste = 0.75; break; case 'Rajput': caste = 0.85; break; case 'Maravar': caste = 0.80; break; case 'Kayastha': caste = 0.75; break; case 'Bhumihar': caste = 0.80; break; case 'Jat': caste = 0.65; break; case 'Kshatriya': caste = 0.75; break; case 'Kamma': caste = 0.90; break; case 'Reddy': caste = 0.95; break; case 'Vaishya': caste = 0.85; break; case 'Kappu': caste = 0.90; break; default: caste = 0.5; } switch (opts['groomprofession']) { case 'Doctor': profession = 0.85; break; case 'Family Business': profession = 0.65; break; case 'Engineer': profession = 0.75; break; case 'Lawyer': profession = 0.75; break; case 'CA': profession = 0.75; break; default: profession = 0.5; } switch (opts['groombachelor']) { case 'Less than 20,000': bachelor = 0; break; case '20,000 - 30,000': bachelor = 0.25; break; case '30,000 - 40,000': bachelor = 0.35; break; case '40,000 - 50,000': bachelor = 0.45; break; case '50,000 - 70,000': bachelor = 0.65; break; case '70,000 - 1 Lakh': bachelor = 0.75; break; default: bachelor = 0.5; } switch (opts['groomdoc']) { case 'Massachusetts Institute of Technology (MIT)': doc = 0.99; break; case 'Stanford': doc = 0.99; break; case 'Harvard': doc = 0.99; break; case 'Indian Instititute of Technology (IIT)': doc = 0.85; break; case 'Indian Instititute of Management (IIM)': doc = 0.90; break; case 'IIT + IIM': doc = 0.99; break; case 'None of the Above': doc = 0.35; break; default: doc = 0.55; } switch (opts['groomcountry']) { case 'USA': country = 0.99; break; case 'Any Country less developed than India': country = 0.11; break; case 'India': country = 0.55; break; case 'Any European Country/Any Country more developed than India': country = 0.99; break; default: country = 0.55; } switch (opts['groomcolor']) { case 'Pitch Black (Not visible on a moonless night)': color = 0.11; break; case 'Black': color = 0.25; break; case 'Brown': color = 0.35; break; case 'Wheatish (Almost White. Would need some Fair n Lovely)': color = 0.65; break; case 'Fairy White': color = 0.99; break; case 'White': color = 0.85; break; default: color = 0.5; } switch (opts['groomheight']) { case '5\'5"': height = 0.55; break; case '5\'6"': height = 0.65; break; case '5\'4"': height = 0.45; break; case '5\'7"': height = 0.70; break; case '5\'8"': height = 0.75; break; case '5\'9"': height = 0.80; break; case 'Less than 5\'4"': height = 0.11 break; case '5\'10"': height = 0.85; break; case '5\'11"': height = 0.85; break; case 'Greater than 6\'1"': height = 0.85; break; case '6': height = 0.99; break; case '6\'1"': height = 0.99; break; default: height = 0.5; } switch (opts['groommarriage']) { case 'More than 2': marriage = 0; break; case '2': marriage = 0.25; break; case '1': marriage = 0.45; break; case '0': marriage = 0.99; break; default: marriage = 0.5; } switch (opts['groomfather']) { case 'IAS': father = 0.99; break; case 'Family Business': father = 0.65; break; case 'Doctor': father = 0.85; break; case 'Lawyer': father = 0.75; break; case 'Engineer': father = 0.80; break; case 'CA': father = 0.75; break; case 'Engineer + MBA': father = 0.99; break; default: father = 0.5; } } window.onload = processForm; function processOrder() { processForm(); var total = 1.5*age + 3.25*bachelor + profession + 0.75*father + marriage + country + height + (doc + caste + color)/2; var pageNumber = Math.floor(total); //alert(pageNumber); window.open('Page ' + pageNumber + '.html'); } //]]> </script> </head> <body bgcolor="#ADD8E6"> <center> <font size="6"><strong>sample text 1</strong></font> </center> <br /><br /> <br /><br /> <em>*sample text 2</em> <center> <strong>Groom's Age</strong> <form name="age"> <select name="groomage" onclick="formValues('age', 'groomage')"> <option value="a1"></option> <option value="a2">23</option> <option value="a3">24</option> <option value="a4">25</option> <option value="a5">26</option> <option value="a6">27</option> <option value="a7">28</option> <option value="a8">29</option> <option value="a9">30</option> <option value="a10">31-35</option> <option value="a11">36-40</option> </select> </form> <br /> <strong>Groom's Caste</strong> <form name="caste"> <select name="groomcaste" onchange="formValues('caste', 'groomcaste')"> <option value="b1"></option> <option value="b2">Brahmin</option> <option value="b3">Bania</option> <option value="b4">Kayastha</option> <option value="b5">Kshatriya</option> <option value="b6">Bhumihar</option> <option value="b7">Maravar</option> <option value="b8">Reddy</option> <option value="b9">Kamma</option> <option value="b14">Kappu</option> <option value="b10">Jat</option> <option value="b11">Labanas</option> <option value="b12">Rajput</option> <option value="b13">Vaishya</option> </select> </form> <br /> <strong>Groom's Current Profession</strong> <form name="grofession"> <select name="groomprofession" onchange="formValues('profession', 'groomprofession')"> <option value="c1"></option> <option value="c2">Doctor</option> <option value="c3">Engineer</option> <option value="c4">Lawyer</option> <option value="c5">CA</option> <option value="c6">Family Business</option> <option value="c7">Teacher</option> <option value="c8">Journalist</option> <option value="c9">Business Analyst</option> </select> </form> <br /> <strong>Groom's Monthly Salary</strong> <form name="bachelor"> <select name="groombachelor" onchange="formValues('bachelor', 'groombachelor')"> <option value="d1"></option> <option value="d3">Less than 20,000</option> <option value="d4">20,000 - 30,000</option> <option value="d5">30,000 - 40,000</option> <option value="d6">40,000 - 50,000</option> <option value="d7">50,000 - 70,000</option> <option value="d8">70,000 - 1 Lakh</option> </select> </form> <br /> <strong>Groom's Alma Mater</strong> <form name="doc"> <select name="groomdoc" onchange="formValues('doc', 'groomdoc')"> <option value="f1"></option> <option value="f2">Massachusetts Institute of Technology (MIT)</option> <option value="f3">Stanford</option> <option value="f4">Harvard</option> <option value="f5">Indian Instititute of Technology (IIT)</option> <option value="f6">Indian Institute of Management (IIM)</option> <option value="f7">IIT + IIM</option> <option value="f8">None of the Above</option> </select> </form> <br /> <strong>The Groom is working in</strong> <form name="country"> <select name="groomcountry" onchange="formValues('country', 'groomcountry')"> <option value="g1"></option> <option value="g2">India</option> <option value="g3">USA</option> <option value="g4">Any European Country/Any Country more developed than India</option> <option value="g5">Any Country less developed than India</option> </select> </form> <br /> <strong>Groom's Skin Color</strong> <form name="color"> <select name="groomcolor" onchange="formvalues('color', 'groomcolor')"> <option value="h1"></option> <option value="h2">Fairy White</option> <option value="h3">White</option> <option value="h4">Wheatish (Almost White. Would need some Fair n Lovely)</option> <option value="h5">Brown</option> <option value="h6">Black</option> <option value="h7">Pitch Black (Not visible on a moonless night)</option> </select> </form> <br /> <strong>Groom's Height</strong> <form name="height"> <select name="groomheight" onchange="formvalues('height', 'groomheight')"> <option value="i1"></option> <option value="i2">Less than 5'4"</option> <option value="i3">5'5"</option> <option value="i4">5'6"</option> <option value="i5">5'7"</option> <option value="i6">5'8"</option> <option value="i7">5'9"</option> <option value="i8">5'10"</option> <option value="i9">5'11"</option> <option value="i10">6'</option> <option value="i11">6'1"</option> <option value="i12">Greater than 6'1"</option> </select> </form> <br /> <strong>Number of times the Groom has married before</strong> <form name="marriage"> <select name="groommarriage" onchange="formvalues('marriage', 'groommarriage')"> <option value="j1"></option> <option value="j2">0</option> <option value="j3">1</option> <option value="j4">2</option> <option value="j5">More than 2</option> </select> </form> <br /> <strong>Groom's Father's Profession</strong> <form name="father"> <select name="groomfather" onchange="formvalues('father', 'groomfather')"> <option value="k1"></option> <option value="k2">Engineer</option> <option value="k3">Doctor</option> <option value="k4">IAS</option> <option value="k5">Lawyer</option> <option value="k6">CA</option> <option value="k7">IAS</option> <option value="k8">Engineer + MBA</option> <option value="k9">Family Business</option> <option value="k10">None of the above</option> </select> </form> <br /> <input type="button" value="Calculate Dowry Amount" onclick="processOrder()" /> <br /> <br /> <center> <a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="Plebeian42">Tweet</a> <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script> </center> <br /> <div style="width: 100px; margin: 0 auto; padding: 4px;"> <a name="fb_share" type="button_count" href="http://www.facebook.com/sharer.php">Share</a> <script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script> </div> <br /><br /> </body> </html> The code for the FormValidation runs as follows (which I am not sure where to insert), and also not very sure whether it's the correct code or not. Code: function ValidateForm() { si = document.age.groomage.selectedIndex; si_1 = document.caste.groomcaste.selectedIndex; si_2 = document.profession.groomprofession.selectedIndex; si_3 = document.bachelor.groombachelor.selectedIndex; si_4 = document.doc.groomdoc.selectedIndex; si_5 = document.country.groomcountry.selectedIndex; si_6 = document.color.groomcolor.selectedIndex; si_7 = document.height.groomheight.selectedIndex; si_8 = document.marriage.groommarriage.selectedIndex; si_9 = document.father.groomfather.selectedIndex; if (document.age.groomage.options[si].text = " "; alert ('Please select Groom's Age'); if (document.caste.groomcaste.options[si_1].text = " "; alert ('Please select Groom's Caste'); if (document.profession.groomprofession.options[si_2].text = " "; alert ('Please select Groom's Profession'); if (document.bachelor.groombachelor.options[si_3].text = " "; alert ('Please select Groom's Salary'); if (document.doc.groomdoc.options[si_4].text = " "; alert ('Please select Groom's Alma Mater'); if (document.country.groomcountry.options[si_5].text = " "; alert ('Please select the country where Groom lives'); if (document.color.groomcolor.options[si_6].text = " "; alert ('Please select Groom's Skin Color); if (document.height.groomheight.options[si_7].text = " "; alert ('Please select Groom's Height'); if (document.marriage.groommarriage.options[si_8].text = " "; alert ('Please select number of times the Groom has married'); if (document.father.groomfather.options[si_9].text = " "; alert ('Please select Groom's Father's Profession'); } I would appreciate any kind of help. Thanks! Hello i use a javascript to use drop down lists so i display the appropriate products to user. Atm no matter the user option i display 3 drop down lists in whole products. Lets say the drop down lists are like manufacturer/order by/sochet. When the user wish to see "processors" then the sochet list have values, but when he choose "printers" the sochet list is empty since the printers dont contan sochets. In this case i want to hide the sochet drop down list in order to be more familiar to the user is that possible? My js looks like this Code: <script type="text/javascript"> function showUser() { var q=document.getElementById("manuf"); var q_val = q.options[q.selectedIndex].value; var t=document.getElementById("soch"); var t_val = t.options[t.selectedIndex].value; var c=document.getElementById("order"); var c_val = c.options[c.selectedIndex].value; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { var q=document.getElementById("manuf"); var q_val = q.options[q.selectedIndex].value; var t=document.getElementById("soch"); var t_val = t.options[t.selectedIndex].value; var c=document.getElementById("order"); var c_val = c.options[c.selectedIndex].value; if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("txtHint").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","productsdata.php?q=" + q_val + "&t=" + t_val+"&c=" +c_val, true); xmlhttp.send(); } </script> and my drop down lists like PHP Code: <select name="products2" id="soch" onchange="showUser()"> <option value="" selected="selected">Sochet</option> <?php do { ?> <option value="<?php echo $row_sochet['sochet']?>"><?php echo $row_sochet['sochet']?></option> <?php } while ($row_sochet = mysql_fetch_assoc($sochet)); $rows = mysql_num_rows($sochet); if($rows > 0) { mysql_data_seek($sochet, 0); $row_sochet = mysql_fetch_assoc($sochet); } ?> </select> Hi All, I am really stumped. I am not sure why it's not working. Basically, selecting a country will pre-populate the state field for both billing and shipping sections. Please help! Also, when copying the billing info from shipping, the state field doesn't seem to copy over. I have attached the entire code as a text file (part1 + part2 = complete code). Thanks! I am working on a website that involves a pizza. I have a drop down box with the following options: small, medium, large, and extra large. When the user selects small the topping price is $0.75 each, when the user selects medium the topping price is $1.00 each, when the user selects large the topping price is $1.25 each, and when the user selects extra large the topping price is $1.25 each. I the problem is no matter what size the user selects the topping price is always $0.75. Here is code that goes with the drop down box : Code: <td height="49" align="right"><label for="Pizza_Size">Size</label> <select name="Pizza_Size" id="Pizza_Size" onchange = "SetToppingPrice()" /> <option value="Small_Pizza">Small ($4.99)</option> <option value="Medium_Pizza">Medium ($5.99)</option> <option value="Large_Pizza">Large ($7.99)</option> <option value="X_Large_Pizza">X-Large ($10.99)</option> </select></td> Here is the Javascript code: Code: // JavaScript Document function SetToppingPrice() { var Pizza_Topping_Price = document.getElementById("Pizza_Size"); divOutput = document.getElementById("Display_Topping_Price"); if(Pizza_Topping_Price = "Small_Pizza") { divOutput.innerHTML = "$0.75 per topping";} else if (Pizza_Topping_Price = "Medium_Pizza") { divOutput.innerHTML = "$1.00 per topping";} else if (Pizza_Topping_Price = "Large_Pizza") { divOutput.innerHTML = "$1.25 per topping";} else if (Pizza_Topping_Price = "X_Large_Pizza") { divOutput.innerHTML = "$1.50 per topping";} } Any advice is greatly appreciated. i need help on designing a drop down list menu. this rolls down and shows other list of options to click on. i work in dreamweaver so javascripts and others can be incorporated. thanks all Hi everyone, The website that I am trying to create has a couple of drop down lists. I want a variable to store the value (text) of the data field selected from a particular drop down list. Let me explain this with an example: If a dropdown list has data fields like (aa, bb, cc, dd, ee) and if a user selects the option 'bb' , then there should be a variable that stores the text 'bb'. I am using the following piece of code. Can you please take a look at it to tell whether I am doing the correct thing or not. Firstly, the HTML code that generates the drop down list on the page. This works fine. Code: <b> Student's Profession</b> <FORM NAME="Profession"> <SELECT NAME="Student’s Profession"> <OPTION VALUE="k1">Select <OPTION VALUE="k2">Engineer <OPTION VALUE="k3">Doctor <OPTION VALUE="k4">IAS <OPTION VALUE="k5">Lawyer <OPTION VALUE="k6">CA <OPTION VALUE="k7">IAS <OPTION VALUE="k8">Engineer + MBA <OPTION VALUE="k9">Family Business <OPTION VALUE="k10">None of the above </SELECT> </FORM> [Then I have declared a function in JavaScript that stores the value of the data field selected in a particular variable (sel_student_profession). I am not sure about the parameter. Should I simply write 'dropdown' or write the form name? (Profession). Or something else? Code: <script type="text/javascript"> function Selected_profession(dropdown) { var myindex = Profession.selectedindex; var sel_student_profession = Profession.options[myindex].text; return sel_student_profession; } </script> And then at the end of it, if I want to know the value (text) of the data field selected, I call the function. Right now, I am calling the function as follows: Code: var student_profession = Selected_profession(Profession); So, if the user selects "engineer" from the drop down list, student_profession should store "engineer". Am I doing it the correct way? If not, I would highly appreciate any sort of help. Thanks a lot! Hi I saw on a site one drop down list and i wanted to make it auto change. I mean i have this list in my database and everytime i need to change the date manually. Is it possible that these dates changes every day it display as below but it auto change with day.? and not have Saturday and Sunday in them. Thanks for any help : PHP Code: <select name = "date" value="<?php echo "$date" ?>" id = "date" STYLE="width: 200px; border:1px solid #4088b8; color:#111111; font-family:Arial; background:#ffffff;"> <option value="0" >Please Select</option> <option value="02/11/2009 - Monday" >02/11/2009 - Monday</option> <option value="03/11/2009 - Tuesday" >03/11/2009 - Tuesday</option> <option value="04/11/2009 - Wednesday" >04/11/2009 - Wednesday</option> <option value="05/11/2009 - Thursday" >05/11/2009 - Thursday</option> <option value="06/11/2009 - Friday" >06/11/2009 - Friday</option> <option value="07/11/2009 - Monday" >09/11/2009 - Monday</option> <option value="08/11/2009 - Tuesday" >10/11/2009 - Tuesday</option> <option value="09/11/2009 - Wednesday" >11/11/2009 - Wednesday</option> <option value="10/11/2009 - Thursday" >12/11/2009 - Thursday</option> <option value="11/11/2009 - Friday" >13/11/2009 - Friday</option> <option value="14/11/2009 - Monday" >16/11/2009 - Monday</option> <option value="15/11/2009 - Tuesday" >17/11/2009 - Tuesday</option> <option value="16/11/2009 - Wednesday" >18/11/2009 - Wednesday</option> <option value="17/11/2009 - Thursday" >19/11/2009 - Thursday</option> <option value="18/11/2009 - Friday" >20/11/2009 - Friday</option> <option value="21/11/2009 - Monday" >23/11/2009 - Monday</option> <option value="22/11/2009 - Tuesday" >24/11/2009 - Tuesday</option> <option value="23/11/2009 - Wednesday" >25/11/2009 - Wednesday</option> <option value="24/11/2009 - Thursday" >26/11/2009 - Thursday</option> <option value="25/11/2009 - Friday" >27/11/2009 - Friday</option> <option value="28/11/2009 - Monday" >30/11/2009 - Monday</option> <option value="29/11/2009 - Tuesday" >01/12/2009 - Tuesday</option> <option value="30/11/2009 - Wednesday" >02/11/2009 - Wednesday</option> <option value="01/12/2009 - Thursday" >03/12/2009 - Thursday</option> <option value="02/12/2009 - Friday" >04/12/2009 - Friday</option> </select> Best Wishes I was wondering how to go about populating empty fields from a drop down list of different options. Eg. A user selects from a HUGE choice from the drop down list, and this fills their preferences 1-4. If 1 is full, then it populates 2 if another choice is clicked, and so on. Cheers in advance. |