ansaurus

Question

Toggle element visibility via radio select

Answer 1

A:

Ok I need to change my previous answer because I realized that I read your code wrong. getElementByName is incorrect. It is getElementsByName to start with. Also you don't use checked like you are. That is a boolean property. You should be checking value.

Here is an example. I am using a basic javascript code since it doesn't seem that you are using any libraries to help with this stuff.

for (var i=0; i < document.formname.radiobuttonname.length; i++)
{
    if (document.formname.radiobuttonname[i].checked)
    {
        var rad_val = document.formname.radiobuttonname[i].value;
    }
}

spinon 2010-07-04 06:15:49

Haha there are so many things wrong with the code above o_0

Marko 2010-07-04 06:22:41

Put four spaces before each line of your code to format it as code.

icktoofay 2010-07-04 06:24:57

This is just a basic way to show him how to easily loop through the radio buttons and find the value. It can be done a lot cleaner but this works and judging from the code he pasted in this is about the same approach he would take.Thanks for the tip about the four spaces. I try it and sometimes it doesn't work right for me. But let me edit and see if I can get it right.

spinon 2010-07-04 06:27:25

Yeah I dont have many javascript resources available on the system that this will run on. I only need javascript to the extent of this form an maybe a few others.

2010-07-04 06:31:02

I think I see what your doing here, am I correct in addined the if statements insude your if statement? Edit looks right so far, but not firing.

2010-07-04 06:54:11

Yes you could and that is where you could check to see which value it was that has been checked. But notice that I use document.formname. So you will need to give your form a name and make sure that code matches that. Also check out @NM post above. His looks a lot cleaner.

spinon 2010-07-04 07:04:37

I know there are much cleaner and more efficient ways to perform this task but I really just wanted to give a basic example at a level comparable to the question.

spinon 2010-07-04 07:49:50

@Justin Johnson - my comment was related to the original question. @spinon has altered his post since I added the comment which made it look like it's related to the answer. Thanks for noticing though! :)

Marko 2010-07-04 07:56:49

Well that makes sense at least ;) Never mind me then

Justin Johnson 2010-07-04 08:22:21

Answer 2

+1 A:

<script language="JavaScript" type="text/javascript">
function unhide(event) {  
    event = event || window.event ;
    target = event.target || event.srcElement;  
    if(target.value === "D:")
    {
        if(target.checked)
        {

        }
  }
}  
</script>
</head>
<body>
<form method="get" action="/cgi-bin/form.cgi" enctype="application/x-www-form-urlencoded">
<input type="radio" name="opttype" value="A:" onclick="unhide()" />A:
<input type="radio" name="opttype" value="B:" onclick="unhide()" />B:
<input type="radio" name="opttype" value="C:" checked="checked" onclick="unhide()" />C:
<input type="radio" name="opttype" value="D:" onclick="unhide(event)" />D:
<br><input type="tbox" name="event" /><br><textarea name="tarea" rows="8" cols="80" style="width:580;height:130;display:;"></textarea>
<input type="submit" name="submit" value="Submit" />
</form>

NM 2010-07-04 06:52:13

Answer 3

A:

Don't loop over it at all, just pass the element directly to the function

function toggleInput(ele)
{
    if(ele.value === 'D:') {
        document.getElementsByName('tbox')[0].style.display = 'none';
        document.getElementsByName('tarea')[0].style.display = 'block';
    } else {
        document.getElementsByName('tbox')[0].style.display = 'block';
        document.getElementsByName('tarea')[0].style.display = 'none';
    }

}

//In the element tags, use the following
onclick="toggletInput(this)"

Also, targeting the input elements with getElementsByName can be messy... if possible, add some ids to those elements and target them directly with getElementById instead. The above code assumes that there is only one of each tbox and tarea or at least that they appear first in the DOM, as it targets the first element in the array returned by getElementsByName.

tsgrasser 2010-07-04 07:16:05

Answer 4

A:

Two big things here. First off, you shouldn't attach your JavaScript event handlers as HTML attributes. Instead, use the "traditional" method (as shown below), or the more "advanced" method.

Second, there's no need rely on the event object, which will free you from some cross-browser concerns.

<form method="get" action="/cgi-bin/form.cgi" enctype="application/x-www-form-urlencoded" id="frm-whatever">
    <input type="radio" name="opttype" value="A:"/>A:
    <input type="radio" name="opttype" value="B:"/>B:
    <input type="radio" name="opttype" value="C:"/>C:
    <input type="radio" name="opttype" value="D:"/>D:
    <br>
    <input type="tbox" name="event" id="inp-tbox"/><br>
    <textarea name="tarea" style="width:580;height:130;display:none;" id="inp-tarea"></textarea>
<form>

<script>
    var toggleFields = (function() {
        var inpTxtBox  = document.getElementById("inp-tbox"),
            inpTxtArea = document.getElementById("inp-tarea");

        return function(node) {
            if ( node.value == "D:" ) {
                inpTxtArea.style.display = 'block';
                inpTxtBox.style.display  = 'none';
            } else {
                inpTxtArea.style.display = 'none';
                inpTxtBox.style.display  = 'block';
            }
        };
    })();

    var radios = document.getElementById("frm-whatever").opttype;

    for ( var i=0, l=radios.length; i<l; ++i ) {
        radios[i].onchange = (function(i) { // closure to lock the value of `i` in this context
            return function() { // return a function as the event handler
                toggleFields(radios[i]);
            }
        })(i);
    } 
</script>

Working demo here. Also, make sure the JavaScript code is included after the form or use the onload event.

Justin Johnson 2010-07-04 08:20:04

You sir, are the man.

2010-07-04 10:52:14

ansaurus

tags:

views:

answers:

Toggle element visibility via radio select

related questions