I would like to get some opinions or ideas regarding showing small
portions of a lengthy form and advancing through the form by hide()
and show().

Below is what I have done, is there an easier or more standard way to
do this?

Currently I have divided the sections up by fieldsets and using jquery
like so:

var $totalSets = $('form').find('fieldset').length;
        $('fieldset').each(function(index) {
                if(index ==0) {
                $('<div class="control"><span class="next"><img alt="'+index+'"
src="..\/img\/bgs\/nav_right_green.jpg"\/> Click to Continue<\/span><\/
div>')
                .insertBefore('span.set'+index);
                }
                if(index !=0) {
                $('<div class="control"><span class="back"><img alt="'+index+'"
src="..\/img\/bgs\/nav_left_green.jpg"\/> Click to Go Back<\/span>
<span class="next"><img alt="'+index+'" src="..\/img\/bgs\/
nav_right_green.jpg"\/> Click to Continue<\/span><\/div>')
                .insertBefore('span.set'+index);
                }
                if(index == $totalSets-1) {
                $('<div class="control"><span class="back"><img alt="'+index+'"
src="..\/img\/bgs\/nav_left_green.jpg"\/> Click to Go Back<\/span>
<span class="save"><img src="..\/img\/bgs\/disk_green.jpg" alt="Click
to Save" \/> Click to Save and Return Later<\/span><\/div>')
                .insertBefore('input#submit');
                }
                });
        $('fieldset').hide();
        $('span#TTother').hide();
        var set1 = $('fieldset').get([0]);
        $(set1).show();
        $('span.next').click(function() {
                var fIndex = $(this).children('img').attr('alt');
                var curSet = $('fieldset')[fIndex];
                var nextSet = $('fieldset')[++fIndex];
                $(curSet).hide('slow');
                $(nextSet).show('slow');
                });
        $('span.back').click(function() {
                var fIndex = $(this).children('img').attr('alt');
                var curSet = $('fieldset')[fIndex];
                var prevSet = $('fieldset')[--fIndex];
                $(curSet).hide('slow');
                $(prevSet).show('slow');
                });
        $('input.possTitleOther').click(function() {
                var titleOther = $('span#TTother');
                $(titleOther).show('slow');
                });
        $('input.possTypeNormal').click(function() {
                var titleOther = $('span#TTother');
                        $(titleOther).hide('slow');
                });

Reply via email to