Form onchange performs two different functions depending on selection from drop down menu

Posted on 2007-07-20
Last Modified: 2012-05-05
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">

      <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) {"none";
    actDiv = document.getElementById("Layer"+v);"block";


<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">
      <td width="100%" valign="top">      
<!-- Content Area -->
      <table cellspacing="2" cellpadding="2" border="0">
      <td>Select an option and content will appear      </td>

      <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>

         <!-- 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
   <!-- Show Hide content 2 -->  
  <div id="Layer2" style="display:none;">
   Content 2

<!-- Show Hide content 2 -->  
  <div id="Layer3" style="display:none;">
   Content 3

<!-- Report Usage -->
<div id="Layer4" style="display:none;">
 I want this menu selection to change page location

      <!-- Content Area End -->

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
Question by:mrslate1
    LVL 18

    Expert Comment

    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.
    LVL 2

    Accepted Solution

    Modify your chklayer likethis:

    function chklayer(v) {
      if (actDiv) {"none";

      }else if(v>0){
        actDiv = document.getElementById("Layer"+v);"block";

    Author Comment

    Thanks Cap2501, That is exactly what I was looking for!! I really apprecitate it!
    LVL 2

    Expert Comment

    No problem.

    Featured Post

    Course: HTML5 for Beginning Beginners

    Are you looking for an efficient introduction to HTML5? Have you tried other HTML5 courses and found them too complex? Do you need just the basics of HTML5 to use with Wordpress or other content management system? If you said yes to any of these questions, this course is for you.

    Join & Write a Comment

    Suggested Solutions

    Title # Comments Views Activity
    Pass custom headers using request module 1 24
    PHP Radio Array 4 27
    Help with a small Javascript 6 26
    Page not loading properly 15 2
    Today I would like to talk about localizing (Internationalization) JavaScript applications. Introduction When creating an application that is going to be used by many people around the globe, it is important to remember that not everyone speak…
    This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
    The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
    The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

    729 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    18 Experts available now in Live!

    Get 1:1 Help Now