[jQuery] Dealing with large forms
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');
});