Hide and show using JavaScript

Question

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.

Thanks for all the answers you are It really quick! Thank you. FIXED!! — tizekek, Nov 13 '11 at 17:12
This is a great example of why one must **always** wrap (conditional/loop) blocks in brackets. To do otherwise is to not only create sloppy code, but makes it incredibly hard to debug or understand months later. — BryanH, Feb 05 '13 at 16:12

score 3 · Accepted Answer · answered Nov 13 '11 at 17:03

3

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";
    }
}

answered Nov 13 '11 at 17:03

nillls

625
4
11

ohhhh =D ,Thank you worked perfectly then that's what I was missing. – tizekek Nov 13 '11 at 17:10
An optimization to this would be to store the form collection in a variable like this: var myForm = document.getElementsByName('form[dominio]'); and then in the if-statements use myForm[0].checked, myForm[1].checked etc. This way, DOM-traversal happens only once. – nillls Nov 13 '11 at 17:22

score 1 · Answer 2 · answered Nov 13 '11 at 17:02

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.

score 0 · Answer 3 · answered Nov 13 '11 at 17:13

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>

score -1 · Answer 4 · edited May 23 '17 at 12:03

-1

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.

edited May 23 '17 at 12:03

Community

1
1

answered Nov 13 '11 at 16:58

Kae Verens

4,076
3
21
41

3

And JavaScript is not jQuery. Did you see any sentence such as "Please suggest jQuery solutions for me"? – Rob W Nov 13 '11 at 16:59
1

it was implied that the OP would like /a/ solution. I supplied a solution. I don't see your one. – Kae Verens Nov 13 '11 at 17:03
@KaeVerens when i see most people ask for jquery i don't even wast my time with a pure js alternative, version because you may get criticized. – david Nov 13 '11 at 17:23
@KaeVerens also the as the sites rules state, `ops` acceped answer may not be the correct/best solution provided – david Nov 13 '11 at 17:25

Hide and show using JavaScript

4 Answers4