I'm trying to make two forms that aren't displayed at the same time. The first one stays visible when the page opens, but if the user select, the first one should be hidden and the second one might take it's place. So here is my CSS for this:

#switcher {
    float: right;
    font-size: 12px;
}

#web_upload {
    visibility: hidden;
}

#local_upload {
    visibility: visible;
}

Here is the HTML:

<form action="img_upload.php" id="local_upload" method="post" enctype="multipart/form-data">
    <center>
        <input type="file" name="file" id="file" /> 
        <br />
        <input type="image" name="submit" src="graphics/upload.png" />
    </center>
</form>
<form action="url_upload.php" id="web_upload" method="post" method="post">
    <center>
        <input type="text" name="url" id="url" /> 
        <br />
        <input type="image" name="submit" src="graphics/upload.png" />
    </center>
</form>

And here is my Javascript to do it:

function showHide(id, other)
{
    if(document.getElementById(id)) {
        if(document.getElementById(id).style.visibility != "hidden") {
            document.getElementById(other).style.visibility = "hidden";
            document.getElementById(id).style.visibility = "visible";
        } else {
            document.getElementById(id).style.visibility = "hidden";
            document.getElementById(other).style.visibility = "visible";
        }
    } 
}

So, I'm having three problems:

• The second form has a reserved place on the page and I don't want this empty place
• The second form is displaying on that reserved place instead of taking place over the first one
• If the user select one of the options and try to select other after nothing happens

How I can solve this problems?

I'm trying to make two forms that aren't displayed at the same time. The first one stays visible when the page opens, but if the user select, the first one should be hidden and the second one might take it's place. So here is my CSS for this:

#switcher {
    float: right;
    font-size: 12px;
}

#web_upload {
    visibility: hidden;
}

#local_upload {
    visibility: visible;
}

Here is the HTML:

<form action="img_upload.php" id="local_upload" method="post" enctype="multipart/form-data">
    <center>
        <input type="file" name="file" id="file" /> 
        <br />
        <input type="image" name="submit" src="graphics/upload.png" />
    </center>
</form>
<form action="url_upload.php" id="web_upload" method="post" method="post">
    <center>
        <input type="text" name="url" id="url" /> 
        <br />
        <input type="image" name="submit" src="graphics/upload.png" />
    </center>
</form>

And here is my Javascript to do it:

function showHide(id, other)
{
    if(document.getElementById(id)) {
        if(document.getElementById(id).style.visibility != "hidden") {
            document.getElementById(other).style.visibility = "hidden";
            document.getElementById(id).style.visibility = "visible";
        } else {
            document.getElementById(id).style.visibility = "hidden";
            document.getElementById(other).style.visibility = "visible";
        }
    } 
}

So, I'm having three problems:

• The second form has a reserved place on the page and I don't want this empty place
• The second form is displaying on that reserved place instead of taking place over the first one
• If the user select one of the options and try to select other after nothing happens

How I can solve this problems?

• javascript
• html
• css
• visible

• 3 have you tried display = "none"? – Matt Greer Commented Apr 3, 2011 at 20:49
• 1 Searching for the element every time you want to do soemthing is not good. Make a reference: var element = document.getElementById(id); element.style.vidibilit = "hidden"; – buschtoens Commented Apr 3, 2011 at 21:27

3 Answers 3

@Nathan Campos: I'd bine display and visibility like so --

CSS:

#web_upload {
    display: none;
    visibility: hidden;
}

#local_upload {
    display: inline;
    visibility: visible;
}

JavaScript:

function showHide(id, other)
{
    var id1 = document.getElementById(id);
    var id2 = document.getElementById(other);

    if (id1.style.display == "none") {
        id1.style.display    = "inline";
        id1.style.visibility = "visible";

        id2.style.display    = "none";
        id2.style.visibility = "hidden";
    } else if (id1.style.display == "" || id1.style.display == "inline") {
        id1.style.display    = "none";
        id1.style.visibility = "hidden";

        id2.style.display    = "inline";
        id2.style.visibility = "visible";
    }
}

display: none/block; Show the form / Totally hide and clear the space

visibility: hidden; Hide the form, but keep the space preserved

The CSS visibility property is not the right choice here.

The 'visibility' property specifies whether the boxes generated by an element are rendered. Invisible boxes still affect layout (set the 'display' property to 'none' to suppress box generation altogether)

Reference: http://www.w3/TR/CSS21/visufx.html#visibility

Consider instead the CSS display property - display:none applied to an element will make it appear as if it is not present at all, it will be invisible and will not affect layout.

#switcher {
    float: right;
    font-size: 12px;
}

#web_upload {
    display:none;
}

#local_upload {
    display:block;
}

//

function showHide(id, other)
{
    switch (document.getElementById(id).style.display) {
        case 'block':
            document.getElementById(id).style.display = 'none';
            document.getElementById(other).style.display = 'block';

        case 'none':
            document.getElementById(id).style.display = 'block';
            document.getElementById(other).style.display = 'none';            
    }
}