Learn VBA & Macros in 1 Week!

JavaScript - Forms: Select Options, Filtered By Another Select Option

Full Excel VBA Course - Beginner to Expert

Forms: Select Options, Filtered By Another Select Option	View Content

Hey chaps, hope someone can help with this:
I have a PHP form, with a couple of dynamic Select menus, which are populated from two SQL tables:
// tbl_main_colour:
Code:

ID, NAME
1, Red
2, Blue
3, Green

// tbl_shade_colour:
Code:

ID, NAME, FK_MAIN_COLOUR_ID
1, Light Red, 1
2, Dark Red, 1
3, Light Blue, 2
4, Dark Blue, 2
5, Light Green, 3
6, Dark Green, 3

What I'm after is something to filter the second select option, after the first select option has been chosen
// Select 1:
Code:

Red

// Select 2:
Code:

Light Red
Dark Red

I'm pretty sure this is possible, but not sure how to go about it, any help would be most appreciated.

Full Excel VBA Course - Beginner to Expert

Removal Of Select Options - Last Option Won't Remove

Similar Tutorials

View Content

Hey guys.... me again.... tried doing this a few different ways but it seems no matter what I do the last option won't remove for some reason..... if it's the only option, it won't remove either. as it's the last one.

Here is my code..

PHP Code:
function removeCats() {

    // Set selected category list
    var sel_cats = document.getElementById('cat_sel');

    for (i = sel_cats.length-1; i >= 0; i--) {

        // Check if the cat is selected

        if (sel_cats.childNodes[i].selected == true) {

            // Remove the category
            sel_cats.removeChild(sel_cats.childNodes[i]);

        }

    }

}

Thanks again guys!

Select Option Value - Multiple Forms

Similar Tutorials

View Content

I'm creating a paypal webpage and am having some issues with input values updating based on which item the user has selected. The boxes I need to update are the amount, item number and item name. I have the following code but it only updates the first form. If I make a change to the second set of options it updates the first form instead of the second. Any help would be much appreciated.

Code:

function details(val)
{
	var info = val.split("|");
	
	document.getElementById('num').value = info[0];
	document.getElementById('price').value = info[1];
	document.getElementById('package_name').value = info[2];
}


<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_cart">
<select name="dy" Onchange="details(this.value);">
<option value="1|3|Package 1">Package 1</option>
<option value="2|6|Package 2">Package 2</option>
<option value="3|9|Package 3">Package 3</option>
</select>
<input type="text" id="num" name="item_number" value="1">
<input type="text" id="price" name="amount" value="3">
<input type="text" id="package_name" name="item_name" value="Package 1">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_cart_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!"><img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1"><input type="hidden" name="add" value="1">
</form>


<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_cart">
<select name="pt" Onchange="details(this.value);">
<option value="4|6|Package 4">Package 4</option>
<option value="5|9|Package 5">Package 5</option>
<option value="6|12|Package 6">Package 6</option>
</select>
<input type="text" id="num" name="item_number" value="4">
<input type="text" id="price" name="amount" value="6">
<input type="text" id="package_name" name="item_name" value="Package 4">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_cart_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!"><img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1"><input type="hidden" name="add" value="1">
</form>

Change Options Of Select Based On Selection In Other Select

Similar Tutorials

View Content

I've been having problems getting my select option to change the options of another select option. I'm not much of a javacsript coder, so I'm at a lost.

When I select the first option nothing appears in the second option.

here's the javascript code:

Code:

function createOption(OptionText, OptionValue){
var temp = document.captcha_form("option");
temp.innerHTML = OptionText;
temp.value = OptionValue;
return temp;
}

function valChange(){
    var firstList = document.getElementById("emailaddress");
    var secondList = document.getElementById("subject");
    while(secondList.hasChildNodes())
        secondList.removeChild(secondList.childNodes[0]);
    switch(firstList.value){
        case "1":{
             secondList.appendChild(createOption("Report Site Browsing Issue", Report Site Browsing Issues));
             secondList.appendChild(createOption("Report Page Errors", Report Page Errors));
             secondList.appendChild(createOption("Other", Other));
             break;
        }
        case "2":{
             secondList.appendChild(createOption("Report Unauthorized Game", Report Unauthorized Game));
             secondList.appendChild(createOption("Report Spam", Report Spam));
             secondList.appendChild(createOption("Report Harassment", Report Harassment));
			 secondList.appendChild(createOption("Report Illegal Activities", Report Illegal Activities));
			 secondList.appendChild(createOption("Request Account Removal", Request Account Removal));
             break;
        }
// ....
        default:{
             secondList.appendChild(createOption("Please select from the first list", ""));
             break;
        }
    }
}
 
