Tab Control switching via buttons

Submitted by HandyUser on Thu, 05/10/2012 - 19:50

On a form with several tabs we want to use two buttons "Previous" and "Next" to guide navigation appropriately. How can we change the visibility rules to use buttons? Complicating the problem is that each active tab will need different "Previous" and "Next" values. Any suggestions? Thank you.

RE: Tab Control switching via buttons

Hi HandyUser,

Hopefully the following will help you achieve what you need.

Firstly add a new script file to your page, and then insert the following content into it:


/**
 * Changes the selected tab of the provided control to either the next 
 * or previous tab from the one currently selected, or a specific tab.
 * @param tabId The id of the tab control field
 * @param direction The direction of the tab to select - either 'next' or 'previous'
 *                  Alternatively, this can contain the data value of a specific tab to display
 * @return boolean indicating whether or not the tab was successfully changed
 */
function tabNavigation(tabId, direction)
{
    var tabHidden = document.getElementById(tabId);
    if (tabHidden != null)
    {
        var currentValue = tabHidden.value;
        
        var currentTab = document.getElementById(tabId + '_tab_' + currentValue);
        
        if (currentTab != null)
        {
            var newTab = currentTab;
            do 
            {
                if (direction == 'next')
                    newTab = hyf.util.getNextElementSibling(newTab);
                else if (direction == 'previous')
                    newTab = hyf.util.getPreviousElementSibling(newTab);
                else //special case of specific tab value provided
                {
                    newTab = document.getElementById(tabId + '_tab_' + direction);
                    break;
                }
            }
            while ((newTab != null) && !((newTab.tagName.toLowerCase() == 'a') && (newTab.id.indexOf(tabId + '_tab_') == 0)))
            
            if (newTab != null)
            {
                newTab.onclick();
                return true;
            }
        }  
    }
    return false;
}

Then add custom script events to your buttons of the form tabNavigation(<tab control id>, <tab to select>);
Where tab control id is the name of the tab control field within FormMaker (normally 'tab_control'), and tab to select is either 'next', 'previous', or the data value of a specific tab.

Examples:
tabNavigation('tab_control', 'next');
tabNavigation('tab_control', 'previous');
tabNavigation('tab_control', 'mytabvalue');

Using the next or previous option will try and select the appropriate tab based on which one is currently selected, where as using a specific tab value will only ever select that tab regardless of the current selection.

I hope this helps.

Please let me know if you have any questions.

Regards,
Gerard