HTML - Forms: How To Insert A Drop Down Menu Navigating System For Different Scenarios?
Hi,
I wish to insert a drop down menu system on a page on my website that does the following (example). Drop Down Menu 1 "Product" --------------------------------------- Please select 0 Product A 1 Product B 2 then when you select e.g. Product A from this menu, this opens a new drop down menu called "Colour" directly below the original drop down menu-1 Drop Down Menu 2 "Colour" --------------------------------------- Please select 0 Green 1 Red 2 But if you select Product B from the first menu, it opens a slightly different drop down menu called "Size" Drop Down Menu 3 "Size" --------------------------------------- Please select 0 Medium 1 Small 2 So basically initially i want only Menu 1 visible, but when you select different options within the menu, you get a different drop down menu selection so basically different drop down menu selections for various scenarios based on the selection in the first menu so from menu 1, selecting: - Product A gives a menu about its colour - Product B gives a menu about its size - Product x gives a menu about its y so many thanks for all of you that help me. sorry for sounding confusing or stupid, i just dont know the correct jargon for my aims thanks Similar TutorialsSo here's hoping you fine people will be able to help me I've found similar things, but not like this. I have a HTML Form, just a normal simple form, the data is sent using POST method to PHP, PHP has a thank you page, I get the E-Mail easy! >> Boring Part Start << This website is a online booking form for holidays in Cornwall, UK. People enter there info, then the party info. The thing is people in the party could be 1, could be 5, could be 8, or even just 2. >> Boring Part End << I Want A Drop Down Menu that will be able to hide forms or show forms So, it goes like this Title First Name Last Name Date Of Birth [field] [field] [field] [field] [field] [field] [field] [field] [field] [field] [field] [field] But I want it so, if someone picks the number 1 from this drop down list, only the first row of forms, or if someone picks 5, it shows 5 rows and if someone clicks 2, it only shows 2. I was wondering if I could use the Drop Down to hide DIV's or something and put each row in a DIV. Oh and btw, the fields are in tables at the moment. I made that more complicated then I should off ... lol. My HTML skill isn't that good, but I'll get my hands dirty if I must. Jme Hello - I am using a Selection/Drop Down box in my form. I use a database to populate the drop down box, which is working fine. A sample bit of the result would look like this: <option value="1">California> <option value="2">Nevada> etc. etc. This appears to be working just fine - the drop down box is fully populating and displaying as expected. My form "action" needs to "know" which option was selected, so that it can send the ID value (1,2,3,etc) to the next page and continue executing accordingly. The only area where I am having trouble is in this line: <form method="post" action="details.php?id=[[WhatGoesHere??]] ">... (note that "details.php" is a valid file, works great if I hard code this line with a valid ID #) I am totally unclear as to what code should go after 'id=' This is easy, right? I just don't know the syntax/code. Do I have to go to Javascript to get the <option value> of the selected item? Doesn't the form have a way to give me this value? I am ok with PHP, not as good with Javascript, if I have to go there to do this. thanks, Wtc Hi there, I was wondering if anyone knew of a good resource site, that I could get the code for a single-select form element for countries. Here comes the tricky bit.... I want to have the drop downs in Italian, Russian, Polish and Spanish with the option value being country code. Any suggestions???? All help as always is greatly appreciated on this, I will continue my search and if I find an answer I will post it. Thanks Greg http://www.danielbourne.net/pdwcs/1/about.html this seems to work fine in firefox but in internet explorer creates pading and i cant see how could someone lease look and see what im doing wrong ? Hi, i have webpage with tab when i choose another page in tab , another page should load in div tag without refreshing the whole page. is that possible ? please guide me to do that ? Hi guys, I've been frustrated for awhile trying to fix three of my problems. I just started making a site for myself today, the specific one is http://www.bcsticketsnow.com/rosebowl.html Anyway, I've got three problems, and appreciate any help anyone can offer on any of them: 1. I'm new to frames, and am told to stay clear of it. But I don't know php, so this is the only way I know to make a header, middle and footer on all 20 pages that I'm going to have where I only need to edit one to change all. So I have 3 frames in the frameset, header, mainrosebowl, and footer. I understand that cols="220,*,100" will make the header 220 pixels, the footer 100 px, and the middle part the rest of the window. But I'm trying to figure out a way to have it go deeper than the window. As you can tell, I've got a scroll bar on that middle frame. I want that frame to extend to more than 100% and push the footer below the visible window. So I'm really looking for a big scroll bar for the entire window to scroll down, not a mini scroll bar just for the middle frame. Is this possible? Having the cols add up to only the size of the window isn't what I'm looking for. 2. In the header frame, I've got that drop down menu (says "Bowl Events"). When I put the form in for the drop down menu, it kind of expanded the height of the table. It had less space before in that row of the table with the blue background. When I put the form in there, it kinda messed up the spacing. I essentially want to delete that space below bowl events to make the height of the row of that table like half the size. Any ideas? 3. For that same drop down menu, I'm trying to target each link in that menu to open up a new window (like target="_top"). But putting it after <option value="URL" target=..."> does nothing. Am I supposed to put it in the javascript? Here's what I have now: <script type="text/javascript"> function goToPage(dd) { var ind = dd.selectedIndex; if (ind == 0) { return; } var url = dd.options[ind].value document.location=url; } </script> <form> <select name="eventlist" onChange="goToPage(this); return false;" size="1" style="border: 0; BACKGROUND: navy; COLOR: white; FONT-FAMILY: arial; FONT-SIZE: 15px; font-weight: bold;"> <option value="">Bowl Events</option> <option value="http://www.bcsticketsnow.com/bcschampionship.html" onclick="header.location.href='_top'">BCS Championship</option> <option value="http://www.bcsticketsnow.com/rosebowl.html">2009 Rose Bowl</option> <option value="http://www.bcsticketsnow.com/orangebowl.html">2009 Orange Bowl</option> <option value="http://www.bcsticketsnow.com/fiestabowl.html">2009 Fiesta Bowl</option> <option value="http://www.bcsticketsnow.com/sugarbowl.html">2009 Sugar Bowl</option> <option value="http://www.bcsticketsnow.com/chickfilabowl.html">2009 Chick-Fil-A Bowl</option> <option value="http://www.bcsticketsnow.com/capitalonebowl.html">2009 Capital One Bowl</option> <option value="http://www.bcsticketsnow.com/cottonbowl.html">2009 Cotton Bowl</option> <option value="http://www.bcsticketsnow.com/holidaybowl.html">2009 Holiday Bowl</option> </select></form> I have a general question about something I'm trying to incorporate into a site. I don't have a link to show since I haven't figured out a good way to do this yet. I have a page (page.html) with a button. The button brings up a layer with j01.html in it. I want to be able to click "next" in j01.html and have it call up j02.html in the same window. A next button in j03.html will bring up j04.html and so on, for about 15-20 pages. A "back" button will go backwards through the same sequence, and an "index" button will bring up an index of those pages within that popin. Basically, it will be like a minisite within the grander site for that little area. What's a good way to do this? I'm hoping there's an easy way to code the link so that j02.html will replace j01.html in the same layer and so forth, leaving the page.html alone and that it won't require some super huge scary amount of scripting. This is the first time I'm trying to figure any of this out and it makes my head hurt. Thanks in advance for your replies. -dd Greetings; Can someone spot my error he My webpage has 4 dropDown Menu FORMs. DropDown Menu FORMs 1,3 and 4, work fine. But clicking on FORM/Menu #2 does nothing. Very troubling. Can someone spot my error below? Thanks...vmars : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title> Your Title Here </title> <meta name="Generator" content="AlleyCode HTML Editor"> <meta name="Description" content="Your description here..."> <meta name="Description" content="...Created by ddMenu % HotBasic..."> <meta name="Keywords" content="Your keywords here..."> </head> <body> <div align="center"> <table> <tr> <td align="center"> <form name="HotBasic"> <select style="font-size:16px;color:#006699;font-family:tahoma;background-color:#ffffff;" name="menu" onChange="location=document.HotBasic.menu.options[document.HotBasic.menu.selectedIndex].value;"> <option value="">HotBasic</option> <option value="http://tech.groups.yahoo.com/group/hotbasic/">HotBasic Group @ Yahoo</option> <option value="http://mypages.cwdom.dm/keenej/hotbasic.html">HotBasic Home Page</option> </select></form> </td> <td align="center"> <form name="YouTube Related"> <select style="font-size:16px;color:#006699;font-family:tahoma;background-color:#ffffff;" name="menu" onChange="location=document.YouTube Related.menu.options[document.YouTube Related.menu.selectedIndex].value;"> <option value="">YouTube Related</option> <option value="http://www.youtube.com/">YouTube.com</option> <option value="http://www.downloader9.com/">Save YouTube videos to AVI</option> <option value="http://www.getaudiofromvideo.com/">YouTube to Mp3</option> </select></form> </td> </tr> <tr> <td align="center"> <form name="Euphoria"> <select style="font-size:16px;color:#006699;font-family:tahoma;background-color:#ffffff;" name="menu" onChange="location=document.Euphoria.menu.options[document.Euphoria.menu.selectedIndex].value;"> <option value="">Euphoria</option> <option value="http://openeuphoria.org/EUforum/index.cgi">OpenEuphoria.org</option> <option value="http://docs.wxwidgets.org/stable/wx_wxboxsizer.html">wxWidgets wxBoxSizer</option> <option value="http://docs.wxwidgets.org/stable/wx_wxscrolledwindow.html">wxWidgets Docs wxScrolledWindow</option> <option value="http://docs.wxwidgets.org/stable/wx_sizeroverview.html">wxWidgets Programming with wxBoxSizer</option> </select></form> </td> <td align="center"> <form name="AutoIt3"> <select style="font-size:16px;color:#006699;font-family:tahoma;background-color:#ffffff;" name="menu" onChange="location=document.AutoIt3.menu.options[document.AutoIt3.menu.selectedIndex].value;"> <option value="">AutoIt3</option> <option value="http://www.autoitscript.com/forum/index.php?showforum=2">AutoIt3 General Help and Support</option> <option value="http://www.autoitscript.com/forum/index.php?showforum=10">GUI Help and Support Forum</option> <option value="http://www.autoitscript.com/forum/index.php?showforum=9">Example Scripts</option> </select></form> </td></tr> </table> </div> </body> </html> I have a drop down menu on my page, and I want to change the background color of the box from white to match the rest of the page, how do I do this. Thanks Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="language" content="english"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>Welcome to my Home Page</title> <script language="JavaScript" type="text/javascript"> ////The source for this script came from http://allwebco-templates.com/support/S_menus_dropdown.htm//// ///For the Game,I changed the back ground picture. I realize it's not JS/// <!-- function land(ref, target) { lowtarget=target.toLowerCase(); if (lowtarget=="_self") {window.location=loc;} else {if (lowtarget=="_top") {top.location=loc;} else {if (lowtarget=="_blank") {window.open(loc);} else {if (lowtarget=="_parent") {parent.location=loc;} else {parent.frames[target].location=loc;}; }}} } function jump(menu) { ref=menu.choice.options[menu.choice.selectedIndex].value; splitc=ref.lastIndexOf("*"); target=""; if (splitc!=-1) {loc=ref.substring(0,splitc); target=ref.substring(splitc+1,1000);} else {loc=ref; target="_self";}; if (ref != "") {land(loc,target);} } //--> <!-- /// The JS below is for the date and time. and i got the sorce from http://www.re-es.org/ /// var day_names = new Array(7) day_names[0] = "Sunday" day_names[1] = "Monday" day_names[2] = "Tuesday" day_names[3] = "Wednesday" day_names[4] = "Thursday" day_names[5] = "Friday" day_names[6] = "Saturday" var month_names = new Array(12) month_names[0] = "January" month_names[1] = "February" month_names[2] = "March" month_names[3] = "April" month_names[4] = "May" month_names[5] = "June" month_names[6] = "July" month_names[7] = "August" month_names[8] = "September" month_names[9] = "October" month_names[10] = "November" month_names[11] = "December" date_now = new Date() day_value = date_now.getDay() date_text = day_names[day_value] month_value = date_now.getMonth() date_text += " " + month_names[month_value] date_text += " " + date_now.getDate() date_text += ", " + date_now.getFullYear() minute_value = date_now.getMinutes() if (minute_value < 10) { minute_value = "0" + minute_value } hour_value = date_now.getHours() if (hour_value == 0) { greeting = "Good Morning " time_text = " at " + (hour_value + 12) + ":" + minute_value + " AM" } else if (hour_value < 12) { greeting = "Good Morning " time_text = " at " + hour_value + ":" + minute_value + " AM" } else if (hour_value == 12) { greeting = "Good Afternoon " time_text = " at " + hour_value + ":" + minute_value + " PM" } else if (hour_value < 17) { greeting = "Good Afternoon " time_text = " at " + (hour_value - 12) + ":" + minute_value + " PM" } else { greeting = "Good Evening" time_text = " at " + (hour_value - 12) + ":" + minute_value + " PM" } document.write(greeting + " Today is " + date_text + time_text) //--> </script> <link rel="stylesheet" type="text/css" href="css/main.css"> </head> <body> <div id="container"> <p><img id="banner" src="images/banner.gif" alt="banner"></p><hr color="#FF0000"></p> <ul id="nav"> <li><form action="#" method="post"> <select name="choice" size="1" onChange="jump(this.form)" class="dropdown"> <option value="index.html" selected>Home</option> <option value="scripts_developed.html">Scripts Developed</option> <option value="best_practices.html">Best practices for JavaScript coding</option> <option value="ajax.html">AJAX</option> <option value="JavaScript_frustrations.html">JavaScript frustrations & Javascript Game</option> </select> </form> </li> </ul> <div id="content"></div> </div> <table width="1050" border="0" align="center"> <tr> <td align="center"><p><img src="images/logo1.gif" width="300" height="300" hspace="30"><img src="images/logo3.gif" width="300" height="300"><img src="images/logo2.gif" width="300" height="300"></p> <p><img src="images/logo4.gif" width="300" height="300" hspace="30"><img src="images/logo5.gif" width="300" height="300"><img src="images/logo6.gif" width="300" height="300"></p></td> </tr> </table> <p> </p> <p> </p> </body> </html> Hey, Kinda new to this so bare with me. Im using Trellian web page to do some updating on our companies' website and they just asked me to make up a sort of parts catalog for our inventory we have here. I thought the best way for the person visiting the website to find the parts they need is to have drop down menus.Ive been trying so hard to make this but i just keep failing. This is what i want to do. The first one would ask "Make..." they would click that and scroll down the list to find the Make of their machine. Once they click their machine, another drop down menu would appear underneath of that asking the model and the menu would contain all the models associated with the make of the machine. And i want to have another one appear under that once they click on the model. Is there anything or any place where i can find a nice tutorial on how to make this dream come true.....? something like this http://www.wengers.com/Parts/TractorParts.aspx I have the following drop down menu. HTML Code: <form> <select name="menu" style="font-family:'Arial';color:#FFFFFF;background-color:#000000;font-size:10pt;"> <option value="no link no action">title of menu</option> <option value="url 1">link 1</option> <option value="url 2">link 2</option> <option value="url 3">link 3</option> <option value="url 4">link 4</option> </select> <input type="button" onClick="location=this.form.menu.options[this.form.menu.selectedIndex].value;" value="GO" style="font-family:'Arial';color:#FFFFFF;background-color:#000000;font-size:10pt;"> </form> Here is a screen capture of what the menu looks like. It's at this point I want no action to take place when "go" is clicked. As it is now (above code) it refreshes current page. My question is how do I change this so that the first "option" has no action when chosen and then "go" is clicked. As is is right now it refreshes the current page being that between the quotes <option value=" HERE ">title of menu</option> there isn't a link because I don't want this option to do anything. Basically when the drop down menu shows "title of menu" and I click on "go" I want nothing to happen instead of a refresh. Good day guys... is there anyone who can share about drop down menu's Hey guys, I am very new to web design, however have some basic knowledge of html. I am designing a simple site which needs a drop down menu tab for only ONE TAB in the nav bar. See the following site for an example: http://www.dynamicdrive.com/dynamici...wntabsdemo.htm Again I need a drop down menu for only one tab. How do I achieve this? Hi, Basically i have an index page with two frame, a navigation frame for the top and a main frame for the information, i have a drop down menu in the navigation frame. But the problem is, the drop down menu cant all bee seen when it drops over the main frame. Does anyone know a solution to this problem, i tried using an Iframe instead of normal frames, but that leaves a big gap between the end of the drop down menu and the start of the information. I have also tried using the <div> tags this also didnt help, i was wondering if there is a way to set the order in which the frames are displayed,so the navigation frame is displayed over the main frame. Any help would be great. Thanks for your time. mmarab. Hey guys, I need help making a drop down menu. I know how to make a basic one, but this is what I need... I want to have 4 drop down menus, with about 4 choices in each one. Under them I need a 'Submit" button. Basically, I need it so that any combination of the 4 choices in the 4 menus will open a specific page. For instance, lets say in menu 1 I pick the word "cat". In menu 2, I pick the word "dog". In menu 3 I pick the word "car". In menu 4 I pick the word "tree". Once I click submit, a page with a picture of a cat, dog, tree and car would open up. (I would provide all the possible different pictures). So how would one do this? Any help is GREATLY appreciated, thanks! Hello All, I am new to coding and looking to self teach myself with the help of this forum so I can design my own web site. I am looking for the best solution for searching a database. The database will for example contain USA States and Cities with the final result being an item or thing etc. that the search criteria points to. Let's say for example I want to know where all the Dentists are in the State of Maryland. I found this example below and It creates the option to choose a state however how do you make it accept your choice once chosen and go to the next webpage for the next lookup or whatever you decide to have it do next. I guess what I am asking is how do you make a Search or Go button take you to your drop down search criteria. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html><head> <meta http-equiv="Content-Type" content="text/html; charset=unicode"> <meta content="MSHTML 6.00.2900.3429" name="GENERATOR"></head> <body><select name="state" size="1"> <option value="NA" selected="">Select A State</option> <option value="Blank">--------------------</option> <option value="AL">Alabama</option> <option value="AK">Alaska</option> <option value="AZ">Arizona</option> <option value="AR">Arkansas</option> <option value="CA">California</option> </select> </body></html> Thanks for any assistance... I am sure there is a simple answer to this Hi All! I would like to make a drop down box with all the departments of my company. Basically the user would select a dept and without refreshing or opening a new page the information would appear below. I have seen this before using a database but is there a way to do it without? So, I am new to html, but I want my site to have a drop down menu, much like that of IBM's. http://www.ibm.com/us/en/sandbox/ver2/ Is this even possible with HTML? If so, where do I start? Regards, YahtzeeFish Hai everybody.. I want to create a html drop down menu. I created a menu using template toolkit, but i want to create this in html code.Caan anyone help. Pls find here what i done. { title = 'Enterprise Name' type = 'select' dropdown_field = arr_Ent_NameId (This is the array which contains all the data i.e enterprise name. name = 'ent_id' } How can i do this in html. In the select and value button , how can i use this array |