?
Solved

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

Posted on 2007-07-20
4
Medium Priority
?
1,222 Views
Last Modified: 2012-05-05
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
0
Comment
Question by:mrslate1
  • 2
4 Comments
 
LVL 18

Expert Comment

by:ChetOS82
ID: 19533253
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
 
LVL 2

Accepted Solution

by:
cap2501 earned 2000 total points
ID: 19534660
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
 

Author Comment

by:mrslate1
ID: 19537320
Thanks Cap2501, That is exactly what I was looking for!! I really apprecitate it!
0
 
LVL 2

Expert Comment

by:cap2501
ID: 19544497
No problem.
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to create an extensible mechanism for linked drop downs.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
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…
Suggested Courses

615 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