Form Sections Filled out

[fmrock]

Hey everyone,

I am using the accordion content script in a form.

http://www.dynamicdrive.com/dynamici...daccordion.htm

I have this working great with a form that the end user needs to fill out. I have been asked to somehow visually let the end user know that when they fill out the section below that that section is complete.

[code]
<h3 class="AccordionHeader">Past Medical History</h3>
<div class="AccordionPane">
<textarea name="Past Medical History" id="Past Medical History" cols="55" rows="8"></textarea>
</div>

<h3 class="AccordionHeader">Family History</h3>
<div class="AccordionPane">
<textarea name="Family History" id="Family History" cols="55" rows="8"></textarea>
</div>
[code]

[Snookerman]

to somehow visually let the end user know that when they fill out the section below that that section is complete

What are you thinking of? Text, a picture, a color?

[fmrock]

I was thinking maybe turning on an image or just puttting some text in the AccordionHeader.

But I am open to ideas, nothing is set in stone They just want something to show that they have been in that section.

So if they fill out the textarea in a section, it should turn on the graphic or text.

Also, one of the sections has checkboxes instead of a text area.

[Snookerman]

Could you please post the entire code or a link to your site?

[fmrock]

Here is the code for the form.

<h3 class="AccordionHeader">History</h3>
<div class="AccordionPane">
<textarea name="History" id="History" cols="55" rows="8"><%=varHistory%></textarea>
</div>

<h3 class="AccordionHeader">Review of Systems</h3>
<div class="AccordionPane">
<table width="300" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="5" align="left" valign="top">&nbsp;</td>
    <td width="147" align="left" valign="top">
		<input name="ROS_Constitutional" type="checkbox" value="1"  >Constitutional<br>
		<input name="ROS_Eyes" type="checkbox" value="1"  >Eyes<br>
		<input name="ROS_ENT" type="checkbox" value="1"  >ENT<br>
		<input name="ROS_CV" type="checkbox" value="1"  >CV<br>
		<input name="ROS_Respiratory" type="checkbox" value="1"  >Respiratory<br>    
		<input name="ROS_GI" type="checkbox" value="1"  >GI<br>
    </td>    
    <td width="146" align="left" valign="top">
		<input name="ROS_GU" type="checkbox" value="1"   >GU<br>
		<input name="ROS_MS" type="checkbox" value="1"  >MS<br>
		<input name="ROS_Skin" type="checkbox" value="1"  >Skin<br>
		<input name="ROS_Neuro" type="checkbox" value="1"  >Neuro<br>
		<input name="ROS_Psych" type="checkbox" value="1"  >Psych<br>    
    </td>
  </tr>
<tr>
    <td width="5" align="left" valign="top">&nbsp;</td>
    <td width="147" align="center" valign="top"><a href="#" onclick="CheckAll()" >Check All</a></td>
    <td width="146" align="center" valign="top"><a href="#" onclick="UncheckAll()" >Uncheck All</a></td>    
</tr>  
</table>
</div>

<h3 class="AccordionHeader">Past Medical History</h3>
<div class="AccordionPane">
<textarea name="Past_Medical_History" id="Past_Medical_History" cols="55" rows="8"><%=varPast_Medical_History%></textarea>
</div>

<h3 class="AccordionHeader">Family History</h3>
<div class="AccordionPane">
<textarea name="Family_History" id="Family_History" cols="55" rows="8"><%=varFamily_History%></textarea>
</div>

<h3 class="AccordionHeader">Social History</h3>
<div class="AccordionPane">
<textarea name="Social_History" id="Social_History" cols="55" rows="8"><%=varSocial_History%></textarea>
</div>

<h3 class="AccordionHeader">Physical Examination</h3>
<div class="AccordionPane">
<textarea name="Physical_Examination" id="Physical_Examination" cols="55" rows="8"><%=varPhysical_Examination%></textarea>
</div>

[Medyman]

Whenever, I'm looking to do live validation of complicated forms, I turn to jQuery and its form and validation plugins.