Question

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