window.onload = valChange;

this is the form code

Code:

<div class="mailto_form">
<form method="POST" id="captcha_form" name="captcha_form" action="../includes/mailform.php">
<div style="padding-bottom: 1em;">Choose Recipient: <select name="emailaddress" id="emailaddress" onchange="valChange();">
	<option value=""></option>
	<option value="1">Webmaster</option>
		<option value="2">Admin</option>
		</select>
  </div>
	

<div style="padding-bottom: 1em;">Subject: <br /><select name="subject" id="subject">
  </div>
  
  	<div style="padding-bottom: 1em;">From: <br /><input type="text" name="email" id="email" value="">
	</div>
  
		<div style="padding-bottom: 1em;">Enter the text contained in the image into the text box:
					<br /><img src="../includes/captcha.php" />
					<br /><input type="text" name="userpass" value="">
	</div>
	<div style="padding-bottom: 1em;">Message:
					<br /><textarea name="message" id="message" rows="10" cols="60"><?php echo "</tex" . "tarea>"; ?>				
	</div>
	
	<div style="padding-bottom: 1em;"><input name="submit" type="submit" value="Submit">
	</div>
</form>


</div>

Link to the page http://www.netgamegurus.com/contact/

Add/remove Select Options Based On Another Select Value

Similar Tutorials

View Content

Hello, I am trying to make a simple code that has a selection list (with the choice fruit or veggie). When the user chooses fruit, the second list displays the options apple, orange, banana. When the user changes their choice to veggie, the second select list then contains carrot, corn, potatoes (and the apple, orange, banana disappear).

I need some advice on how to do this

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
</head>
<body>
<form name = "form1">
 <fieldset>
  <legend>Fruit or Veggie</legend>
	<select name = "S1">
	  <option name = "fruit">Fruit </option>
		<option name = "veggie">Veggie</option>
	</select>
	<select name = "S2"
	</select>
 </fieldset>
</form>

<script language="JavaScript" type="text/javascript">

???

</script>
</body>
</html>

Load Select Options From Other Select Box

Similar Tutorials

View Content

I have a select box that has ~7000 options, that based on a different dropdown select & input field, gets filtered to 0 - 300 entries.

I have another select dropdown that has 13000+ options in total for all the ~7000 entries, but each entry may have 1 to 5 options of these 13000.

Is there a way to change the options of the last select dropdown based on what the user chooses in the filtered select box? Currently the idea I'm having is to have the browser load all 13000+ items and filter out the ones that don't apply to the currently selected item, but I'm not sure what kind of lag the user would experience while the browser loads & filters through all these items.

Any help would be appreciated. Thanks.

How To Wipe An Existing Select Options And Add New

Similar Tutorials

View Content

If i have an existing HTML Select statement with options specified, and then based on an even, i want to rebuild that options list, how do I wipe the existing options parameters in order to add new ones? Is that even possible?

Help With Dynamically Added Select Options

Similar Tutorials

View Content

Hi all,
I have table in Javascript and it has addrow, deleterow, submit, and functions.
when i click it automatically adds new row and it has select option to choose some of them
for ex. in added two rows and one of drop down combox i chose Motherboard Asus and from other i chose Motherboard Gigabyte.

So i need once i select the name from combobox, should not allow user to select same name in coming rows

Here is my code.

Thanks beforehands

