Member Avatar for Bremen Emeth

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

Edited by Bremen Emeth
  • 6 Contributors
  • 6 Replies
  • 3K Views
  • 5 Days Discussion Span
  • Latest Post Latest Post by Bremen Emeth
Member Avatar for urtrivedi

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 for iamthwee

Easier to start getting used to Jquery.

Member Avatar for Taywin

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 for Troy III

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).

Edited by Troy III
Member Avatar for theHop 
<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 for Bremen Emeth

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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.