View Full Version : Help with Show/Hide Rows where...???

10-13-2006, 03:40 PM
Good Morning All,

Im struggling with a form comprised of 6 rows each for ten sections, with each row containing ONE textarea followed by ONE check box -- and rows 2-6 of each section - hidden (style="display: none;").

The goal here is to present an expandable quick-note form, addressing 10 topic headings, displaying one textarea for each, while allowing for up to 5 additional rows/textareas per section in an expanding list fashion where (style="display: block;") for all additional rows where (textarea !==Note:) && (checkbox.checked)). Therein lies the rub. ||
How to SHOW ALL WHERE....????

I have it working now where, upon altering the initial value of Section_Row_1_textarea_1 , and checking Row_1_checkbox1, Row_2 becomes visible and focused (so-on for rows 2-6) but -- as this is merely an onclick for a single row -- should the user refresh, all sub-rows would again be hidden, with no obvious means of showing those rows where text has been input in the textarea, nor the now hidden checkbox is also checked. It seems that I've managed to work myself into a corner here. Any suggestions on how to re-think this would be greatly appreciated!

<script type="text/javascript">
function showHide(inID) {
if (document.getElementById(inID).style.display == 'none') {
document.getElementById(inID).style.display = 'block';
} //else {
//document.getElementById(inID).style.display = 'none';


<form name="Q_note">

<table border="3" cellpadding="3" cellspacing="3" style="border-collapse: collapse" bgcolor="#FFFFFF" bordercolor="#666666">
<table border="0" cellpadding="0" style="border-collapse: collapse" width="600">
<tr><td colspan="3">
<h3>Quick Notes</h3>
</td><td align="center" width="80">Add</td></tr>
<tr id="grounds1">
<td width="120" valign="top" bgcolor="#E6E6E6">
<td width="17" valign="top" bgcolor="#E6E6E6">
<td width="577" bgcolor="#E6E6E6">
textarea class="noscroll" name="grounds_note_1" ondblclick="select()" cols="100" rows="5" tabindex="1">Note:</textarea></td>
<td align="center" width="80" bgcolor="#E6E6E6">
<input type="checkbox" class="checkbox" value="1" name="C1" onclick="if((document.Q_note.grounds_note_1.value !=='Note:')&&(document.Q_note.C1.checked))
{showHide('grounds2'); document.Q_note.grounds_note_2.select();}">
<tr style="display: none;" id="grounds2">
<td width="120" valign="top" bgcolor="#E6E6E6">&nbsp;</td>
<td width="17" valign="top" bgcolor="#E6E6E6">
<td width="577" bgcolor="#E6E6E6"><textarea class="noscroll" name="grounds_note_2" cols="100" rows="5" tabindex="2">Note:</textarea></td>
<td align="center" width="80" bgcolor="#E6E6E6"><input type="checkbox" class="checkbox" value="1" name="C2" onclick="if((document.Q_note.grounds_note_2.value !=='Note:')&&(document.Q_note.C2.checked))
{showHide('grounds3');} document.Q_note.grounds_note_3.select();" ></td>
<tr style="display: none;" id="grounds3">
<td width="120" valign="top" bgcolor="#E6E6E6">&nbsp;</td>
<td width="17" valign="top" bgcolor="#E6E6E6">