PHP Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head><title>dinamik sheet</title>
<script>
var i=iteration;
function addrow(){
    var tbl = document.getElementById('sheet');
    var iteration = tbl.rows.length;
document.getElementById('count_rows').value = iteration;
    var row=tbl.insertRow(iteration);

    var cellLeft = row.insertCell(0);
    var textNode = document.createTextNode(iteration);
    cellLeft.appendChild(textNode);

    var cellRight = row.insertCell(1);
    var el = document.createElement('input');
    el.type = 'text';
    el.name = 'txtRow'+iteration;
    el.id = 'txtRow'+iteration;
    el.size = 15;
    el.value = '0';
    el.onblur = sum;
    cellRight.appendChild(el);

    var cellRight = row.insertCell(2);
    var elaz = document.createElement('input');
    elaz.type = 'text';
    elaz.name = 'txtRowaz'+iteration;
    elaz.id = 'txtRowaz'+iteration;
    elaz.size = 20;
    elaz.value = '0';
    elaz.onblur = sum;
    cellRight.appendChild(elaz);



    var cellRight1 = row.insertCell(3);
    var ela = document.createElement('input');
    ela.type = 'text';
    ela.name = 'txtRowe'+iteration;
    ela.id = 'txtRowe'+iteration;
    ela.size = 20;
    ela.value = '0';
    ela.onblur = sum;
    cellRight1.appendChild(ela);

    var cellRightsel = row.insertCell(4);
    var sel = document.createElement('select');
    sel.name = 'selRow' + iteration;
    sel.id = 'selRow' + iteration;
    sel.onchange = sum;
    sel.options[0] = new Option('MotherBoard ASUS', 'MotherBoard ASUS');
    sel.options[1] = new Option('MotherBoard Gigabyte', 'MotherBoard Gigabyte');
    sel.options[2] = new Option('MotherBoard MSI', 'MotherBoard MSI');
    sel.options[3] = new Option('Graphiqcard ASUS', 'Graphiqcard ASUS');
    sel.options[4] = new Option('GraphigCard ATI', 'GraphigCard ATI');
    sel.options[5] = new Option('GraphigCard GefORCE', 'GraphigCard GefORCE');
    cellRightsel.appendChild(sel);
    sum();
}
function removeRowFromTable()
{
  var tbl = document.getElementById('sheet');
  var lastRow = tbl.rows.length;
  if (lastRow > 2) tbl.deleteRow(lastRow - 1);
}

function sum(){
    var s1 = 0;
    var s2 = 0;
    var tbl=document.getElementById('sheet');
    var iteration=tbl.rows.length-1;
    for(var i=1; i<=iteration; i++){//loop through table rows
        var el1 = document.getElementById('txtRow'+i);//Row's Income field
        var el2 = document.getElementById('selRow'+i);//Row's percentage menu
        var ela = document.getElementById('txtRowe'+i);//Row's Tax cell
        var elaz=document.getElementById('txtRowaz'+i);

        if(!el1 || !el2 || !ela||!elaz) continue;
        var txt = el1.value;
        if(txt != ( '' + Number(txt) )) continue;  //reject non-numeric entries

var tax = Number(txt) * Number(130);

if(el2[el2.selectedIndex].value=="MotherBoard Gigabyte"){
    var  tax = Number(txt) * Number(150);


}
if(el2[el2.selectedIndex].value=="MotherBoard MSI"){
    var  tax = Number(txt) * Number(100);

}
if(el2[el2.selectedIndex].value=="Graphiqcard ASUS"){
    var  tax = Number(txt) * Number(85);

}
if(el2[el2.selectedIndex].value=="GraphigCard ATI"){
    var  tax = Number(txt) * Number(95);

}
if (el2[el2.selectedIndex].value=="GraphigCard ATI")
{

        var tax = Number(txt) * Number(88);
}

        ela.value = tax.toFixed(2);
        elaz.value=tax.toFixed(2)/Number(txt);
        if(isNaN(elaz.value)){
        elaz.value=0;
        }
        s1 += Number(txt);
        s2 += tax;

}
    var t1 = document.getElementById('total');
    var t2 = document.getElementById('taxtotal');
    if(t1){ t1.value = s1.toFixed(2); }
    if(t2){ t2.value = s2.toFixed(2); }
}

onload = function(){
    addrow();
}
</script>
</head>
<body>
<form name="eval_edit" method="POST" action="part1.php?id=iteration-1">
<table align="center" width="75%">
<tr>
<td align="center">Balance sheet</td></tr>
<tr>
<td align="center">
    <table id="sheet" border="1">
    <tr><td>object</td><td>Total amount</td><td>One ITEM Price</td><td name="amount">Total Item Price </td><td>Name</td></tr>

    </table>
</td>
</tr>
<tr>
<td align="center">
<input type="hidden" name="count_rows" id="count_rows" />
<input type="button" value="Add" onclick="addrow()" />
<input type="button" value="Remove" onclick="removeRowFromTable()" />
<input type="button" value="SUM" onClick="sum()"/>
<input type="submit" value="Submit" /><br />
</td>
</tr>
<tr>
<td align="left">
<input id="total" name="total" type="text"/>total amount of products<br />
<input id="taxtotal" name="taxtotal" type="text"/>total price of products
</td>
</tr>
</table>
</form>

</body>
</html>

