Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    May 2009
    Location
    Chennai
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    show hide texybox when checkbox is checked and unchecked

    hi everybody,
    this is RamaRao

    can you give the solution for "show hide textbox when checkbox is checked and unchecked" without using 'window.onload' function

    below is the code with window.onload function. if i use this, got some problem.
    plz help me without using window.onload function
    i got this code through coding forums. after that i did some changes according to my requirement. i really thanks to coding forums.



    <html>
    <head>
    <style type="text/css">
    tr {
    height: 0.75em;
    }
    .hide {
    display: none;
    }
    </style>
    <script type="text/javascript">
    window.onload = function()
    {
    prepTexts();
    }
    function prepTexts()
    {
    var txts = [];
    txts[0] = document.getElementsByName('description')[1];
    txts[1] = document.getElementsByName('initiator')[1];
    txts[2] = document.getElementsByName('date')[1];
    txts[3] = document.getElementsByName('recommendation')[1];
    for (var i = 1, tEl; tEl = txts[i]; i++)
    {
    tEl.className = 'hide' ;
    }
    }
    function toggleText(objName)
    {
    var obj = document.getElementsByName(objName)[1];
    obj.className = (obj.className == 'hide') ? '' : 'hide' ;
    }
    </script>
    </head>
    <body>
    <form action="CarAddAction.cfm" method="post">
    <table border="0">
    <tr>
    <td><input type="checkbox" name="description" value="" cecked="checked" onclick="toggleText(this.name);" />Description</td>
    <td><input type="text" name="description" id="recDescriptionId" value="" size="22" /></td>
    </tr>

    <tr>
    <td><input type="checkbox" name="initiator" value="" onclick="toggleText(this.name);" />Initiator</td>
    <td><input type="text" name="initiator" id="recInitiatorId" value="" size="22" /></td>
    </tr>

    <tr>
    <td valign="top"><input type="checkbox" name="date" value="" onclick="toggleText(this.name);" />Date</td>
    <td name="date" ><table><tr><td>From :</td></tr>
    <tr><td><input type="text" name="date" id="recFromDateId" value="" size="22" /></td></tr>
    <tr><td>To :</td></tr>
    <tr><td><input type="text" name="date" id="recToDateId" value="" size="22" /></td></tr></table></td>
    </tr>

    <tr>
    <td><input type="checkbox" name="recommendation" value=""
    onclick="toggleText(this.name);"/>RecommendationId</td>
    <td><input type="text" name="recommendation" id="recId" value="" size="22" /></td>
    </tr>
    <tr><td></td></tr>
    <tr>
    <td>&nbsp;</td>
    <td><input type="submit" value="Submit"></td>
    </tr>
    </table>
    </form>

    </body>
    </html>
    Last edited by RamaRao; 05-20-2009 at 09:26 PM. Reason: in title one word is mistyped "texybox" instead of "textbox"

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    Hi RamaRao.
    Was this what you needed?

    Code:
    <html>
    <head>
    <style type="text/css">
    tr {
    height: 0.75em;
    }
    .hide {
    display: none;
    }
    </style>
    <script type="text/javascript">
    window.onload = function()
    {
    prepTexts();
    }
    function prepTexts()
    {
    var coll, txts = [];
    txts[0] = document.getElementsByName('description');
    txts[1] = document.getElementsByName('initiator');
    txts[2] = document.getElementsByName('date');
    txts[3] = document.getElementsByName('recommendation');
    for (var i = 0; i <txts.length; i++)
    {
    coll = txts[i];
    for (var j = 1; j <coll.length; j++)
    {
    coll[j].className = coll[0].checked ? '' : 'hide' ;
    }
    }
    }
    function toggleText(objName)
    {
    var obj = document.getElementsByName(objName);
    for (var i = 1; i <obj.length; i++)
    obj[i].className = (obj[i].className == 'hide') ? '' : 'hide' ;
    }
    </script>
    </head>
    <body>
    <form action="CarAddAction.cfm" method="post">
    <table border="0">
    <tr>
    <td><input type="checkbox" name="description" value="" cecked="checked" onclick="toggleText(this.name);" />Description</td>
    <td><input type="text" name="description" id="recDescriptionId" value="" size="22" /></td>
    </tr>
    
    <tr>
    <td><input type="checkbox" name="initiator" value="" onclick="toggleText(this.name);" />Initiator</td>
    <td><input type="text" name="initiator" id="recInitiatorId" value="" size="22" /></td>
    </tr>
    
    <tr>
    <td valign="top"><input type="checkbox" name="date" value="" onclick="toggleText(this.name);" />Date</td>
    <td name="date" ><table><tr><td>From :</td></tr>
    <tr><td><input type="text" name="date" id="recFromDateId" value="" size="22" /></td></tr>
    <tr><td>To :</td></tr>
    <tr><td><input type="text" name="date" id="recToDateId" value="" size="22" /></td></tr></table></td>
    </tr>
    
    <tr>
    <td><input type="checkbox" name="recommendation" value=""
    onclick="toggleText(this.name);"/>RecommendationId</td>
    <td><input type="text" name="recommendation" id="recId" value="" size="22" /></td>
    </tr>
    <tr><td></td></tr>
    <tr>
    <td>&nbsp;</td>
    <td><input type="submit" value="Submit"></td>
    </tr>
    </table>
    </form>
    
    </body>
    </html>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •