1. NOTICE: If you are using Fabrik and update to Joomla 3.10, you will need to update to Fabrik 3.10. And, if you are using Fabrik, do not upgrade to Joomla 4, we do not have a supported version ready for release. More information on a release date coming soon. Also, please note that Fabrik 3.10 will not install on any Joomla sites less than 3.8.
    Dismiss Notice

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

Discussion in 'Professional Support' started by achartier, Oct 18, 2017.

  1. achartier

    achartier Active Member

    Level: Community
    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.
     
  2. achartier

    achartier Active Member

    Level: Community
    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...
     
  3. achartier

    achartier Active Member

    Level: Community
    Friendly bump...
     
  4. cheesegrits

    cheesegrits Support Gopher Staff Member

    Level: Community
    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 ...

    Code (Text):

    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
     
  5. achartier

    achartier Active Member

    Level: Community
    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?
     
  6. achartier

    achartier Active Member

    Level: Community
    Works, thanks Hugh.
     
    cheesegrits likes this.
  7. cheesegrits

    cheesegrits Support Gopher Staff Member

    Level: Community
    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
     

Share This Page