Question

Custom Buttons for Navigating Pages in Forms

Forms Version 10

Updated September 13, 2022

asked on September 11, 2022

Hello Everyone,

I am working on a rather long form so I am using page breaks (pagination) but I am looking to do something other than the tabs across the top.

I would like to be able to use the custom html field to create information about the section/page of the form and have a custom button that will act just like the tabs and jump the user to that page of the form.

I am a JavaScript dummy and CSS novice. I have tried to inspect the existing tabs and modify from there but have not figured it out. Can anyone help? What coding would I need to put in the custom buttons to jump to a different "page"?

I am developing it in Forms 10.4 but we are also starting our upgrade to Forms 11.

Thanks!

Jennifer

buttonnavigation.jpg (139.25 KB)

| Download

0 0

Answer

SELECTED ANSWER

replied on September 12, 2022

This approach should work fine if you're only hiding the tabs with CSS.

I just did it with the following custom html button(s):

<button type="button" data-page="q10" class="page-button">Page 1</button>

The "page" data attribute is the page number for the target tab just like Genny showed.

Then I hid the navigation section with CSS

.cf-pagination {
  display: none;
}

And handle the navigation by passing a click event to the target.

$(document).ready(function(){
  $('.page-button').on('click',function(){
    // get the target page
    var page = $(this).data('page');
    
    // click the hidden page tab
    $('[page=' + page + ']').click();
  });
});

3 0

Replies

replied on September 12, 2022 • Show version history

I guess my question is why do you want all of these on one form? Wouldn't it be easier if they were separate forms?

1 0

replied on September 12, 2022

I did begin them all as separate forms. And had this set of buttons opening new forms.

In the long run I think it will be easier to maintain one form instead of many forms that may have overlapping information.

0 0

replied on September 12, 2022

How about using field rules to show or hide the tab based on a hidden value. Have the click function set the value and then throw the focus to the first input field on the tab.

1 0

replied on September 12, 2022

I've tried this before, and when you hide the "active" page it can cause odd behavior like jumping back to the first page, so unfortunately you still need to control the navigation somehow.

0 0

replied on September 12, 2022 • Show version history

Maybe something like this just use the correct page number. You would need to put it into the function that the button calls when it is clicked.

$('[page=q29]').trigger('click');

EDIT: When I hide the tabs this does not work. Sorry. Maybe if you can find a way to hide the tabs using JavaScript the above may work.

0 0

SELECTED ANSWER

replied on September 12, 2022

This approach should work fine if you're only hiding the tabs with CSS.

I just did it with the following custom html button(s):

<button type="button" data-page="q10" class="page-button">Page 1</button>

The "page" data attribute is the page number for the target tab just like Genny showed.

Then I hid the navigation section with CSS

.cf-pagination {
  display: none;
}

And handle the navigation by passing a click event to the target.

$(document).ready(function(){
  $('.page-button').on('click',function(){
    // get the target page
    var page = $(this).data('page');
    
    // click the hidden page tab
    $('[page=' + page + ']').click();
  });
});

3 0

replied on September 13, 2022

You are the best Jason Smith!! This works great.

Thanks for all the help.

0 0

You are not allowed to follow up in this post.

Question

Question

Custom Buttons for Navigating Pages in Forms

Answer

Replies

Sign in to reply to this post.