|
HTML - Multiple Drop Down Box With Text Output
Hi All,
I'm trying to create an information page with HTML whereby people can find an address of a store based on the conditional dropdown boxes selected. Based on the choices selected, it would display the results. E.g. Dropdown 1: Select State Dropdown 2: Select Retail Store Output: Address of the retail store (displayed on the same page) I came across a solution in one of the threads for making multiple conditional dropdowns for a form. The code given works extremely well but I'm not sure how to have a text output result on the same page. Can anyone help? Thanks a bunch in advance! HTML Code: <script type="text/javascript">
// Place in this array the ID of the element you want to hide
var hide=['the_minutemen','Planet_Smashers','crass','Madonna',
'the_misfits','next','id2'];
function setOpt()
{
resetOpt(); // Call the resetOpt function. Hide some elements in the "hide" array.
for(var i=0,sel=document.getElementsByTagName('select');i<sel.length;i++)
{
sel[i].onchange=function()
{
if(this.parentNode.tagName.toLowerCase()!='div')
resetOpt(); // Hides the elements in "hide" array when the first select element is choosen
try
{
document.getElementById(this.value).style.display='';
}
catch(e){} ; // When the value of the element is not an element ID
}
}
}
window.addEventListener?window.addEventListener('load',setOpt,false):
window.attachEvent('onload',setOpt);
function resetOpt()
{
for(var i=0;i<hide.length;i++)
document.getElementById(hide[i]).style.display='none'; // Hide the elements in "hide" array
}
</script>
Artist:
<select>
<option value="the_minutemen">The Minutemen</option>
<option value="Planet_Smashers">Planet Smashers</option>
<option value="crass">Crass</option>
<option value="Madonna">Madonna</option>
<option value="the_misfits">The Misfits</option>
</select>
<div id="the_minutemen">
The Minutemen Album:
<select>
<option value="album">The Minutemen album1</option>
<option value="next">Show next 'select' element</option>
<option value="album">The Minutemen album3</option>
<option value="album">The Minutemen album4</option>
<option value="album">The Minutemen album5</option>
</select>
</div>
<div id="Planet_Smashers">
Planet Smashers Album:
<select>
<option value="album">The Planet Smashers album1</option>
<option value="id2">Show element with the id of 'id2'</option>
<option value="album">The Planet Smashers album3</option>
<option value="album">The Planet Smashers album4</option>
<option value="album">The Planet Smashers album5</option>
</select>
</div>
<div id="crass">
Crass Album:
<select>
<option value="album">Crass Album1</option>
<option value="next">Show next 'select' element</option>
<option value="album">Crass Album3</option>
<option value="album">Crass Album4</option>
<option value="album">Crass Album5</option>
</select>
</div>
<div id="Madonna">
Madonna Album:
<select>
<option value="album">madonna Album1</option>
<option value="id2">Show element with the id of 'id2'</option>
<option value="album">madonna Album3</option>
<option value="album">madonna Album4</option>
<option value="album">madonna Album5</option>
</select>
</div>
<div id="the_misfits">
The Misfits Album:
<select>
<option value="album">the_misfits Album1</option>
<option value="album">the_misfits Album2</option>
<option value="album">the_misfits Album3</option>
<option value="id2">Show element with the id of 'id2'</option>
<option value="album">the_misfits Album5</option>
</select>
</div>
<div id="id2">
Element with an ID of "id2"
<select>
<option>Opt1</option>
<option>Opt2</option>
<option>Opt3</option>
</select>
</div>
<div id="next">
"Next" element
<select>
<option>Opt1</option>
<option>Opt2</option>
<option>Opt3</option>
</select>
</div>
Similar TutorialsPlease help. This is what I have so far http://bartletagency.com/m/x2.php Now, obviously with business cards there many different options. I need something to calculate on the side the total after picking each drop box option, or if easier, after hitting "calculate total." (preferably with the numbers in a table so I can make it appear by itself right underwear the send button) . Example: 1000 business cards in blue, say, would need to come up at 50 dollars if they pick 3-1, but if they pick 3-22 it needs to come up 60 dollars if they pick the other color, green, and pick 3-1, the label would need to turn to $55.00, if they pick 3-2 with the color green the label would need to say $65.00 how can i do this please? here is the code I have which made up the PHP file i linked you to above. code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> <html> <head> <title>Lesson 3</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body> <?php if ($_SERVER['REQUEST_METHOD'] != 'POST'){ $me = $_SERVER['PHP_SELF']; ?> <h1 align="center">Business Cards</h1> <form name="form1" method="post" action="<?=$me?>"> <table border="0" align="center" cellpadding="5" cellspacing="0"> <tr> <td align="right" valign="middle">Quantity:</td> <td><select name="Quantity: "> <option value="1000">1000</option> <option value="2500">2500</option> <option value="5000">5000</option> <option value="10,000">10,000</option> </select> </td> </tr> <tr> <td align="right" valign="middle">color</td> <td><select name="color"> <option value="blue">blue</option> <option value="green">green</option> </select> </td> </tr> <tr> <td align="right" valign="middle">3</td> <td><select name="3"> <option value="small">3-1</option> <option value="medium">3-2</option> </select> </td> </tr> <tr> <td> </td> <td><input type="submit" name="Submit" value="Send"> </td> </tr> </table> </form> <?php } else { error_reporting(0); // initialize a array to //hold any errors we encounter $errors = array(); // test to see if the form was actually // posted from our form $page = $_SERVER['HTTP_HOST'].$_SERVER['PHP_SELF']; if (!ereg($page, $_SERVER['HTTP_REFERER'])) $errors[] = "Invalid referer<br>\n"; // check to see if a name was entered if (count($errors)>0) { foreach($errors as $err) echo "$err<br>\n"; echo "<br>Please use your browser's Back button to fix."; } else { // no errors, so we build our message switch($_POST['color']){ case 'red': $recipient = 'mathew420@gmail.com'; break; case 'green': $recipient = 'mathew420@gmail.com'; break; case 'blue': $recipient = 'mathew420@gmail.com'; break; default: $recipient = 'mathew420@gmail.com'; } $subject = "Widget On Line Order"; $from = stripslashes($_POST['Name']); $msg = "Message sent by $from\n"; $msg.="\nSize: ".$_POST['size']; $options=$_POST['options']; $msg.="\nOptions:"; if ($options) for ($i=0;$i<count($options);$i++) $msg.= "\n- $options[$i]"; else $msg.="\n- None"; $msg.="\nColor: ".$_POST['color']; $extension=($_POST['extension'])?"Extension: Yes":"Extension: No"; $wallmount=($_POST['wallmount'])?"Wallmount: Yes":"Wallmount: No"; $deskmount=($_POST['deskmount'])?"Deskmount: Yes":"Deskmount: No"; $msg.="\n$extension\n$wallmount\n$deskmount"; $msg.="\n".stripslashes($_POST['MsgBody'])."\n"; if (mail($recipient,$subject,$msg)){ echo "<p>Thanks for your order!</p>"; echo nl2br($msg); } else echo "An unknown error occurred."; } } ?> </body> </html> thanks so much Hello all! I want to have a page with multiple drop-down menus. The user will select for example "type of car" and a drop-down menu of 3-4 colors will appear... And then, if the user selects one of these colors, another drop-down menu will appear with the available brands of cars for the respective colour... Can you give me hints on how to start? Hi there I checked through a bunch of this forum but I can't find anything on this topic. If it's already been addressed, I'd be thankful if you could point me to the thread. If not, this is my problem.... I need to have 2 drop down menus in the same form, so that when the user clicks submit (OK in this case) both selected fields are posted.... Code: <form method="post" action="show.html">
<table>
<tr>
<td>Select a color</td>
<td><select name=color">
<option value="red">red</option>
<option value="green">green</option>
<option value="yellow">yellow</option>
<option value="orange">orange</option>
<option value="purple">purple</option>
<option value="blue">blue</option>
</select>
</td>
</tr>
<tr>
<td>Select a shape</td>
<td><select name=shape">
<option value="circle">circle</option>
<option value="square">square</option>
<option value="triangle">triangle</option>
<option value="hexagon">hexagon</option>
</select>
</td>
</tr>
<tr>
<td><input type="submit" value=" OK "></td>
</tr>
</table>
</form>
This code displays the drop downs perfectly but only the color is being posted to show.html It's something small but I can't figure this one out. I'm not sure if you can even have 2 drop downs with 1 submit button. Any and all assistance is greatly appreciated! Perkie Okay here is the previous thread that lead me to this issue. http://www.htmlforums.com/html-xhtml...tml#post670803 It solved my issues of opening a new window based off of the selection in a drop down, how ever I have 13 drop downs and the script from the above thread only allows one drop down to work. The drop downs will increase, is there any way to get them all to work. Thanks dt_gry Hi! I would like to create a drop down menu in HTML where the user can choose many options, not possible in simple HTML? Dharma The tutorial on how to make a search form with multiple search options was excellent! http://www.mediacollege.com/internet...ti-search.html However, is it possible to use radio buttons instead of a drop-down list? Can someone be kind enough to show me the code for it? Million thanks. hi i need some help with this im not a html wizard not a drop down nav bar what i would like is a button that when pressed will show more info ill be more brief lets say im selling a box of condoms i have a picture to the left of the screen and a bit of info about the product at the right of the screen if people want to see more info about the product they click the drop down botton and more info is displayed. What I have is a text box for a user to change the back ground & text for a generated page ------------------------------------------------------------------------------------------------------ <font color="#003300"> <b>Color for background</b><BR> </font><font face="Arial,Helvetica" color="#003300"><input type="text" size="6" maxlength="6" name="color1" value="ffffff"></font><font color="#003300"><BR> <b>Color for text </b><BR> <input type="text" size="6" maxlength="6" name="color2" value="000000"></font><font color="#003300"><br> <b>Color inside</b><BR> <input type="text" size="6" maxlength="6" name="color3" value="ffffff"><br> <b>Color outside</b><BR> <input type="text" size="6" maxlength="6" name="color4" value="000000"></br> </font> ------------------------------------------------------------------------------------------------------- I would like to change the text box with a drop down box with pre selected colors for the 4 options any help would be greatly appreciated above is the text Im using Hello! I am creating a blog website using Weebly and am trying to insert a code in which an icon at the top of the blog post drops down a hidden bullet list with a summary of what the article is about. I have one that is working, but it has some flaws that I would like to kink out if possible. Here is the code I have: <meta http-equiv="Content-Type" content="Text/html; charset=iso-8859-1"> <meta name="Content-Script-Type" content="Text/javascript"> <meta name="Content-Style-Type" content="Text/css"> <title>Karma</title> <style type="Text/css"> <!-- .hidden {display:none} --> </style> <div> <img alt="photobucket" onclick="document.getElementById ('karma').className = document.getElementById ('karma').className == 'hidden' ? '' : 'hidden'" src="http://i1106.photobucket.com/albums/h365/ResourceMJS/shortride.jpg"> </div> <ul id="karma"><font style="font-family:arial;color:#FF9900;font-size:12px;"><li>Be yourself when dealing with candidate conversations.</li> <li>Don't lie about your interests to make the conversation flow.</li> <li>Recruiting sometimes causes one to have to toughen up and have difficult conversations.</li></font></ul> The icon does what it is supposed to when clicked, but it has 2 flaws. 1. It doesn't show as clickable. When you mouse over the icon you still get an arrow key instead of the typical button icon. 2. When the page loads, the summary text is already visible and the button collapses it. I want the text to start off hidden and only appear/disappear when the icon is clicked. Is there anyway to solve these? I am kinda of a novice with HTML and coding, so any help would be greatly appreciated. Thank you! Is there a way to wrap text in a drop down selection box without increasing the height attribute? Otherwise very long text just cut off. Thanks. p.s. of course the solution should be compliant and especially work in the dreaded IE7. Programs ----------------------- Photoshop CS4 Dreamweaver CS3 ----------------------- Anyways I used photoshop to make most of the site image, slice it up made it to a HTML and images file. I have trouble get text to go in the right place. Im not to sure if im even doing it right. Drop down menu im not sure where to start there.(but mostly having truble with textso any thing will help ( what I need help with. Is how to do text with my work with photoshop. I know how to it with out just not with.) Hi there, I am trying to align the text of a drop down box , so that it appears in the centre across all browsers. In the code below I have sucessfully indented the text from the left by 5px and sucessfully aligned it in the centre (vertically) However as I ahve used padding-top, it has also affected the drop down icon (v). Is there a way to align the text in the drop down without the drop down icon being affected across IE7, 8 , FF, and chrome ? I have tried adding line-height to the text and that doesnt work either. Thanks for your help HTML Code: <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Text align center</title>
<style type="text/css">
#selection
{
color: #999999;
display: block;
font-family: Arial;
font-size: 11px;
height: 24px;
padding: 0;
width: 382px;
line-height:20px;
padding-left:5px;
}
</style>
</head>
<body>
<select id="selection">
<option value="0">Selection 1</option>
<option value="1">Selection 2</option>
<option value="2">Selection 3</option>
<option value="3">Selection 4</option>
<option value="4">Selection 5</option>
</select>
</body>
</html>
Hello! I recently started a blog on the weebly website and I want to convert it over to wordpress. The only problem is that wordpress does not allow javascript, so I was wondering if there is a way to generate an html code without javascript that allows the user to click a button to drop down text. I have a custom script on my current site: http://www.resourceblog.weebly.com It's the short ride button and it allows the user to click on the button in order to drop down a summary of the blog article. Here is the script: <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta name="language" content="english"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>Bad Rep</title> <style type="text/css"> #bad { font-family:arial,sans-serif; font-size:12px; color:#ff6600; } #rep { cursor:pointer; } .hidden { display:none; } </style> <script type="text/javascript"> function init(){ var obj=document.getElementById('bad'); obj.className='hidden'; document.getElementById('rep').onclick=function() { obj.className=obj.className=='hidden'?'':'hidden'; } } window.addEventListener? window.addEventListener('load',init,false): window.attachEvent('onload',init); </script> <div> <img id="rep" src="http://i1106.photobucket.com/albums/h365/ResourceMJS/shortride-2.jpg" alt="photobucket"> </div> <ul id="bad"> <li>Recruiters often get a bad reputation because many people do not understand what they do.</li> <li>It is up to the recruiter to build the trust of the candidate by being honest and genuine.</li> <li>Follow up and keep in contact with your candidates so that they continue to hold a strong value in you.</li> </ul> Any help would be appreciated. This forum has answered a lot of my questions and so I love turning to you all for advice Hi All, first post in the forum. I would like to know if it is possible to create a drop down list from which the user could select a value but could also decide to enter a new one ? What I want is to offer the user to select an existing company name or enter a new one, but I would like to have only one field to do it instead of two. Is this possible Thanks for helping. ALex Hello, I have a drop down menu where one of the items is EXTREMELY long, and because of this, the overall size of the drop down box is the size of this item. I found a way to shrink the size of the drop down box via: <style type="text/css"> select {height: 12px; width: 50px; max-height: 12px} </style> This works in shrinking the overall size, but what happens is that the really long item is now longer than the width of the box and the text for the item doesn't wrap around down to the line below. So you don't actually see the whole item in the list. Do you know how I can wrap this item so that the text falls down to the line below? Cheers I've looked all over the web and can't find an effective way to do this. Can someone please help? I need to make text drop down menus when you mouseover my links. This is a perfect example: http://www.stpatrick.org/ Thanks a lot! ere's what I need to do: I have several variables that I want to assign to various spans within a page (i.e. customer_name, customer_address, etc.). Now, I am going to have more than a 1 span that I dynamically need to assign the customer_name to. But I want it to be able to do so without me having to name them all "customer_name1, customer_name2, customer_name3" and then having to go through and manually change each one, one-by-one within the function. What I'd like to do is ultimately have the function loop through every span with the name or id of "customer_name" and change the innerHTML within it to whatever the value of the costomer's name variable is ("John Doe" for example). I've tried a few ways, most of the time it only changes 1 instead of all of them. Can anyone help? ere's what I need to do: I have several variables that I want to assign to various spans within a page (i.e. customer_name, customer_address, etc.). Now, I am going to have more than a 1 span that I dynamically need to assign the customer_name to. But I want it to be able to do so without me having to name them all "customer_name1, customer_name2, customer_name3" and then having to go through and manually change each one, one-by-one within the function. What I'd like to do is ultimately have the function loop through every span with the name or id of "customer_name" and change the innerHTML within it to whatever the value of the costomer's name variable is ("John Doe" for example). I've tried a few ways, most of the time it only changes 1 instead of all of them. Can anyone help? ere's what I need to do: I have several variables that I want to assign to various spans within a page (i.e. customer_name, customer_address, etc.). Now, I am going to have more than a 1 span that I dynamically need to assign the customer_name to. But I want it to be able to do so without me having to name them all "customer_name1, customer_name2, customer_name3" and then having to go through and manually change each one, one-by-one within the function. What I'd like to do is ultimately have the function loop through every span with the name or id of "customer_name" and change the innerHTML within it to whatever the value of the costomer's name variable is ("John Doe" for example). I've tried a few ways, most of the time it only changes 1 instead of all of them. Can anyone help? ere's what I need to do: I have several variables that I want to assign to various spans within a page (i.e. customer_name, customer_address, etc.). Now, I am going to have more than a 1 span that I dynamically need to assign the customer_name to. But I want it to be able to do so without me having to name them all "customer_name1, customer_name2, customer_name3" and then having to go through and manually change each one, one-by-one within the function. What I'd like to do is ultimately have the function loop through every span with the name or id of "customer_name" and change the innerHTML within it to whatever the value of the costomer's name variable is ("John Doe" for example). I've tried a few ways, most of the time it only changes 1 instead of all of them. Can anyone help? _________________ Бары Киева Рестораны Киева |
|||||||