Collapse hidden <TR> tag

[itchyII]

Hi Everyone, (I also posted this one in the Javascript forum, but I thought the HTML gurus out there might be over here....)

Normally, I think that I could figure this one out, but I’m on a really tight deadline and I’ve already spent too much time on it! I have a web page with a form (a survey) which on submit of the form, emails the responses. I have been asked to make the form a little more dynamic and I am having some trouble. I have a series of 7 questions, each with their own select input box (all of this is in a table in the form). Upon making a selection in the box, I have to check the value of the selection and if it meets certain criteria, I have to display a textarea box that the user must fill in to explain their selection. I have toyed with a couple pf ideas but none are working quite as I would like. I started by trying to simply add the textarea box into the form but setting the <TR> tag to hidden, then onchange I fire a function that makes the <TR> tag visible. This works beautifully, but it doesn’t look so nice because there are big gaps on my page where the <TR>’s are hidden. I couldn’t figure out how to collapse the tag so the gap would disappear on the page when the tag was not visible. Here is my code:

function addComment(commentRowID,selection)
{
if(selection == 2 || selection ==3) {
document.getElementById(commentRowID).style.visibility = "visible";
}
}


<TR>
<TD colSpan=2>
<P align="left" class=mainText>
<FONT color=#336699>
<B>
1. Our staff is courteous and professional...
</B>
</FONT>
</P>

<P align="center">
<SELECT tabindex = "1" style="WIDTH: 175px" name="selSurveyOne" onchange=addComment("commentOne",this.options[this.selectedIndex].value)>
<OPTION value = "" selected>Please select</OPTION>
<OPTION value = 5>Always</OPTION>
<OPTION value = 4>Frequently</OPTION>
<OPTION value = 3>Sometimes</OPTION>
<OPTION value = 2>Never</OPTION>
<OPTION value = 1>No Comment</OPTION>
</SELECT>
</P>
</TD>

</TR>

<TR id="commentOne" style="visibility: hidden">
<TD COLSPAN=2>
<P align="left" class=mainText>
<FONT color=#336699>
<B>
Please explain:
</B>
</P>

<P align="center">
<TEXTAREA tabindex = "2" size=256 name="txtCommentsOne" rows=4 cols=50></TEXTAREA>
</P>
</TD>
</TR>

If anyone knows how I could collapse the <TR> tag when not in use, please let me know.

So then I thought I’d try not putting any of the HTML in the <TR> tag at all and just checking the value onchange and adding the HTML back in if needed. I really didn’t get for with this one as I would somehow have to refresh the page in order for the new code to appear. Any suggestions or ideas on this!

Help!!
ItchyII

 

[itchyII]

Never mind!!! I figured it out! Just when I was about to give up....

function addComment(commentRowID,selection)
{
if(selection == 2 || selection ==3)
{
document.getElementByIdcommentRowID).style.visibility = "visible";
document.getElementById(commentRowID).style.display = "block"
}
else
{
document.getElementByIdcommentRowID).style.visibility = "hidden";
document.getElementById(commentRowID).style.display = "none"
}
}


<TR>
<TD colSpan=2>
<P align="left" class=mainText>
<FONT color=#336699>
<B>
1. Our staff is courteous and professional...
</B>
</FONT>
</P>

<P align="center">
<SELECT tabindex = "1" style="WIDTH: 175px" name="selSurveyOne" onchange=addComment("commentOne",this.options[this.selectedIndex].value)>
<OPTION value = "" selected>Please select</OPTION>
<OPTION value = 5>Always</OPTION>
<OPTION value = 4>Frequently</OPTION>
<OPTION value = 3>Sometimes</OPTION>
<OPTION value = 2>Never</OPTION>
<OPTION value = 1>No Comment</OPTION>
</SELECT>
</P>
</TD>

</TR>

<TR id="commentOne" style="visibility: hidden">
<TD COLSPAN=2>
<P align="left" class=mainText>
<FONT color=#336699>
<B>
Please explain:
</B>
</P>

<P align="center">
<TEXTAREA tabindex = "2" size=256 name="txtCommentsOne" rows=4 cols=50></TEXTAREA>
</P>
</TD>
</TR>


but thanks anyways!!!