A newbie question... Hide/display form elements

[stargate]

Greetings all....

Ok, to be fair, my experience in Javascript/DHTML is limited to copying and pasting code ...also, my issue may be discussed before, but I am in need for help, any help ...

Simply, there is an ASP code that generates a series of questions from DB table,,,, some of these questions should be displayed/hidden depending on a selection (yes/no) of a certain radio button ...

I found the code that do this , it is working Ok, but the problem is that the place for hidden questions is still reserved , I mean when you hide a form element, it becomes hidden,but white place is placed instead...

is there any method to hide a complete table row and making it as if it is not present?

I tried to place the <Span ... > before the <TR> but didn't work

If not clear , please tell me .. THANKS IN ADVANCE

Used code:

<script type=text/javascript>
// Author: JS-Examples - http://www.js-examples.com
// Courtesy of SimplytheBest.net (http://simplythebest.net/info/dhtml_scripts.html)
// _w : which ID (1) or (2)
// _h : (h)ide or (s)how
function toggleT(_w,_h) {
if (document.all) { // is IE
if (_h=='s') eval("document.all."+_w+".style.visibility='visible';");
if (_h=='h') eval("document.all."+_w+".style.visibility='hidden';");
} else { // is NS?
if (_h=='s') eval("document.layers['"+_w+"'].visibility='show';");
if (_h=='h') eval("document.layers['"+_w+"'].visibility='hide';");
}
}
</script>

<form>
Visible <input name="r1" type="radio" checked value="" onClick="toggleT('divt1','s')">
Hidden <input name="r1" type="radio" value="" onClick="toggleT('divt1','h')">
</form>


<span id="divt1" style="visibility:visible;position:relative;top:0;left:0">
<form>
....
</form>
</span>

[Khalid Ali]

The link below should give you an idea

http://68.145.35.86/skills/javascripts/ShowHideFormElement.html

[stargate]

Thanks Khalid....

I already managed to display/hide forum items.... I need to avoid the white space that is put instead of the hidden form element .....

To be more precise...

Could a Complete <TR> be hidden ? I mean how to make something like this work ?:

<span id="divt1" style="visibility:hidden;position:relative;top:0;left:0">

<TR> ..... </TR>

</Span>

My issue is that I need if I have 3 textboxes (say), each of them in a unique row, the 2nd one is hidden, to be displayed as if they are 2 textboxes only WITHOUT an empty row in the middle ...

Thanks again

[Palros]

the problem is that your using the visibility property. instead, use the display property.

display:none hides the item
display:block used to display the item as a block element (p,table,div,layer,pre,button)
display:inline used to display as inline element (a,u,i,s,font,span)

so then somrthing like this...

<script type=text/javascript>
// Author: JS-Examples - http://www.js-examples.com
// Courtesy of SimplytheBest.net (http://simplythebest.net/info/dhtml_scripts.html)
// _w : which ID (1) or (2)
// _h : (h)ide or (s)how
function toggleT(_w,_h) {
if (document.all) { // is IE
if (_h=='s') eval("document.all."+_w+".style.display='block';");
if (_h=='h') eval("document.all."+_w+".style.display='none';");
} else { // is NS?
if (_h=='s') eval("document.layers['"+_w+"'].display='block';");
if (_h=='h') eval("document.layers['"+_w+"'].display='none';");
}
}
</script>

<form>
Visible <input name="r1" type="radio" checked value="" onClick="toggleT('divt1','s')">
Hidden <input name="r1" type="radio" value="" onClick="toggleT('divt1','h')">
</form>