Attach javascript to Next/Previous buttons on multi-page form

[achartier]

I have a multi page form, each page being a group. On any particular page I want to determine whether to display the subsequent group(s) or not when the user clicks the next button. This determination will be based on the values of multiple elements so it isn't as simple ass hiding the group in the element javascript. The next group in sequence may or may not be displayed depending on this determination.

So I think I need to attach something after validation (no point in doing anything if the page doesn't validate). Once it has validated I need to interrogate the values and then hide/show my group(s) AND ensure that the process of going to the next group skips any now hidden ones or displays any now shown ones.

Any thoughts on how I might handle this?

Thanks.

 

[achartier]

I tried adding a calc element that I change through javascript whenever one of my other elements change. Basically I increment the value of the calc each time one of my elements are set to a specific value. I then added a javascript event to the calc stating that when the value of the calc == 8 hide the group. Unfortunately when I reach this condition and then click the Next button, the group still shows. Sigh...

 

[achartier]

Friendly bump...

 

[cheesegrits]

We fire two events when changing page, one before the page is advanced (fabrik.form.page.change) and one after (fabrik.form.page.change.end).

So a form JS file with ...

requirejs(['fab/fabrik'], function() {
   Fabrik.addEvent('fabrik.form.page.change', function(form, dir) {
      // your code.  The 'dir' arg is 1 or -1.  form.currentPage is the page number BEFORE the change.
     // form.options.pages is an array (keyed by page number) of arrays of group ids.
     // returning false will stop the page changing
   });
   
   Fabrik.addEvent('fabrik.form.page.change.end', function(form, dir) {
      // your code.  form.currentPage is page number AFTER change.
   });
});

... and do whatever you need in either of those.

-- hugh

 

[achartier]

If I hide a group, which happens to be the next group that would display when clicking the Next button, will it skip the group?

 

[achartier]

Works, thanks Hugh.

 

[cheesegrits]

Yes, it should skip "empty" pages.

https://github.com/Fabrik/fabrik/blob/master/media/com_fabrik/js/form.js#L787

In changePage, after the fabrik.form.page.change event fires, we check to see if the next page has visible groups before moving to it, and if not we recursively call changePage, and check the next page, till we either find one with visible groups or run out of pages.

-- hugh