Adding the following jQuery can simulate a multipage form layout. It works by hiding and showing fieldsets when the page loads and when the user submits the form. This works great for large CCK node types that have many fields and field groups.
<?php
$(document).ready(function(){
var fieldsets = new Array();
currentPage = 1;
// get a list of fieldsets
$('#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();
}
}
});
// check if there are any form elements with errors
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;
}
}
});
if (fieldsets.length>1 && !formErrorExists) {
// hide preview button
$('#node-form #edit-preview').hide();
// change button?
if (currentPage < fieldsets.length) {
$('form#node-form div.node-form input#edit-submit').val('Next');
}
// hide fieldsets
for (i=0; i<fieldsets.length; i++) {
if (currentPage != i+1) {
$(fieldsets[i]).hide();
}
}
// add jquery to submit button
$('form#node-form').submit(function(){
// submit page?
if (currentPage >= fieldsets.length) return true;
// 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();
}
}
// change submit button text
if (currentPage == fieldsets.length) {
$('form#node-form div.node-form input#edit-submit').val('Submit');
}
return false;
});
}
});
?>
Thank you!
This is a great and very valuable piece of code to me. I was wondering if you would be able to help make it one step better?
How would I set the focus to the top form element on the new page when the user clicks next? This would add a bit of yummy usability as it would snap to the top of the next page.
Made in to a module with the ability to use a few selected transitions would be amazing. I haven't got much experience using jquery, but I may play around :)
Thanks again!
how to use
Hi,
i would like to use this snipplet but dont know how to use it,
where do i put this php code?
Daniel Beeke, daniel DOT beeke AT gmail.com
script.js
hi Daniel,
The easiest place to put this snippet is in your theme directory, in the script.js file (if it exists). If you "view source" on your page, you'll be able to see all the script tags and where they reside in your Drupal installation. Make sure you add this code to a javascript include file that is already being included by your theme.
-Eric
very good article!
You should take an example to the reader to visualize more easily! Thanks for that, your great blog