jQuery form field checklist

Question

Hey there,

I have a form and wish to display a checklist which will just be a list of items to show the user which sections have been completed. I want to be able to apply a css class to each list item that will show a tick or cross depending on whether those form fields have been completed like so;

<ul class="summary">
    <li class="complete">Resort</li>
    <li class="complete">General Information</li>
    <li class="complete">Accommodation</li>
    <li class="incomplete">Resort Features/Services</li>
    <li class="incomplete">Resort Extras &amp; Amenities</li>
</ul>

In some cases there may be multiple form fields for each section in order to determine whether to display a tick or cross.

I wondered if anyone had done anything like this before or knows of any examples?

Thank you.

Answer 1

You'd use jQuery to validate/determine the completeness of each section.

Then, you'd swap the class of the appropriate list item. I'd give each one a class to ID it:

<ul class="summary">
<li class="summary-resort">Resort</li>
<li class="summary-general">General Information</li>
<li class="summary-accomodation">Accommodation</li>
<li class="summary-features">Resort Features/Services</li>
<li class="summary-extras">Resort Extras &amp; Amenities</li>
</ul>

Then a simple line of jQuery:

...if summary-resort section is complete...
$(".summary-resort").addClass("complete")

Answer 2

I think change the class of an element its easy with Jquery. try this (with an id for each element):

$("#li_1").removeClass("complete");
$("#li_1").addClass("incomplete");

But, how you know if an section it's complete? With events in a form? from infomation in a database?