CODEWITHSUNDEEP
plonefieldsetdexterity
mjtrac
mjtrac

Reputation: 187

how to add a "next fieldset" button to an add/edit form for a Dexterity Plone type

I have a Dexterity type that has multiple fieldsets, and the built-in Javascript that allows showing one fieldset at a time when adding or editing is wonderful.

But I'd like to invite the user to walk through the fieldsets in sequence, so my ideal situation would not present the "Submit" button until the last fieldset was visible, instead presenting NEXT> or <PREV and NEXT> buttons until that last fieldset.

I gather that this is a behavior? But I'm at a bit of a loss as to how to add it and how to control it. I'm currently using the default EditForm, and I'd much prefer to just make a tiny tweak, but if it means dropping down to building the form myself, that's OK. I just need to know whether that's the only way to get this addition, which seems unlikely.

Upvotes: 0

Views: 327

Answers (1)

Martijn Pieters
Martijn Pieters

Reputation: 1121346

The fieldsets can be rigged up to add 'previous' and 'next' buttons with some extra JavaScript magic. Here's what I use in a current project:

var prevnext = {
    formTabs: null,

    next: function() { prevnext.formTabs.data('tabs').next(); prevnext._scrollToTop(); },
    prev: function() { prevnext.formTabs.data('tabs').prev(); prevnext._scrollToTop(); },

    _scrollToTop: function() {
        $(window).scrollTop(prevnext.formTabs.closest('form').offset().top);  
    },

    showButtons: function(event, index) {
        var tabs = prevnext.formTabs.data('tabs'),
            index = typeof(index) === 'undefined' ? tabs.getIndex() : index,
            current = tabs.getTabs()[index],
            count = tabs.getTabs().length;

        $('#prevnext_previous').toggle(index !== 0);
        $('#prevnext_next').toggle(index !== (count - 1));

        $('.formControls:last :submit[name=form_submit]').toggle(index === )count - 1));
    },

    init: function() {
        var tabs;
        prevnext.formTabs = $('.formTabs');
        tabs = prevnext.formTabs.data('tabs');
        if (tabs.getTabs().length > 0) {
            if ($('fieldset#fieldset-distribution').length === 0)
                 return;
            $('.formControls:last :submit:first')
                .before($('<input id="prevnext_previous" class="context" ' +
                          '       type="button" value="" />')
                      .val('< Previous')
                      .click(prevnext.prev))
                .before(document.createTextNode(' '));
            $('.formControls:last :submit:first')
                .before($('<input id="prevnext_next" class="context" ' +
                          '       type="button" value="" />')
                      .val('Next >')
                      .click(prevnext.next))
                .before(document.createTextNode(' '));
            prevnext.showButtons();
            tabs.onClick(prevnext.showButtons);
        }
    }
};

$(prevnext.init());

Upvotes: 1

Related Questions