Cycle Through Options In Select Box Using Onclick

Similar Tutorials

View Content

Hello!

I'm trying to figure out a way of having + and - buttons which cycle through the options in a select box such as:

<select name="distance" id="jr_radius">
<option value="0.5">0.5 Miles</option>
<option value="1">1 Mile</option>
<option value="3" selected="selected">3 Miles</option>
<option value="5">5 Miles</option>
<option value="10">10 Miles</option>
</select>

So far I've only been able to have a button change the select box to a specific value, or add or subtract to a numerical value. Both of which aren't quite right.

Ideally if the default value is "3" then clicking the + button could make it "5" and clicking the same button again would make it "10". Visa versa, the minus button would make the value "1" and then if pressed again it would become "0.5".

Does that make sense? Any help will be greatly appreciated!

Batch Moving Options From One Select To Another

Similar Tutorials

View Content

This code is supposed to batch transfer options between selects. It works flawlessly for single values, but when I select multiple options, all of them get deleted, but only one transferred. Any help is greatly appreciated! Thank you.

Code:

<html>
    <head>
        <title></title>
        <script type="text/javascript">
            function removeOptionSelected(b,j)
                {
                  var elRem = document.getElementById(b);
                  var elAdd = document.getElementById(j);
                  var elOptNew = document.createElement('option');
                  var i;
                  for (i = elRem.length - 1; i>=0; i--) {
                    if (elRem.options[i].selected) {
                        //alert(elRem.options[i].text+' '+elRem.options[i].value+' deleted!')
                        elOptNew.text = elRem.options[i].text;
                        elOptNew.value = elRem.options[i].value;
                        try {
                            elAdd.add(elOptNew, null); // standards compliant; doesn't work in IE
                        }
                            catch(ex) {
                            elAdd.add(elOptNew); // IE only
                        }
                        elRem.remove(i);
                    }
                  }
                }
        </script>
        <style type="text/css">
            div {
                float: left;
                /*border: 1px solid black;*/
            }
            div.contain {
                width: 536px;
                height: 500px;
                border: none;
            }
            div.side {
                width: 215px;
                height: 500px;
            }
            div.middle {
                width: 100px;
                height: 300px;
                padding-top: 200px;
            }
            select {
                width: 200px;
                height: 500px;
            }
            input {
                width: 82px;
                margin-bottom: 10px;
            }
        </style>
    </head>
    <body>
        <div class="contain">
            <div class="side">
                <form name="left">
                    <select id="left" class="left" multiple name="out">
                        <option value="apple">apple</option>
                        <option value="banana">banana</option>
                        <option value="orange">orange</option>
                        <option value="tangerine">tangerine</option>
                        <option value="pineapple">pineapple</option>
                        <option value="carrot">carrot</option>
                        <option value="grapefruit">grapefruit</option>
                        <option value="plum">plum</option>
                        <option value="blueberry">blueberry</option>
                        <option value="strawberry">strawberry</option>
                        <option value="cashews">cashews</option>
                        <option value="peanuts">peanuts</option>
                    </select>
                </form>    
            </div>
            <div class="middle">
                <input type="button" value="Add-->" onClick="removeOptionSelected('left','right');" />
                <input type="button" value="<--Remove" onClick="removeOptionSelected('right','left')" />
            </div>
            <div class="side">
                <form name="right">
                    <select id="right" class="right" multiple name="out">
                        <option value="greenbeans">greenbeans</option>
                        <option value="walnuts">walnuts</option>
                    </select>
                </form>    
            </div>
        </div>
    </body>
</html>

Assigning Indices Of Options In A Select Menu In Ie

Similar Tutorials

View Content

*Edit: I thread title should probably be "Initialize indices..."*

I've done quite a bit of research but couldn't find what I need to know so here I am.

I have some javascript generated by php that reads a configuration file to add options to a select menu. This is somewhat irrelevant but... these options are removed from the menu when clicked and data related to the option is shown on the page... and the option gets re-added when the data is closed. I need the option to go back in the correct place/order in the select menu... which wouldn't be a problem if I could initialize the indices of the menu's options. They need to be initialized because when the page is created, saved settings are read and certain options are not shown in the list because they may already be shown according to the settings... meaning... since browsers automatically increment the indices of the options by 1 (starting at 0), if data is closed that was initially open and therefore not in the select menu at first... the key/index associated with that data will likely not match the correct menu order.

Code:

