conditional fields with jquery and form fields

[aetag...@gmail.com]

I have a form that is rather long, therefore I want to split it into sections.
I am doing this with jQuery conditional fields in forms.

The first 5 fields appear, once the user enters input for the fields and then they click on a checkbox, the filled fields are then hidden and the next 5 questions are unhidden, and this is repeated every 5 questions.

I was wondering if there is a way to show the fields again that were hidden after clicking the checkbox, in case the user unchecks the box in an attempt to view the previous 5 questions again. Because what happens now when the box is unchecked is that it hides the fields that it revealed but doesn't show the previous 5 fields unless you uncheck and recheck the box.


Also, I am basically repeating the following code from the book:

{{extend 'layout.html'}}
{{=form}}
<script>
jQuery(document).ready(function(){
   if(jQuery('#taxpayer_married').prop('checked'))
        jQuery('#taxpayer_spouse_name__row').show();
   else jQuery('#taxpayer_spouse_name__row').hide();
   jQuery('#taxpayer_married').change(function(){
        if(jQuery('#taxpayer_married').prop('checked'))
            jQuery('#taxpayer_spouse_name__row').show();
        else jQuery('#taxpayer_spouse_name__row').hide();});
});
</script>

I have 3 seperate sections of the form, each section has it's own script, showing and hiding 5 form fields within each. I don't understand jQuery all that well, is there a way to make it less repetitive? I'm over 160 lines of code for just showing and hiding fields, I'm hoping there is a better way.

[Anthony]

A better way would probably be to use an existing form wizard library designed for this purpose. For example: http://www.jquery-steps.com/Examples#advanced-form.

Anthony

[Donald McClymont]

I guess if you are always wanting to show or hide the next 5 rows of the form then it would be possible to build a less repetitive function that does this and probably possible to make it accept a parameter rather than 5 which might mean it is a bit more flexible.  In general the change event in the example from the book should work fine to show and hide the relevant rows on selection/deselection.  However possibly a library that does this is better however i've never tried them.

Regards

Donald

[aetag...@gmail.com]

I looked into the form wizard, and this worked great for what I was trying to do. Thank you!

[aetag...@gmail.com]

How do I use that jquery form wizard plugin? I extracted it into my modules folder but it does not work, I also tried extracting it in my static/js

[Anthony]

It's JavaScript, so put it with your JS files and be sure to load it on the page. You'll need to refer to the relevant documentation regarding how to use it.

Anthony