CODEWITHSUNDEEP
javascript
tizekek
tizekek

Reputation: 3

Hide and show using JavaScript

sorry for the English.

Have dynamic radio buttons are working, however, but I am new to javascript

when you select one option Seems in another as I hide it? fix this?

RADIOS: •YES •NO •OTHER

and div hide...

<div id="hide"> FORM FOR YES </div> 
<div id="hide2">FORM FOR OTHER </div>

when I select "yes" and then "other" are appearing as two divs can hide the div "hide". this only ever if I select "yes" and then "other". 

window.onload=function(){
    document.getElementById('hide').style.display="none";
            document.getElementById('hide2').style.display="none";
}

function possui_dominio()
{
if(document.getElementsByName('form[dominio]')[0].checked)
document.getElementById('hide').style.display="inline";

if(document.getElementsByName('form[dominio]')[1].checked)
document.getElementById('hide').style.display = 'none';
document.getElementById('hide2').style.display = 'none';

if(document.getElementsByName('form[dominio]')[2].checked)
document.getElementById('hide2').style.display="inline";
}

</script>

Thank you for those who help me, sorry for bad English.

Upvotes: 0

Views: 8950

Answers (4)

Thein Hla Maw
Thein Hla Maw

Reputation: 683

This is the simple example for you.

<html>
<head>
<title>Hide/Show Pane Javascript</title>
<script type="text/javascript">
    function togglePane(pane_id){
    //alert(pane_id)
        var current_pane = document.getElementById('pane_'+pane_id);
        //alert(current_pane);
        if(pane_id == 1){
            current_pane.style.display = 'block';
            document.getElementById('pane_2').style.display = 'none';
            document.getElementById('pane_3').style.display = 'none';
        } else if(pane_id == 2){
            current_pane.style.display = 'block';
            document.getElementById('pane_1').style.display = 'none';
            document.getElementById('pane_3').style.display = 'none';
        } else if(pane_id == 3){
            current_pane.style.display = 'block';
            document.getElementById('pane_1').style.display = 'none';
            document.getElementById('pane_2').style.display = 'none';
        }
    }
</script>
</head>
<body>
<input type="radio" name="option" id="option1" value="1" checked="checked" onclick="togglePane(1)"><label for="option1">Yes</label>
<input type="radio" name="option" id="option2" value="2" onclick="togglePane(2)"><label for="option2">No</label>
<input type="radio" name="option" id="option2" value="3" onclick="togglePane(3)"><label for="option3">Other</label>
<div id="pane_1" style="display: block">Yes Block</div>
<div id="pane_2" style="display: none">No Block</div>
<div id="pane_3" style="display: none">Other Block</div>
</body>
</html>

Upvotes: 0

nillls
nillls

Reputation: 623

You need to hide the other elements in your functions like this:

function possui_dominio()
{
    if(document.getElementsByName('form[dominio]')[0].checked){
        document.getElementById('hide2').style.display="none";
        document.getElementById('hide').style.display="inline";
    }

    if(document.getElementsByName('form[dominio]')[1].checked){
        document.getElementById('hide').style.display = 'none';
        document.getElementById('hide2').style.display = 'none';
    }

    if(document.getElementsByName('form[dominio]')[2].checked){
        document.getElementById('hide2').style.display="inline";
        document.getElementById('hide').style.display="none";
    }
}

Upvotes: 3

Yogu
Yogu

Reputation: 9445

In Java Script, if statements always follow this scheme:

if (condition)
  statement;

If you want to execute two statements in case the condition is true, you have to put those statements into braces ({ }), so that they are executed both together:

if (condition) {
  statement1;
  statement2;
}

Your second if statement looks like this (well formatted):

if (condition)
  statement1;
statement2;

As you see, the second statement has nothing to do with the if statement and thus is always executed.

Upvotes: 1

Kae Verens
Kae Verens

Reputation: 4079

How to use jQuery to show/hide divs based on radio button selection?

use name, not id (in this case). the names should be the same.

use a framework such as jQuery, which handles differences between browsers much better than if you were to use pure JavaScript.

and finally, JavaScript is /not/ Java.

Upvotes: -1

Related Questions