<script type="text/javascript">
	function addOptionToSelect(selectID,index,offset,val,txt) {
		var elSel = document.getElementById(selectID);
		elSel.options[index+offset].value = val;
		elSel.options[index+offset].text = txt;
	}
	function addLoadEvent(func) {
		var oldonload = window.onload;
		if (typeof window.onload != 'function') {
			window.onload = func;
		} else {
			window.onload = function() {
				if (oldonload) {
					oldonload();
				}
				func();
			}
		}
	}
<?php
	foreach ($props as $k => $prop) {
		if (!in_array($prop, $_SESSION['crProps'])) {
?>
	addLoadEvent(addOptionToSelect('propertySelect',<?php echo $k; ?>,1,'?p=<?php echo $prop; ?>&k=<?php echo $k; ?>','<?php echo $prop; ?>'));
<?php
		}
	}
?>
</script>

For example, suppose I have the following potential data sets: a,b,c,d,e,f

In the config file that helps create the page, suppose it is something like: <Default>0:a|2:c|3:d</Default>
(FYI: I've designed it so that the data set names/options are separated by the pipe character ("|") and their corresponding index is the number to the left of the colon.)

Then the select menu that is initially generated would be something like:
(Every other data set name except for what is already open by default.)
<select id="bleh">
<option value="b">b
<option value="e">e
<option value="f">f
</select>

And by default, browsers would assign the indices like so:
(skipping getElementById and all that...)
select.options[0].value = b
select.options[1].value = e
select.options[2].value = f

Whereas, I need it to be initialized like this:
select.options[1].value = b
select.options[4].value = e
select.options[5].value = f

So that when the data sets initially open are closed (a, c, or d)... they get put in the correct position in the list.

I just thought of something... it's a little inefficient (OCD lol) but it should work and at worst would only cost a couple of milliseconds of processing time. A solution to this problem might be to load the menu with all options so that their indices are correct... and remove the defaults afterward. I'll try it.

Change Image Based On Multiple Select Options

Similar Tutorials

View Content

Hello, I just joined the forum. I'm hoping someone could help me out or point me in the right direction.

I am trying to set up a simple interaction for users. The user would be required to select a width then height from two separate drop down menus. I used this as an example to work from: http://www.w3.org/TR/WCAG20-TECHS/wo...dynselect.html

The list of heights would not be available until the user selects a width.(similar to the example link above). Each width would have slightly different heights associated with it. After the user selects a width then height an image would be displayed based on that combination. So for example if the user selects 12w/30h they would see "01.jpg" if the user selects 12w/36h they would see "02.jpg". This would all be done on the same page. The user should be able to update the image by combining the different width/height options indefinitely.

If anyone has a link to an example or can provide a basic structure I could build of off I would be extremely grateful, thanks.

How Do You Change The Image Upon Changing The Options In Select Drop Down Box?

Similar Tutorials

View Content

all i have to do is the image to change automatically based on the option you selected from the drop down list.
here is the code, any help is appreciable. thanks in advance.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
img{
height:95px;
width:95px;
display:block;
margin-top:10px;
}
#caption{
font-family:Verdana,tahoma,arial;
font-size:8pt;
text-align:left;
display:block;
width:250px;
}
</style>
<script type="text/javascript">
window.onload=function()
{
var caption=['Default Image Caption',
'begonia',
'daffodils',
'mixture',
'natural',
'purple',
'red flower',
'sunflower',
'tulip',
'two flowers'], // This will be your images caption
bp='..\images', //base url of your images
imgnum=9, //Number of your images. This should match on your comboboxes options.
thumb=document.getElementById('thumb'), //id of your image that will be changing
description=document.getElementById('caption'), //id of your caption
combobox=document.getElementById('selection'); // id of your combobox.

combobox.onchange=function()
{
thumb.src=bp+'Picture'+this.value+'.jpg';
description.innerHTML=caption[this.value];
}
}
</script>
</head>
<body>
<label>Please Change the pictu </label>
<select id="selection">
<option>Change Picture</option>
<option value="1">begonia</option>
<option value="2">daffodils</option>
<option value="3">mixture</option>
<option value="4">natural</option>
<option value="5">purple</option>
<option value="6">red flower</option>
<option value="7">sunflower</option>
<option value="8">tulip</option>
<option value="9">two flowers</option>
</select>
<br>
<img src="..\images" alt="mypic" id="thumb">
<span id="caption">Caption for the default Image</span>
</body>
</html>
thanks again

