Captcha on a multitab form

[Pavlov]

Hi,

I have a form with two tabs corresponding to two groups of a single list. I would like to place a captcha on each tab as there is a save button at the bottom of each tab. It is nice to have the possibility to save from any of the tabs and not just one of them, and that it was a perfect configuration for my purpose before I introduced the Captcha element.

However, if I put one captcha on each tab, each one of them must be solved and they are in conflict. If I place just one captcha on the first tab, the user will be confused as there is a save button on the second tab too, which cannot be directly used without first solving the captcha on the first tab.

So my question is, is there a way to place two nonconflicting captchas on each tab (or one appearing on both of them) or alternatively, to hide the save button from the second tab?

 

[juuser]

Hi, to make a submit button only appear on your last tab:

1) Create a .js file called "form_XX.js" in "/components/com_fabrik/js" folder (replace XX with your forms ID).
2) Add the following code to this file:

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 === '110') {
                     form._getButton('Submit').style.display="inline";
                 }
                else {
               form._getButton('Submit').style.display="none";
                }
        });
     });
});

Again, replace groupId 110 in the code with your group id where you wish to display the submit button.

 

[Pavlov]

juuser, thank you for the suggestion, but I need to hide the Save button from the second tab upon loading the form and not from the first one.

I have tried to fix it myself (removing the if block and modifying the form load code) but independently of the code I put in, the save button initially does not appear on any of the two tabs, but if I click the second one and then the first one it appears again on the first one. I guess I do not refer correctly to the group. Could you help me please with that ?

 

[juuser]

Strange, it should work (tested twice). There is no separate submit button for every tab. This code just hides the submit button on form load. And when a tab/group with a certain id (in the example 110) is clicked, the submit button is shown. And when any other tab is clicked, the submit button is hidden again.

Make sure you have a right tab/group id. Check with browser inspect function by right clicking on the tab heading. There should be something like <a id=group110_tab... So in this case the group id is "110". Or check the group id from Fabrik groups list in backend.

After making any changes to the form .js file, make sure to clear browser cache afterwards.

 

[Pavlov]

Juuser, your code worked immediately, just it is not what I need. I do not want the button to hide from both tabs on loading and wait for the user to enter the second tab and then go back to the first one. That's because the user is supposed to first fill in and save the data in the first tab. I want the button to appear only on the first tab already upon loading. It shouldn't be that difficult, but I can't seem to find the right syntaxis.

 

[troester]

So don't hide the button on load.

 

[juuser]

Exactly, and then change the group id in your code to your second group id and switch the display:inline and display:none rows within if statement.

So don't hide the button on load.

 

[Pavlov]

Hi, that worked! The code I used is this:

requirejs(['fab/fabrik'], function () {
    Fabrik.addEvent('fabrik.form.loaded', function (form) {
       Fabrik.addEvent('fabrik.form.tab.click', function(form, groupId) {
            if (groupId === '26') {
                     form._getButton('Submit').style.display="inline";
                 }
                else {
               form._getButton('Submit').style.display="none";
                }
        });
     });
});

However, I still do not like this solution very much as having a send button on both tabs allows for better user experience. Well, it would have been better if there were no captcha, but I need it. Isn't there any way of making a single captcha to be visible on both tabs or to appear on a separate window upon submitting the form?

 

[troester]

Use "noCaptcha (invisible)"

 

[Pavlov]

Thanks Troester. I have changed the setting of the ReCaptcha element as you suggested. Moreover, I had to introduce new keys I have obtained for the invisible ReCaptcha v2 from Google as the old ones were apparently incorrect for this type of ReCaptcha (judging from a red error message displayed on the ReCaptcha logo). Now the logo appears as if the connection with Google is fine but the form is not submitted. There is no error message but the form is not processed (it is not closed and the data is not stored). Could that be due to the ajax validation issue mentioned in this thread?: http://fabrikar.com/forums/index.php?threads/invisible-captcha.48844/ I am using ajax validation.

 

[juuser]

Do you get any errors on browser console? Does it work without ajax validation?

 

[Pavlov]

Finally, I have found time to do some additional tests with the invisible captcha. The problem indeed seems to be related to ajax validation. When I disable it, the form is processed correctly.
Before disabling ajax I had tried to place the captcha plugin on either tab and also on both of them, without success. There is no related error message appearing on the error log.