How to hide textarea when a radio button selected?

Dear Users,

I've been trying out with the JavaScript code to hide the textarea when a radio selection-value fulfilled the textarea will hide. So far I can't get the script right; maybe these forum can share me some information to correct my code.

JavaScript function to Hide:

    function disable()
        {
            var radios = document.getElementByTagName("fieldset");
            if  (radios)
                {
                    var inputs = radios.getElementsByTagName("input");
                    if (inputs.type == "radio" && inputs.name == "StatusServiceNow" && inputs.value == "1")
                        {
                            document.getElementById("txt1").style.visibility="hidden";
                        }
                    else
                        {
                            document.getElementById("txt1").style.visibility="visible";
                        }
                }
        }

For the variable is actually base on the HTML code below:

<fieldset id="radios">
    <td width="33" bgcolor="#00FF00" ><font face="Arial"><input type="radio" checked name="ItemName" onclick="disable()" value="1"></font></td>
    <td width="33" bgcolor="#FFFF00" ><font face="Arial"><input type="radio" name="ItemName" onclick="enable()" value="2"></font></td>
    <td width="33" bgcolor="#FF0000" ><font face="Arial"><input type="radio" name="ItemName" onclick="enable()" value="3"></font></td>
</fieldset>

The code for the text area as below:

 <td colspan="6">
        <font face="Arial"><textarea id="txt1" rows="8" name="ISSUE" cols="90"><%=ISSUE%>

Thank you.

Warmest Regards,
Bremen

7

Contributors

6

Replies

5 Days

Discussion Span

7 Months Ago

Last Updated

9

Views

Question
Answered

Bremen Emeth

Newbie Poster

5 posts since May 2008

Reputation Points: 10

Solved Threads: 0

Skill Endorsements: 0

7 Months Ago

0

I put all together with few changes

<html>
<head>
<script lang='javascript'>
    function onoff(clickedradio)
    {

            if  (clickedradio.checked && clickedradio.value=='1')
            {

                  document.getElementById("divtext").style.display="none";
            }
            else
            {
                  document.getElementById("divtext").style.display="block";
            }

    }

</script>
</head>
<body>
<fieldset id="radios">
    <td width="33" bgcolor="#00FF00" ><font face="Arial"><input type="radio" checked name="ItemName" onclick="onoff(this)" value="1"></font></td>
    <td width="33" bgcolor="#FFFF00" ><font face="Arial"><input type="radio" name="ItemName" onclick="onoff(this)" value="2"></font></td>
    <td width="33" bgcolor="#FF0000" ><font face="Arial"><input type="radio" name="ItemName" onclick="onoff(this)" value="3"></font></td>
</fieldset>

<div id=divtext style='display:none'>        <font face="Arial"><textarea id="txt1" rows="8" name="ISSUE" cols="90"> </textarea></div>

</body>
</html>

urtrivedi

Posting Virtuoso

1,714 posts since Dec 2008

Reputation Points: 299

Solved Threads: 362

Skill Endorsements: 24

7 Months Ago

-1

Easier to start getting used to Jquery.

iamthwee

Posting Genius

6,254 posts since Aug 2005

Reputation Points: 1,567

Solved Threads: 476

Skill Endorsements: 33

7 Months Ago

0

1)Line 3, the function must be getElementsByTagName(...)
2)It is not a good idea to create your own customize tag in HTML. If you want a field, use div tag instead.
3)You could simply use getElementsByTagName("input") and work only those with type radio and the specific name.
4)The visibility attribute won't work with JavaScript on IE8 (and maybe 7 or below). It is a bug that MS introduced. Not sure whether they have already fix it.
5)The call for input.name won't work. You need to use input.getAttribute("name") instead.

Taywin

Posting Maven

2,633 posts since Apr 2010

Reputation Points: 275

Solved Threads: 375

Skill Endorsements: 17

7 Months Ago

0

Try this:

_.radios.onclick=function(e){
        e=e||event;e=e.target||e.srcElement;
            e.value==="1"?
            _.divtext.style.display="none":
            _.divtext.style.display="block";
    }

!Dependency: The UnderDot Platform
(provided on the link).

Troy III

Master Poster

736 posts since Jun 2008

Reputation Points: 140

Solved Threads: 95

Skill Endorsements: 5

7 Months Ago

0

<script>
    var hidden = true;

    function ToggleTB(){
        var tb = document.getElementById("divText");
        if(hidden){
            tb.style.display = "block";
            hidden = false;
        }else{
            tb.style.display = "none";
            hidden = true;
        }


    }
</script>
<input type="radio" onclick="ToggleTB();" checked />
<div id="divText" style="display:none;"><textarea></textarea></div>

Having the global 'hidden' variable to check against means that the textarea's display can be checked from the start without inline sty;e being set.

theHop

Light Poster

38 posts since Dec 2009

Reputation Points: 28

Solved Threads: 5

Skill Endorsements: 0

7 Months Ago

0

Hi All,

I will test all the reply above one by one, I will keep this thread open.

Thanks for the kind advise and input.

Regards,
Bremen.

Bremen Emeth

Newbie Poster

5 posts since May 2008

Reputation Points: 10

Solved Threads: 0

Skill Endorsements: 0

Question Answered as of 7 Months Ago by iamthwee, Troy III, urtrivedi and 2 others

How to hide textarea when a radio button selected?

This question has already been solved: Start a new discussion instead