Change From Input Field To Select Options Causes Problems

Similar Tutorials

View Content

Hi there,

I am a new javascript guy - struggling a bit but marching on -

The following code works fine to set a form field -

Code:

document.getElementById("ZS_Land").value = (empLand.innerHTML);

However, I changed to form field into a select with option list, and I need it to set an option from the select now - the select has the same name/id as the field had, but is not working

Any ideas how I do that ?

Many thanks in advance

Glorifindal

Select Option Help

Similar Tutorials

View Content

Hi Guys,

A bit stuck here and was wondering what you guys think.

I have an HTML Select Option with a list of countries. A user saves that page and when he wants to return to the same page later at some point, i would like to populate the countries drop down list with what he entered initially.

Is there an easy way to do this?

Thanks.

Adding Options In Select Widget Not Working In Internet Explorer

Similar Tutorials

View Content

Hi All,

I have a javascript function which adds a label and value to a select widget in its parent window. The function is working fine in firefox and chrome without any errors or warnings. But it is not working in internet explorer. Please tell me what the issue is. Thanks in advance for your help.

Code:

function addToParent( formName, selectName, name, label ) {

    var parent       = window.opener;
    var selectWidget = parent.document.forms[formName].elements[selectName];

    if( selectWidget ) {

        var length = selectWidget.length;
        selectWidget[length] = new Option( name, label, false, false );
    }
}

When I tried to debug, internet explorer shows an error in the following line

Code:

selectWidget[length] = new Option( name, label, false, false );

Is there anything wrong with this statement ??

Changing Html Select Options Based On Other Selection With Javascript And Php

Similar Tutorials

View Content

Dear all,

background information:
I did code a timesheet management system for my company with PHP where the user has to submit time entries and has an online form with several start and end times. The start and end times are all simple HTML select option dropdowns. I want that the first End time selection will be the next start time selection. Basically a simple dependency of the dropdown. My approach was that I want to solve this with JavaScript. In my php code I am echoing the following (in this select the end times are the values):

echo "<select class='normal' name='$field_id' onChange=set_time_hour(this.value,'$field_id_js')>";

When the user changes then the end time dropdown the next field (next start time entry) should be changed accordingly.

The javascript looks like this

function set_time_hour(hour_value,next_field){
alert (hour_value);
alert (next_field);
document.getElementById(next_field).value = hour_value;
}

The alert calls are giving me the right values. but the

document.getElementById(next_field).value = hour_value;

is not working. What is wrong there? Do you have an idea?

How can I change the value of a select box with Javascript?

The select box values are already popoluated with PHP so I just want to select the right value.

Title To Option Tag In Select Box

Similar Tutorials

View Content

How to add title to options in Select box , where the options are generated from the data base.
Any idea

Select Box Redirect, On Only One Option.

Similar Tutorials

View Content

Hello.

Could anyone help me with this? I understand how to use OnChange with select boxes to allow the page to be redirected when certain options are selected, such as;

Code:

<select onchange="window.open(this.options[this.selectedIndex].value,'_top')">
    <option value="">Choose a destination...</option>
    <option value="http://www.yahoo.com/">YAHOO</option>
    <option value="http://www.google.com/">GOOGLE</option>
    <option value="http://www.altavista.com/">ALTAVISTA</option>
    <option value="http://www.amazon.com/">AMAZON</option>
    <option value="http://artlung.com/">ARTLUNG</option>
</select>

However, I would like the page to only be redirected when just one option (out of 3) are chosen... and when the other two are chosen, we remain on the same page. such as;

Code:

<select onchange="window.open(this.options[this.selectedIndex].value,'_top')">
    <option value="">Choose an option...</option>
    <option value="tonight">TONIGHT</option>
    <option value="tomorrow">TOMORROW</option>
    <option value="http://mysite.com/selectdate">SELECT DATE</option>
</select>

is this possible?

Many Thanks,
Patrick.

Detect Select Option Changes

Similar Tutorials

View Content

Hi all,i'm wondering how to detect select option changes.For example i want the data in database changed when i click on update button and if there are changes on the select option side.If the values on the select option are not changed,i can't update the data..Is there a way to achieve it?Thanks a lot...

Select Option W/o Javascript

Similar Tutorials

View Content

Hey, how do I make the following accessible if JS is disabled?

Code:

<select onchange="if (this.selectedIndex > 0) location.href=this[this.selectedIndex].value;"> 
                 <option value="www.domain.com">Your Domain</option>   </select>