1,105,333 Community Members

How to hide textarea when a radio button selected?

Member Avatar
Bremen Emeth
Newbie Poster
5 posts since May 2008
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

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

Member Avatar
urtrivedi
Posting Virtuoso
1,900 posts since Dec 2008
Reputation Points: 249 [?]
Q&As Helped to Solve: 409 [?]
Skill Endorsements: 27 [?]
 
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>
Member Avatar
iamthwee
Posting Sage
7,066 posts since Aug 2005
Reputation Points: 1,307 [?]
Q&As Helped to Solve: 595 [?]
Skill Endorsements: 74 [?]
Featured
 
-3
 

Easier to start getting used to Jquery.

Member Avatar
Taywin
Posting Maven
2,632 posts since Apr 2010
Reputation Points: 134 [?]
Q&As Helped to Solve: 378 [?]
Skill Endorsements: 17 [?]
 
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.

Member Avatar
Troy III
Practically a Posting Shark
891 posts since Jun 2008
Reputation Points: 174 [?]
Q&As Helped to Solve: 119 [?]
Skill Endorsements: 10 [?]
 
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).

Member Avatar
theHop
Junior Poster in Training
57 posts since Dec 2009
Reputation Points: 18 [?]
Q&As Helped to Solve: 6 [?]
Skill Endorsements: 0 [?]
 
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.

Member Avatar
Bremen Emeth
Newbie Poster
5 posts since May 2008
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
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.

Question Answered as of 1 Year Ago by urtrivedi, theHop, Taywin and 2 others
You
This question has already been solved: Start a new discussion instead
Post:
Start New Discussion
Tags Related to this Article