• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 384
  • Last Modified:

Jump Menu show and hide layers Value issue

Hi, I found this this solution of hide and show layers with a jump menu and it works great but the value that will be going to the data base is limited to the name of the layer, layer names are restricted with no spaces and can't start with a number.
For example: i would like the value of the first choice to read 4 over 1, but i can't name my layer that, and i don't wan't my value to send fouroverone. Does anyone have any sugestions or solution?

here is the link: http://www.dynacolor.com/test.php

and the code:

<html>
<head>
<title>Layer-revealing jump menu!</title>
<script type="text/javascript">
<!--
function reveal(menu)
     {
     for(i=0;i<menu.options.length;i++)
          if(menu.options.selectedIndex==i)
               document.getElementById(menu.options[i].value).style.display='';
          else
               document.getElementById(menu.options[i].value).style.display='none';
     }
//-->
</script>
</head>
<body>
<div id="layer1" style="position:absolute; left:15px; top:103px; width:494px; height:135px; background-color:#FFFFFF">
  <table width="100%" height="67" border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td width="29%"><img src="/quote/files%20with%20images.gif" width="125" height="127"></td>
      <td width="71%" valign="top"><strong>Electronic Files</strong> - you will
        provide disk or upload files via our FTP site with <strong>complete layout,
        design, and hi res digital separations</strong>. See electronic file submission
        requirements before sending files.</td>
    </tr>
  </table>
</div>
<div id="layer2" style="position:absolute; left:14px; top:102px; width:495px; height:91px; display:none; background-color:#FFFFFF">
  <table width="100%" height="67" border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td width="29%"><img src="/quote/fileswoutImages.gif" width="125" height="127"></td>
      <td width="71%" valign="top"><strong>Electronic Files without images</strong>
        - you will provide disk or upload files via our FTP site with complete
        layout design. See electronnic file submission requirements before sending
        files. <strong>Photographs to be scanned by Dynacolor</strong><br>
        Indicate# of Photos
        <input name="scans" type="text" id="scans" value="1" size="6" maxlength="4"></td>
    </tr>
  </table>
</div>
<div id="layer3" style="position:absolute; left:15px; top:104px; width:502px; height:119px; display:none; background-color:#FFFFFF">
  <table width="100%" height="67" border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td width="29%"><img src="/quote/scansDesign.gif" width="125" height="127"></td>
      <td width="71%" valign="top"><strong>Dynacolor Scans &amp; Design</strong>
        - you will provide photographs and rough layout. Dynacolor will scan images
        and design. Indicate# of Photos
        <input name="scans_to_design" type="text" id="scans3" value="1" size="6" maxlength="4"></td>
    </tr>
  </table>
</div>
<form action="#" method="get" name="form1" id="form1">
            
  <p>
    <select name="jump" id="jump" onChange="reveal(this);">
      <option value="layer1">Electronic Files with images</option>
      <option value="layer2">Electronic Files without images</option>
      <option value="layer3">Dynacolor Scans &amp; Design</option>
    </select>
  </p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
</form>
</body>
</html>
0
rkteach
Asked:
rkteach
  • 6
  • 5
1 Solution
 
archrajanCommented:
Here ur updated code:
<html>
<head>
<title>Layer-revealing jump menu!</title>
<script type="text/javascript">
<!--
function reveal(menu)
     {
     for(i=0;i<menu.options.length;i++)
          if(menu.options.selectedIndex==i)
               document.getElementById(menu.options[i].getAttribute('value2')).style.display='';
          else
               document.getElementById(menu.options[i].getAttribute('value2')).style.display='none';
     }
//-->
</script>
</head>
<body>
<div id="layer1" style="position:absolute; left:15px; top:103px; width:494px; height:135px; background-color:#FFFFFF">
  <table width="100%" height="67" border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td width="29%"><img src="/quote/files%20with%20images.gif" width="125" height="127"></td>
      <td width="71%" valign="top"><strong>Electronic Files</strong> - you will
        provide disk or upload files via our FTP site with <strong>complete layout,
        design, and hi res digital separations</strong>. See electronic file submission
        requirements before sending files.</td>

    </tr>
  </table>
