mrslate1
asked on
Form onchange performs two different functions depending on selection from drop down menu
Hello,
I am using a Form drop down select onchange event to show/hide elements on a page. The problem is one of the select choices should go to a page instead of show/hide. How do I add this functionality in the same form. That is, have two seperate functions depending on the selection chosen?
Here is the code I am using currently:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>FETCH ADMIN</title>
<link href="css/merch_report.css
<script language="JavaScript">
var actDiv;
var actDiv2;
function chklayer(v) {
if (actDiv) {
actDiv.style.display="none
}
if(v>0){
actDiv = document.getElementById("L
actDiv.style.display="bloc
}
}
</script>
</head>
<body bgcolor="#FFFFFF" leftmargin="30" topmargin="0" rightmargin="0" bottommargin="0" marginwidth="0" marginheight="0">
<!-- Master Table Beginning -->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" valign="top">
<!-- Content Area -->
<table cellspacing="2" cellpadding="2" border="0">
<tr>
<td>Select an option and content will appear </td>
</tr>
<tr><form>
<td> <select name="type" onchange="chklayer(this.va
<option value="0">Select Option:</option>
<option value="1">Select 1 shows content on existing page</option>
<option value="2">Select 2 shows content on existing page</option>
<option value="3">Select 3 shows content on existing page</option>
<option value="4">Select 4 should opent new location in existing window</option>
</select></td></forrm>
</tr>
</table>
<!-- Conetent show hide 1-->
<div style="position:absolute; left:60px; top:75px; width:455px; height:131px; z-index:1;">
<div id="Layer1" style="display:none;">
Content 1
</div>
<!-- Show Hide content 2 -->
<div id="Layer2" style="display:none;">
Content 2
</div>
<!-- Show Hide content 2 -->
<div id="Layer3" style="display:none;">
Content 3
</div>
<!-- Report Usage -->
<div id="Layer4" style="display:none;">
I want this menu selection to change page location
</div>
</td>
</tr>
</table>
<!-- Content Area End -->
</body>
</html>
Again I want selection 4 to launch a new page in existing browser window. I do know how to do a JavaScript jump menu, but not if there is already an onchange event specified
I am using a Form drop down select onchange event to show/hide elements on a page. The problem is one of the select choices should go to a page instead of show/hide. How do I add this functionality in the same form. That is, have two seperate functions depending on the selection chosen?
Here is the code I am using currently:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>FETCH ADMIN</title>
<link href="css/merch_report.css
<script language="JavaScript">
var actDiv;
var actDiv2;
function chklayer(v) {
if (actDiv) {
actDiv.style.display="none
}
if(v>0){
actDiv = document.getElementById("L
actDiv.style.display="bloc
}
}
</script>
</head>
<body bgcolor="#FFFFFF" leftmargin="30" topmargin="0" rightmargin="0" bottommargin="0" marginwidth="0" marginheight="0">
<!-- Master Table Beginning -->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" valign="top">
<!-- Content Area -->
<table cellspacing="2" cellpadding="2" border="0">
<tr>
<td>Select an option and content will appear </td>
</tr>
<tr><form>
<td> <select name="type" onchange="chklayer(this.va
<option value="0">Select Option:</option>
<option value="1">Select 1 shows content on existing page</option>
<option value="2">Select 2 shows content on existing page</option>
<option value="3">Select 3 shows content on existing page</option>
<option value="4">Select 4 should opent new location in existing window</option>
</select></td></forrm>
</tr>
</table>
<!-- Conetent show hide 1-->
<div style="position:absolute; left:60px; top:75px; width:455px; height:131px; z-index:1;">
<div id="Layer1" style="display:none;">
Content 1
</div>
<!-- Show Hide content 2 -->
<div id="Layer2" style="display:none;">
Content 2
</div>
<!-- Show Hide content 2 -->
<div id="Layer3" style="display:none;">
Content 3
</div>
<!-- Report Usage -->
<div id="Layer4" style="display:none;">
I want this menu selection to change page location
</div>
</td>
</tr>
</table>
<!-- Content Area End -->
</body>
</html>
Again I want selection 4 to launch a new page in existing browser window. I do know how to do a JavaScript jump menu, but not if there is already an onchange event specified
ChetOS82
You can't. chklayer() needs to determine what action to perform based on the parameters. If the parameter is a ID then do the show/hide, otherwise, open the window.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thanks Cap2501, That is exactly what I was looking for!! I really apprecitate it!
No problem.