Change Second Menu Depending On Selection In First

Feb 15, 2009

Basically I have a form, with two simple select menus, both identical except for different name values to post:

HTML Code:
<p>Make current?</p>
<select name="is_current">
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
<br />

<p>Put in list?</p>
<select name="in_list">
<option value="yes">Yes</option>
<option value="no">No</option>
</select>

Some PHP code governs whether the "yes" or the "no" option in either menu gets the 'default' "selected="selected" showing, based on database information. For instance, in the first menu, if the page deals with a case where the the first "is_current" value is indeed current, then the PHP code will write the default "selected="selected" for "yes":

HTML Code:
<select name="is_current">
<option value=yes" selected="selected">Yes</option>
<option value=no">No</option>
</select>

If the page deals with a case where the value isn't current, the selected="selected" code will be written for the "no" value instead. The same goes for the second select menu. Now, the logic of my situation requires that, if the user selects "Yes" in the first "is_current" drop-down, then only "Yes" should be available to select in the second "in_list" menu. Anyway, I don't know javascript very well, but I found a function that seemed to be able to do this.

Code:
<script type="text/javascript">
(function () {
function updateLevel() {
var limit = Number(this.value);
// find the next select element
var selects = this.form.getElementsByTagName('select');
var select;
for (var i = 0; i < selects.length; i++) {
if (selects[i] === this && selects[i+1]) {
select = selects[i+1];
break; .....

(Apparently the script has to be put or called just before the </body> tag at the end of the page.) Then the select menus are recast as:

HTML Code:
<p>Make current?</p>
<select name="is_current" id="in_list">
<option value="1">Yes</option>
<option value="2">No</option>
</select>
<br />

<p>Put in list?</p>
<select name="in_list">
<option value="1">Yes</option>
<option value="2">No</option>
</select>

Now this appears to work, up to a point. If the user selects "Yes" for the first "is_current" selection, then only "Yes" becomes available for selection in the second "in_list" menu. A posted value of "1" represents "yes", and a value of "2" represents "no". Except, in Firefox, the javascript somehow overrules the default selected="selected" code. That is, the source code in the browser is correct, but the javascript draws it incorrectly.

For instance, say the database/PHP has drawn selected="selected" for the value "yes" in the second menu. Even though I can see that the source code is OK in the browser, the javascript will make the browser show a "No" selection as the initial default. This happens in Firefox, though not in Safari, and I haven't tested other browsers yet. This may be obvious but I'm not sure of javascript.

View 11 Replies


ADVERTISEMENT

DropDown Change Background Image Depending On Selection

Sep 21, 2010

The code below lets a user select a drop down option and a picture changes depending on the selection. I am trying to make it so when you select an option on the dropdown the picture shows up in the center of the screen and in the background behind the text. Here is the code.

<html>
<head>
<style type='text/css'>
#txt {background-repeat:no-repeat;width:200px;height:200px;}
</style>
<script type='text/javascript'>
function div_bg(team){
document.getElementById('txt').style.backgroundImage="url(images/" + team + ".jpg)";
}

</script>
</head>
<body>
<select name='team' onChange='div_bg(this.value);'>
<option name='arsenal' value='arsenal'>Arsenal</option>
<option name='liverpool' value='liverpool'>Liverpool</option>
</select>
<div id='txt'></div>
</body>

View 19 Replies View Related

Change Background Picture Depending On A Drop Down Field Selection?

May 19, 2010

I need to achieve two things upon making a selection from a drop down field:

1) Changing the background picture of a cell.

2) Changing the size of a uploaded foreground picture within the same cell. code...

View 4 Replies View Related

Jquery :: Realtime Order Form - Change Form Elements Depending On Selection

Aug 25, 2010

I've been struggling trying to get a small order form to work the way I want it to. Here is a link to the live page: [URL] And here is the code in question:

[Code]...

I have two questions...

Question 1 How can I make this piece of script act a little smarter. Look at the order form, I'm catering for up to 4 people and providing lunch for them. If they select 3 people and the spaghetti bol for lunch, it's only adding $10 where it should be adding $30. Obviously this is simple multiplication but since the values in my form are prices it makes it a little tricky. I'm guessing an onselect on the first part of the form which changes the pricing of the other items would be the way to go, but how do I do this?

Question 2 The "Total Price" is placed before the <form> tag by the script. This is ok but it's not where I want it. How can I position this text elsewhere in the document?

View 3 Replies View Related

Change Output With Menu Choice Selection

Apr 29, 2009

I have not been able to get this output change when the drop down menu choice changes. I have looked at numerous examples but I can't find one that has this simple output change. What am I missing?

<HTML>

View 3 Replies View Related

Hide Fields Depending On Selection

Sep 1, 2009

In the following code I am attempting to get certain fields to only appear if the user Selects dependent else those fields should be hidden.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"[URL]">
<html xmlns="[URL" xml:lang="en" lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Display and Hide</title>
<script language="JavaScript">
function showhidefield(){
if (document.HelpAdd.RecordType.value == "Parent"){
document.getElementById("hideablearea").style.visibility = "hidden";
} else {
document.getElementById("hideablearea").style.visibility = "visible";
} }
</script>

</head>
<body>
<form name='HelpAdd' action='nextpage.asp'>
<table align="center" border="3" cellspacing="0" cellpadding="3">
<tr><td>Record Type:</td>
<td><select id="RecordType" name="RecordType" onchange=showhidefield()>
<option value='0'>Parent</option>
<option value='1'>Dependant</option><br/>
<tr><td>Topic Title:</td>
<td><input type="text" name="TopicName" ID="TopicName" maxlength="25"></td></tr>

<div id='hideablearea' style='visibility:hidden;'>
<tr><td>Parent:</td>
<td><select name="Parent">
<input type="text" name="ParentID" ID="ParentID" maxlength="25"></td></tr>
<tr><td>Topic Body:</td>
<input type="hidden" name="MAX_FILE_SIZE" value="<?php echo $MaxFileSize ?>" />
<td><input id="helpfile" name="helpfile" type="file" /></td></tr>
</div>
<tr><td colspan="2" align="center">
<input type="submit" name="submit" value="Submit">
<a href="/help.php"><button>Back</a>
</td></tr>
<tr><td colspan="2" align="center">
<?php echo $Message ?>
</td></tr>
</table>
</form>
</body>
</html>

View 4 Replies View Related

DropDown List Popup Depending On Selection?

Oct 27, 2010

Here is my dropdown menu:
<select name="peeps">
<option value="Frank Tompson">Frank Tompson</option>
<option value="Henry Wilson">Henry Wilson</option>
<option value="Bill Kent">Bill Kent</option>
<option value="Jessi McDonald"> Jessi McDonald</option>
<option value="John Hays">John Hays</option>
How can I make it so if I click on John Hays a JavaScript pop up will say Hello John Hays, and if I click on Bill Kent a popup will say hello Bill Kent and if I click on any other name nothing happens?

View 3 Replies View Related

Changing Visibility Depending On Dropdown Box Selection

Aug 18, 2002

I want a text box which is only visible if the preceding drop down box has a certain option selected. Does anyone know how to do this or where I might be able to find the appropriate code?

View 7 Replies View Related

JQuery :: Making Dropdown Show / Hide Depending On Selection

Jan 10, 2011

I have the following code that generates two dropdown boxes in a form, but I would like for the second to be hidden unless the first has 'Software problem' selected. Is it possible to do this?

<p id="parent-menu">
<select name='helpdesk-category' id='helpdesk-category' class='dropdown' tabindex="40">
<option value='-1'>Select a Category</option>
<option class="level-0" value="13">Software problem</option>
<option class="level-0" value="14">Hardware problem</option>
<option class="level-0" value="15">Suggestion</option>
<option class="level-0" value="16">General query</option>
</select>
</p>

<p id="toggle-menu">
<select name='software-category' id='software-category' class='dropdown' tabindex="50">
<option value='-1'>Select a Program</option>
<option class="level-0" value="6">BigHand</option>
<option class="level-0" value="7">IRIS</option>
<option class="level-0" value="8">MS Outlook</option>
<option class="level-0" value="9">MS Word</option>
<option class="level-0" value="10">MS Excel</option>
<option class="level-0" value="11">Oyez</option>
<option class="level-0" value="12">Internet Explorer</option>
</select>
</p>

View 2 Replies View Related

Display Specific Input Fields Depending On Combobox Selection?

Nov 5, 2009

Within a classic asp webform (using vbscript) I would like part of the form (input boxes within table structure) to be specific/displayed depending on the users selection from the combo box in the row above.

I think the best solution would be using Javascript can anyone suggest a solution or example code?

View 1 Replies View Related

Show / Hide Depending On Form Selection - How Best To Arrange Data

May 13, 2009

I have a big form which I'm tidying up by only showing elements when they become relevant, based on the currently selected input (eg to only show an option for 'waist size' when garment type 'jeans' has been selected). I've done this many times, and probably used a different approach each time, so I just wanted to see what other people do. It's currently along these lines: "If a particular option is selected, then show this element, otherwise hide it".

Code:
//the onclick handler
function checkViewType() {
//go through radio inputs in the cell and check what's clicked
document.getElementById('supplierOptions').style.display=radioCollection.supp.checked?"":"none";
document.getElementById('subCatOptions').style.display=radioCollection.subcat.checked?"":"none";
document.getElementById('subCatTimeOptions').style.display=radioCollection.subcat_sumtype_time.checked?"":"none";
document.getElementById('subCatSumOptions').style.display=radioCollection.subcat_sumtype_sum.checked?"":"none";
document.getElementById('subcat_weekmonth_span').innerHTML=radioCollection.subcat_time_week.checked?"week":"month";
}

But it's a big form, with lots of nested options, and some elements can be triggered visible by several different options. So I'm looking for an elegant way to handle this without a million if..elses. Perhaps an array of element ids and which elements are allowed visible when that's selected.

View 4 Replies View Related

Direct To Webpage Depending On Combobox Selection When Submit Button Clicked?

Sep 16, 2009

I've created a form with combobox with different values (this is for my website). What I want is when the user clicks 'submit' that it goes to a different page on the website depending on the value the person has selected in the combobox. Values are numerical, for example 1000, 2000, 5000 etc. I've been trying this for a couple of days now without success!

View 10 Replies View Related

Show / Hide Form Fields Depending On Radio Button Selection

May 29, 2005

How to show and hide form fields depending on a selected radio button.

View 14 Replies View Related

JQuery :: SuperFish Menu - Change Space Between Menu And Submenu In Navi-bar Type Menu?

Feb 15, 2011

I have trouble with SuperFish Menu, of course it looks very nice and is good solution, but I am not advanced in CSS language.how to change space between menu and submenu in Navi-bar type menu? Now sobmenu hide part of menu, I have to must space.....

Attachments
superfis.JPG
Size : 11.4 KB
Download : 306

View 1 Replies View Related

Change Text Depending On Condition?

Mar 10, 2009

I have the following code that I use to loop though records in my database and display the text. For each record I look through the text for a certain piece of text and then split the content it is found. So for example if the database contained a field with the data "this is some text [splithere] this is some more text" then the first part (this is some text) would be displayed and then a more button would be shown. If the user clicked the more button then the rest of the content (this is some more text) would also be shown.

At the moment the more button is always shown, even if the [splithere] text was not found. What I'd like to do is only show the more button where necessary. I'd also like to change the text from 'more' to 'hide' when the button has been clicked and the additional content is being shown as when they click the link again the text is in fact hidden and so saying 'more' doesn't make any sense.

Here is the code I use code...

View 14 Replies View Related

Change Color Of Link Depending Whether It - A Certain Value

Jul 8, 2009

I am trying to create a list of customers that we do weekly reports for. What I would like to do is if the current date falls in between $date (variable of last updated report) and $date+7 (i.e. a week later) then display the text in green else display text in red.

View 1 Replies View Related

Change Background Colour Depending On Time Of Day?

Dec 22, 2010

I'm trying to use javascript to have my webpage black at night and bright blue (#2A7FFF) in the day time. How would I go about this? ::confused: I have also tried to use javascript to change a picture depending on the time of day, this is what I have used.

IN THE <head>
<script type="text/javascript">
var hourofday = thedate.getUTCHours();
function sun()

[Code]...

View 4 Replies View Related

Change Label Class Depending On Checkbox?

Feb 21, 2011

I would really love some sort of javascript observer to automatically add/remove a class to the labels on my page, depending on wether their checkboxes are checked or not. As well as adding those same CSS-classes to the checkboxes already checked on document load.

View 5 Replies View Related

Change Content Depending On Operating System!?

Nov 13, 2011

Is there any script or way to view/hide a div or similar tag only if you're on windows/mac/linux? I want a div to show if you're on windows/linux and an other if you're on a mac.

View 1 Replies View Related

Change Text Within Paragraph Depending On Radio Button?

Mar 23, 2011

I have an electronics site on which I have a code generator. Im an stuck on how to acheive something.

I will simplify what I want to do, so I can then adapt it to my code. I have a paragraph of text on the web page, on which I want to change some words with in the paragraph depending on 2 radio buttons.

Example (radio buttons & short paragraph):

(Radio Button) Apples (checked) (Radio Button) Bananas "Welcome to jakes fruit shop. You have selected apples today" (apples being the word that would change if the banana radio button is checked)

Here is the code generator if your interested. [URL] What I actually want to do is put other 'fixed' text in the input text area (near botton of page) with only the config line changing.

And If I can be shown how to do the short example above, i think I will be able to edit my generator and get it to do what i want it to do.

View 6 Replies View Related

Change The Height Of A Iframe Depending On The Loaded Content?

Dec 26, 2010

I'm looking for a script to change the height of a iframe depending on the loaded content. I found some scripts who let it work when a webpage loads in the iframe.

But when the height of the page changes by javascript animations.

Like a box is getting 200px higher by a javascript action. The page won't reload by this action so the iframe height remains in it's current height.

Anyone has a good script that the iframe height even changed on javascript commands?

View 2 Replies View Related

Menu Selection

Jun 22, 2004

how i can create the list of menu that when we want to select certain item instead of we must select manually....mayb u all dont understand...ok like this, i want to select item 'cow' in list of cat, dog, cow, deer n etc...so when i press 'c' then the item cat n cow will appear, but i dont want be like that....but i want when i press 'c' the menu list appear as usual then when i press for the 2cd time, i press 'a' only cat will appear in the option list.

View 1 Replies View Related

JQuery :: Toggle Images Of A Button Depending On A Check Box Change?

Jul 28, 2011

ho do itoggle images of a button depending on a check box changep.s. toggle images of a button these are images now depending on check box clicked the image button should show the enabled image.

View 1 Replies View Related

Second Menu Appear Based On Selection In First One

Apr 28, 2010

I have three dropdown menus (side dish, veggie, fruit). Based on the side dish selected (fruit or veggie), I'd like the fruit or veggie menu to appear automatically, while the one not selected stays hidden. Below is the code for the HTML part. I have no idea how to get started with the javascript.

<head>
<title>Untitled Document</title>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<label>sidedish
<select name="sidedish" id="sidedish">
<option value="fruit">fruit</option>
<option value="veggie">veggie</option>
</select>
</label>
<label>veggie
<select name="veggie" id="veggie">
<option value="carrots">carrots</option>
<option value="corn">corn</option>
</select>
</label>
<label>fruit
<select name="fruit" id="fruit">
<option value="banana">banana</option>
<option value="orange">orange</option>
</select>
</label>
</form>
</body>
</html>

View 2 Replies View Related

Background-color Css Style Dynamically Change Between 4 Colors Depending On How Many Times They Are Clicked

Jul 28, 2011

I want to have <div> cells that the background-color css style dynamically change between 4 colors depending on how many times they are clicked. The options are none, yellow, red and green then repeat. So when the page loads, they are all at none, and if you click once it goes to green, twice to yellow, three times to red, then back to none.

View 5 Replies View Related

JQuery :: Hide A Select Menu On A Certain Selection?

Jun 15, 2011

say i have a select menu "select1" with several options available. And a color "color" menu with several options for color. Inside my "select1" option list i have a "variety" option.With this option selected i no longer need the "color" menu at all. I need a javascript or jquery that will make it so that when "variety" is selected it then hides the "color" select menu.

View 1 Replies View Related







Copyrights 2005-15 www.BigResource.com, All rights reserved