Is it possible to set the save button just for the final tab?

[thellie]

If I have a tabbed form, I'd like to be able to have the 'save' button on the final tab only - so that the user doesn't click save on the first tab, and the form submitted immediately.

The only way I can think of doing this currently is to hide the 'save' button completely, and only use the 'apply' button. But, it would be good to have the 'save' button to submit and close the form, then redirect to the appropriate page.

I've had a look through the options for lists, forms, and groups... and searched through the forum... but can't find a way of doing this. Am I missing something obvious?

Thanks

 

[cheesegrits]

Nope, not missing anything obvious. But it would be possible to do this with JavaScript.

To make life easier, I just added a new Fabrik event, which fires when a tab is clicked. So to detect that, you would add a form_X.js file, in ./components/com_fabrik/js, with ...

requirejs(['fab/fabrik'], function () {
   // disable the SUbnit button on form load
   Fabrik.getBlock('form_X')._getButton('Submit').disabled="disabled";
   // listen for the tab click event, and enable/disable the Submit button depending on the tab being clicked
   Fabrik.addEvent('fabrik.form.tab.click', function(form, groupId) {
      if (groupId === '123') {
         form._getButton('Submit').disabled="";
      }
      else {
         form._getButton('Submit').disabled="disabled";
      }
   }
});

That's off the top of my head, so can't guarrantee it'll work, but it should do. Replace X with your form's numeric ID. Replace 123 with the numeric ID of the last group.

You'll have to do a github update first to pick up that change with the new event.

-- hugh

 

[thellie]

Thanks for this, but it's not working yet - I've updated via the github, cleared caches, logged out and back in, played with different button combinations (on/off), and the save button is still appearing on every tab.

Here is the file I added to the components/com_fabrik/js folder (called form_17.js) - where the form ID is 17, and the group ID is 50:

// use the requirejs dependency manager to wait for the Fabrik object to be loaded
requirejs(['fab/fabrik'], function () {
    // Add an event to be called when the form is ready
    Fabrik.addEvent('fabrik.form.loaded', function (form) {
         // disable the Submit button on form load
         form._getButton('Submit').disabled="disabled";
         // listen for the tab click event, and enable/disable the Submit button depending on the tab being clicked
         Fabrik.addEvent('fabrik.form.tab.click', function(form, groupId) {
              if (groupId === '50') {
                    form._getButton('Submit').disabled="";
              }
              else {
                   form._getButton('Submit').disabled="disabled";
              }
          });
     });
});

The group is not the final group in the list, as there is 1 other hidden group, and an admin access group after it, but I don't see how that would affect it...

 

[thellie]

Thanks for this, but it's not working yet - I've updated via the github, cleared caches, logged out and back in, played with different button combinations (on/off), and the save button is still appearing on every tab.

Here is the file I added to the components/com_fabrik/js folder (called form_17.js) - where the form ID is 17, and the group ID is 50:

// use the requirejs dependency manager to wait for the Fabrik object to be loaded
requirejs(['fab/fabrik'], function () {
    // Add an event to be called when the form is ready
    Fabrik.addEvent('fabrik.form.loaded', function (form) {
         // disable the Submit button on form load
         form._getButton('Submit').disabled="disabled";
         // listen for the tab click event, and enable/disable the Submit button depending on the tab being clicked
         Fabrik.addEvent('fabrik.form.tab.click', function(form, groupId) {
              if (groupId === '50') {
                    form._getButton('Submit').disabled="";
              }
              else {
                   form._getButton('Submit').disabled="disabled";
              }
          });
     });
});

The group is not the final group in the list, as there is 1 other hidden group, and an admin access group after it, but I don't see how that would affect it...

 

[thellie]

1 quick addition, although I don't think it's relevant - when I hover over the tab, the link is /my_booking_form#group-tab17_23_6
17 = form ID?
6 = tab postion?
23 = ???

 

[cheesegrits]

Can you point me at the page? I can take a quick look.

-- hugh

 

[thellie]

Thanks
The form is at http://www.themirrorfoundation.org/ecotour/index.php/my-booking-form
But you'll need to log in - I've set up an account for you, but how do I pm your details? Is the 'start a conversation' private?

 

[cheesegrits]

Just add it to My Sites ... http://fabrikar.com/you/my-sites

-- hugh

 

[thellie]

Ok, it's done. You have access equal to a typical user at the moment. If you need superuser, let me know.

 

[cheesegrits]

"This site is being renovated.
Please check back again soon."

-- hugh

 

[thellie]

Sorry, here you go

 

[cheesegrits]

I missed a closing }. I've edited the code in that post.

If that doesn't work, it'll be quicker if you give me super admin, and install extPlorer so I can edit the file.

-- hugh

 

[thellie]

It doesn't seem to have worked.
I updated the js file, cleared the cache, logged out/in, but the save button remains. I've installed extplorer, and changed you to superuser now.

 

[cheesegrits]

It's still missing that }. I'm logging in to the backend now.

-- hugh

 

[cheesegrits]

OK, it's working now. Corrected code is in my previous post.

-- hugh

 

[thellie]

Excellent, thank you for taking the time out to do this.

 

[cheesegrits]

No problem. Feel free to express your gratitude in the form of a Standard sub for a month.

(No pressure, I was happy to help, and it was something I wanted to see if I could do for my own curiosity)

(But I do need to buy dog food)

-- hugh

 

[thellie]

Sorry, if I was working for myself, and not the Thai NGO, I'd sign up straight away

As it is, my monthly income often doesn't cover my outgoings, which are mainly related to wife and children...

It's a steep learning curve, Fabrik, but I love it.

 

[cheesegrits]

I totally understand. Luckily my kids are all grown up and making their own way, so it's just the wife and the dogs.

-- hugh

 

[thellie]

I have 1 grown up already (she's 26, and I'm, scarily, a grandad...) and my youngest is coming up to 6.

Oh, I had a fiddle with your code (when I have example codes, then I'm not too bad... whereas writing from scratch is mainly a non-starter, apart from basic MySQL and very very basic PHP)...

...I've managed to hide the save button completely, apart from the relevant group tab. The only thing, which is not important and not a request, is that the corners on the LHS of the apply button are still square, not rounded. I guess it's down to the fact thtat the Save button is still there, but display=none..?

requirejs(['fab/fabrik'], function () {
    Fabrik.addEvent('fabrik.form.loaded', function (form) {
       // disable the Submit button on form load
       form._getButton('Submit').style.display="none";
       // listen for the tab click event, and enable/disable the Submit button depending on the tab being clicked
       Fabrik.addEvent('fabrik.form.tab.click', function(form, groupId) {
            if (groupId === '50') {
                     form._getButton('Submit').style.display="inline";
                 }
                else {
               form._getButton('Submit').style.display="none";
                }
        });
     });
});