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" rel="stylesheet" type="text/css">
      
      <script language="JavaScript">
var actDiv;
var actDiv2;
function chklayer(v) {
  if (actDiv) {
    actDiv.style.display="none";
  }
  if(v>0){
    actDiv = document.getElementById("Layer"+v);
    actDiv.style.display="block";
  }
}
</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.value);">
      <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
mrslate1Asked:
Who is Participating?
 
cap2501Commented:
Modify your chklayer likethis:

function chklayer(v) {
  if (actDiv) {
    actDiv.style.display="none";
  }

  if(v==4){
    window.location="http://www.google.com";
  }else if(v>0){
    actDiv = document.getElementById("Layer"+v);
    actDiv.style.display="block";
  }
}
0
 
ChetOS82Commented:
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.
0
 
mrslate1Author Commented:
Thanks Cap2501, That is exactly what I was looking for!! I really apprecitate it!
0
 
cap2501Commented:
No problem.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.