</div>
<div id="layer2" style="position:absolute; left:14px; top:102px; width:495px; height:91px; display:none; background-color:#FFFFFF">
  <table width="100%" height="67" border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td width="29%"><img src="/quote/fileswoutImages.gif" width="125" height="127"></td>
      <td width="71%" valign="top"><strong>Electronic Files without images</strong>
        - you will provide disk or upload files via our FTP site with complete
        layout design. See electronnic file submission requirements before sending
        files. <strong>Photographs to be scanned by Dynacolor</strong><br>
        Indicate# of Photos
        <input name="scans" type="text" id="scans" value="1" size="6" maxlength="4"></td>

    </tr>
  </table>
</div>
<div id="layer3" style="position:absolute; left:15px; top:104px; width:502px; height:119px; display:none; background-color:#FFFFFF">
  <table width="100%" height="67" border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td width="29%"><img src="/quote/scansDesign.gif" width="125" height="127"></td>
      <td width="71%" valign="top"><strong>Dynacolor Scans &amp; Design</strong>
        - you will provide photographs and rough layout. Dynacolor will scan images
        and design. Indicate# of Photos
        <input name="scans_to_design" type="text" id="scans3" value="1" size="6" maxlength="4"></td>

    </tr>
  </table>
</div>
<form action="#" method="get" name="form1" id="form1">
           
  <p>
    <select name="jump" id="jump" onChange="reveal(this);">
      <option value="something else">Electronic Files with images</option>
      <option value="as u wish">Electronic Files without images</option>
        <option value="here it goes">Dynacolor Scans &amp; Design</option>
    </select>
      <script>
      function doit()
      {
      var sel = document.getElementById('jump')
      for(i=0; i <sel.length;i++)
      {
      var temp = "layer"+(i+1)
      //alert(temp)
      sel.options[i].setAttribute('value2',temp)
      }
      }
      doit();
      </script>
  </p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>

  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
</form>

</body>
</html>
0
 
archrajanCommented:
To explain what i have done, i have just added a dummy attribute called value2 at runtime via scripting which holds the layer numbers.
So you can free up your value attribute for ur own needs
u can also have
<option value2 = "Layer2" value = "something else">
but it will not validate when you try to do it a html validator..
so u add value2 at runtime.. (thanks to the idea of devic) to make sure its valid markup!
if u are not for validating your html you can just have
<option value2 = "Layer2" value = "something else"> and remove the function doit()

0
 
rkteachAuthor Commented:
Ok so "option value2" will  triger the layer and "value=" I can send to my data base.
Im testing it now.
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
archrajanCommented:
yeah absolutely!
0
 
archrajanCommented:
did u try?
0
 
rkteachAuthor Commented:
Yes! works fantastic!
Man you guys are QUICK!!!!!
0
 
rkteachAuthor Commented:
OhNo! i just tested on a MAC running IE 5.2 and the show/hide layer doesn't work
Works in Safari and windows IE.
has nothing to do with your mod,
any ideas to show for mac IE 5.2 as some of our clients will be using that set-up.
0
 
archrajanCommented:
It shud work on Mac,
but right now i am at work and unfortunately i have windows here,
i can get back home in the evening and check this on MAC,
But my strong point is that it shud work on MAC
Remove my code and test if ur code is working in mac and let me know...
0
 
rkteachAuthor Commented:
no my code won't work either
works on a MAC running safari
but not IE 5.2 which is the current version for os 9
OS 10 running Safari is fine, Im going to test on other mac we have in the office and let ya know.

this will part of a print quote form for graphic artists and photographers.
0
 
archrajanCommented:
i have asked commnutiy support to reopen this question for discussion
0
 
rkteachAuthor Commented:
Thanks as i have tested on 3 MACs here running OS9 with IE 5.2, 5,1 and its acting as a static jump menu, not switching the layers at all.

Im going to continue designing the form and hope for an answer.

thanks again.
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

  • 6
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now