hide/show div [Resolved]

[ober0330]

The call to the function:

echo "<select name=drange size=1 onChange=\"checkd()\">";
            if(isset($_GET['drange']))
            {
                echo "<option value=" . $_GET['drange'] . ">" . $_GET['drange'] . "</option>";
                echo "<option value=ytd>Year To Date</option>";
            }
            else
                echo "<option value=ytd selected>Year To Date</option>";
            
            echo "<option value=all>All Dates</option>";                        
            echo "<option value=range>Range Of Dates</option>";
            echo "</select>"; 

Here's my function:

var browserType;

if (document.layers) {browserType = "nn4"}
if (document.all) {browserType = "ie"}
if (window.navigator.userAgent.toLowerCase().match("gecko")) {browserType= "gecko"}

function checkd()
{
    if(document.dform.drange.options[document.dform.drange.selectedIndex].value != "range")
    {
        if (browserType == "gecko" )
        {
            document.poppedLayer = eval('document.getElementById(\'from\')');
            document.poppedLayer = eval('document.getElementById(\'to\')');
        }
        else if (browserType == "ie")
        {
            document.poppedLayer = eval('document.all[\'from\']');
            document.poppedLayer = eval('document.all[\'to\']');
        }
        else
        {
            document.poppedLayer = eval('document.layers[\'`from\']');
            document.poppedLayer = eval('document.layers[\'`to\']');
        }
        document.poppedLayer.style.visibility = "hidden";
    }
    else
    {
        if (browserType == "gecko" )
        {
            document.poppedLayer = eval('document.getElementById(\'from\')');
            document.poppedLayer = eval('document.getElementById(\'to\')');
        {
        else if (browserType == "ie")
        {
            document.poppedLayer = eval('document.all[\'from\']');
            document.poppedLayer = eval('document.all[\'to\']');        
        }
        else
        {
            document.poppedLayer = eval('document.layers[\'`from\']');
            document.poppedLayer = eval('document.layers[\'`to\']');        
        }
        document.poppedLayer.style.visibility = "visible";
    }    
}

Here is the second div:

<div id="to" style="position:relative; z-index:1; visibility: hidden">
        <?php
        if(isset($_GET['to']))
           echo "To: <input type=text name=to size=12 maxlength=10 value=" . $_GET['to'] . "> ";
        else
            echo "To: <input type=text name=to size=12 maxlength=10> ";
        ?>
    <A HREF="#" onClick="cal1good.select(document.dform.to,'anchor2','MM/dd/yyyy'); return false;" NAME="anchor2" ID="anchor2">select</A>
        <layer></layer></div>

It's not working. When I change it to the correct option, it's not doing the hide/show. I know this is a lot of code, but it's really simple when you really look at it. Am I doing something wrong?

[CornedBee]

You have unnecessary browser detection and serious quote problems, unless the board messed up the latter. You also have unnecessary evals.
Further, the name attribute isn't sufficient to identify an element in Gecko, you need to set the id attribute for that. I consider it a mistake that IE allows the name attribute for getElementById. Actually IE might get confused by the div with id=to and the input with name=to.
You have two subsequent assignments to the same variable, thus making the first one unnecessary.

And what is the layer tag doing there?

If you're debugging JavaScript, use Mozilla's JS console, it gives far more meaningful messages than IE.

[ober0330]

Well, I got that function off of another website and tweaked it just a little to use 2 divs.

I have no idea why the layer tag is in there... it was in the example I found and I figured it was necessary, despite my better logic.

This is for internal stuff, so I don't even need to check for Gecko stuff... everyone is using Netscape and IE.

Should I do one div at a time, making it visible/hidden, before doing the second div?

And as far as I know, the quotes are all as they are in my code... posting didn't alter them.

I'm fairly new to javascript, so any help would be appreciated.

[CornedBee]

Ok...

This:
document.poppedLayer = eval('document.all['from']');
document.poppedLayer = eval('document.all['to']');

is the most problematic part.
First, the evals are, as I said, unnecessary. This also solves the quote problem.
document.poppedLayer = document.all['from'];
document.poppedLayer = document.all['to'];

Now, you're still assigning twice to the same variable. The second assignment simply overrides the first.
What you need, therefore, is two variables:
document.poppedLayer1 = document.all['from'];
document.poppedLayer2 = document.all['to'];

Of course then you need to adjust this:
document.poppedLayer.style.visibility = "hidden";

to
document.poppedLayer1.style.visibility = "hidden";
document.poppedLayer2.style.visibility = "hidden";

Further along, there's unnecessary code repeat, easily avoidable by restructuring. Not to mention that browser detection is stupid, object detection is far better:

if(document.getElementById) {
  document.poppedLayer1 = document.getElementById('from');
  document.poppedLayer2 = document.getElementById('to');
} else if(document.all) {
  document.poppedLayer1 = document.all['from'];
  document.poppedLayer2 = document.all['to'];
} else if(document.layers) {
  document.poppedLayer1 = document.layers['from'];
  document.poppedLayer2 = document.layers['to'];
}
var sel = document.dform.drange;
var vis = sel.options[sel.selectedIndex].value != "range" ? "hidden" : "visible";
document.poppedLayer1.style.visibility = vis;
document.poppedLayer2.style.visibility = vis;

[ober0330]

Perfect. I really need to buy a Javascript book or spend some time looking over this stuff.

edit: And thank you.