Execute javascript function based on selected dropdown list value.

TKOEHN5751 · #1 (**permalink**) 02-25-04, 03:46 PM

I would like to use a dropdown list that would execute a different javascript funtion based on the value the user selected.

My first goal is if 1,2,3,4,or 5 is chosen the second field(named "Eway") appears. If 0 is chosen the field disappears.

My second goal is if the 2nd field is visable it needs to be required, when it is not visible it should NOT be required.

Here is what I've got so far...

<SCRIPT>
function yes() {
MMDiv.style.visibility='visible';
mainform.MakeModel.focus();
}</SCRIPT>
<SCRIPT>
function no() {
MMDiv.style.visibility='hidden';
mainform.MakeModel.focus();
}</SCRIPT>

<table width="292" align=center cellpadding=0 cellspacing=1 bgcolor=A4C0DD border=1><tr><td colspan="8">
<table border="0" align="center"><tr>

<td height=10 width="50"><B>Card 1</td>

<td>Qty
<select class=d type=text name=qty1 size=1 onchange="yes()">
<option selected value="0"></option>
<option onchange=yes() value="1">1 box of 250</option>
<option value="2">2 boxes of 250</option>
<option value="3">3 boxes of 250</option>
<option value="4">4 boxes of 250</option>
<option value="5">5 boxes of 250</option>
</td>

<td>
<DIV ID="MMDiv" style="visibility:hidden">
<LABEL FOR="MakeModel">Eway # <INPUT TYPE="TEXT" class="d" ID="MakeModel" name="requiredeway1" size="6">
</LABEL>
</DIV>
</td>

</tr></table>
</td></tr></table>

jimcart · #2 (**permalink**) 02-26-04, 07:38 AM

<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT>
function show(aval) {
if (aval >= 1) {
MMDiv.style.visibility='visible';
mainform.MakeModel.focus();
} else
MMDiv.style.visibility='hidden';
}
</SCRIPT>
</HEAD>
<BODY>
<Form name="mainform">
<table width="292" align=center cellpadding=0 cellspacing=1 bgcolor=A4C0DD border=1><tr><td colspan="8">
<table border="0" align="center"><tr>
<td height=10 width="50"><B>Card 1</td>
<td>Qty
<select class=d type=text name=qty1 size=1 onchange="javascript:show(this.options[this.selectedIndex].value)">
<option selected value="0"></option>
<option onchange=yes() value="1">1 box of 250</option>
<option value="2">2 boxes of 250</option>
<option value="3">3 boxes of 250</option>
<option value="4">4 boxes of 250</option>
<option value="5">5 boxes of 250</option>
</td>
<td>
<DIV ID="MMDiv" style="visibility:hidden">
<LABEL FOR="MakeModel">Eway # <INPUT TYPE="TEXT" class="d" ID="MakeModel" name="requiredeway1" size="6">
</LABEL>
</DIV>
</td>
</tr></table>
</td></tr></table>
</form>
</BODY>
</HTML>

jahwz · #3 (**permalink**) 03-14-04, 01:13 AM

i made a few small changes to the script for what I needed, but even before changes mozilla firefox was giving errors that the id I am referencing wasn't defined.

the following code gives this error in the mozilla JS Console, but works fine in IE6 and Opera 7 without any errors, but no go in firefox or mozilla 1.6

Error: optionyes is not defined

note with the original code posted previously the error was 'MMDiv not defined'
Any ideas?

Code:

<html>
<head>
<title></title>
<SCRIPT>
function show(aval) {
if (aval == "Yes") {
optionyes.style.visibility='visible';
optionyes.style.display='block';
Form.fileURL.focus();
} 
if (aval == "No") {
optionyes.style.visibility='hidden';
optionyes.style.display='none';
}
}
</SCRIPT>
</head>
<body>
<form name="Form"> 
<div>
File Available:
<select name="file" onchange="java_script_:show(this.options[this.selectedIndex].value)">
<option value="No" selected="selected">No</option>
<option value="Yes">Yes</option>
</select>
</div>
<div id="optionyes" style="visibility:hidden">
URL: <input name="fileURL" size="40" />
</div>
</body>
</html>