Google Search

Saturday, August 1, 2009

html DOM hide show form elements

Hi I am doing this for my reference and also it may help others, was searching for how to hide elements, take a scenario where we need to display a text box on selection of check box. the form element may be declared hidden by using the attribute: style="visibility:hidden" for ex. <input type="text" style="visibility:hidden">, we can call a function. following code may be used:

<html>
<head>
<script Language="javascript">
function check()
{
if(document.rfsform.appdev.checked==true)
{
document.rfsform.woatt.style.visibility='visible';
}
else
{
document.rfsform.woatt.style.visibility='hidden';
}
}
</script>
</head>
<body>
<form name="rfsform">
<input type="checkbox" name="appdev" onclick="javascript: check();">
show/hide:
<INPUT TYPE="text" NAME="woatt" style="visibility:hidden">
</form>
</body>
</html>