On June 30th, I posted code to split up a a node form into virtual pages of fieldsets. To improve usability even further, I added the functionality to generate tabs for each fieldset and I added a next and previous button (instead of modifying the submit button). Here's the updated code:
<?php
$(document).ready(function(){
currentPage = 1;
// get a list of fieldsets
fieldsets = mpf_getFieldsets();
// check if there are any form elements with errors
formErrorExists = mpf_checkFormError();
if (fieldsets.length>1 && !formErrorExists) {
// output tabs - start
mpf_outputTabs();
// hide inactive fieldsets
for (i=0; i<fieldsets.length; i++) {
if (currentPage != i+1) {
$(fieldsets[i]).hide();
}
}
// hide preview button
$('#node-form #edit-preview').hide();
// add previous/next buttons
mpf_addButtons();
// add event for tabs click
mpf_tabClick();
// toggle Li active/inactive class
mpf_toggleLiClasses();
}
});
function mpf_tabClick() {
// add event for tabs click
$('ul.fieldsetTabs a').click(function(){
// loop through fieldsets and show/hide
for(i=0; i<fieldsets.length; i++) {
// get classes of fieldset
classes = $(fieldsets[i]).attr('class');
// get first legend html in fieldset
legendHtml = $('fieldset.'+classes+' legend:first').html();
// hide/show fieldsets as necessary
if (legendHtml == $(this).html()) {
$(fieldsets[i]).show();
currentPage = i+1;
} else {
$(fieldsets[i]).hide();
}
// toggle button visibility
mpf_toggleButtons();
}
// toggle Li active/inactive class
mpf_toggleLiClasses();
// return false to prevent execution of a tag href
return false;
});
}
function mpf_getFieldsets() {
var fieldsets = new Array();
$('#node-form div.standard fieldset').each(function(i){
// get a string of classes from fieldset
classes = $(this).attr('class');
// split string of classes on space
classesSplit = classes.split(" ");
// loop through classes
for (i=0; i<classesSplit.length; i++) {
// if class starts with "group-", add it
if (classesSplit[i].substring(0, 6)=='group-') {
fieldsets[fieldsets.length] = $(this).get();
}
}
});
return fieldsets;
}
function mpf_checkFormError() {
var formErrorExists = false;
$('#node-form input').each(function(i){
classes = $(this).attr('class');
classesSplit = classes.split(" ");
for (i=0; i<classesSplit.length; i++) {
if (classesSplit[i] == 'error') {
formErrorExists = true;
}
}
});
return formErrorExists;
}
function mpf_outputTabs() {
liHtml = "";
$(fieldsets).each(function(index, object){
// NOTE: this is not working: $('legend:first', object).html()
classes = $(object).attr('class');
legendHtml = $('fieldset.'+classes+' legend:first').html();
liHtml += "<li><a href='#'>" + legendHtml + "</a></li>";
});
tabsHtml = "<div class='tabs'><ul class='tabs primary fieldsetTabs'>" + liHtml + "</ul></div>";
$('form#node-form').before(tabsHtml);
}
function mpf_addButtons() {
// create html for previous/next buttons
buttonPrevious = "<input id='edit-previous' class='form-submit' type='button' value='Previous' /> ";
buttonNext = "<input id='edit-next' class='form-submit' type='button' value='Next' /> ";
// add button html to page
$('form#node-form div.node-form input#edit-submit').before(buttonPrevious).before(buttonNext);
// hide previous button on first page
$('#node-form #edit-previous').hide();
// add click event to next button
$('#node-form #edit-next').click(function(){
// ensure this is not the last page
if (currentPage >= fieldsets.length) return;
// increment current page
currentPage++;
// hide/show fieldsets
for (i=0; i<fieldsets.length; i++) {
if (currentPage != i+1) {
$(fieldsets[i]).hide();
} else {
$(fieldsets[i]).show();
}
}
// toggle button visibility
mpf_toggleButtons();
// toggle Li active/inactive class
mpf_toggleLiClasses();
});
// add click event to previous button
$('#node-form #edit-previous').click(function(){
// ensure this is not the first page
if (currentPage == 1) return;
// decrease current page
currentPage--;
// hide/show fieldsets
for (i=0; i<fieldsets.length; i++) {
if (currentPage != i+1) {
$(fieldsets[i]).hide();
} else {
$(fieldsets[i]).show();
}
}
// toggle button visibility
mpf_toggleButtons();
// toggle Li active/inactive class
mpf_toggleLiClasses();
});
}
function mpf_toggleButtons() {
// show buttons
if (currentPage > 1) $('#node-form #edit-previous').show();
if (currentPage < fieldsets.length) $('#node-form #edit-next').show();
// hide buttons
if (currentPage == 1) $('#node-form #edit-previous').hide();
if (currentPage == fieldsets.length) $('#node-form #edit-next').hide();
}
function mpf_toggleLiClasses() {
$('ul.fieldsetTabs li').each(function(i){
if (i+1 == currentPage) {
$(this).addClass('active');
} else {
$(this).removeClass('active');
}
});
}
?>