Form Sections Filled out

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]

Quote:

---

Originally Posted by fmrock

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?

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.

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

Here is the code for the form.

Code:

---

<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>

---

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