...

View Full Version : show hide texybox when checkbox is checked and unchecked



RamaRao
05-20-2009, 09:03 PM
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>

adios
05-20-2009, 09:56 PM
Hi RamaRao. :)
Was this what you needed?


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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum