Form Sections Filled out

[fmrock]

Hey everyone,

I am using the accordion content script in a form.

http://www.dynamicdrive.com/dynamicindex17/ddaccordion.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 (http://jquery.com/) and its form (http://malsup.com/jquery/form/) and validation (http://bassistance.de/jquery-plugins/jquery-plugin-validation/) plugins.