"Loading" step / Auto advance

[adg_domme]

Hey there,

is there a possibility to have a step of the form advancing automatically to the next step after a certain amount of time?

Example: User enters his/her data and clicks on the “next” button. The next step just consists of a loading animation (CSS/JS/GIF) and some info text. After some seconds, the form automatically advances to the next step.

Thanks in advance for your help.

[adg_domme]

I digged a bit deeper. Actually, I’m trying to execute some JavaScript only on a certain page/step of the form, so it automatically advances to the next step after 5 seconds.

<script>
  setTimeout(function() {
    $('.quform-form-1').data('quform').goToPage(40);
  }, 5000);
</script>

I added that code to the according step of the form via a HTML element. However, if I open the form (running in a popup), the code gets executed immediately and not when on the page/step that contains the code.

[adg_domme]

I added a pre validate filter to my functions.php, like this:

add_filter('quform_pre_validate_1', function (array $result, Quform_Form $form) {
    if (($nextPageId = $form->getNextPageId()) == 40) {
		echo '<script>setTimeout(function() { $(\'.quform-form-1\').data(\'quform\').goToPage(40); }, 5000);</script>';
	}
    return $result;
}, 10, 2);

It should check what the current page ID is. If a certain page ID is met, it should automatically advance to the next page (with certain ID). However, nothing happens. 🙁

• This reply was modified 4 years, 6 months ago by adg_domme.
• This reply was modified 4 years, 6 months ago by adg_domme.

[adg_domme]

[didn’t make sense wat I tried here]

• This reply was modified 4 years, 6 months ago by adg_domme.
• This reply was modified 4 years, 6 months ago by adg_domme.
• This reply was modified 4 years, 6 months ago by adg_domme.

[adg_domme]

I noticed your support may be off for a couple of days, so I helped myself out with this custom JS in the general quform settings:

jQuery(document).ready(function ($) {

    $('.quform-button-next-1_38 button').click(function() {
        setTimeout(function () {
            if ( $('.quform-page-115').hasClass('quform-current-page') ) {
                $('.quform-form-1').data('quform').goToPage(40);
            }
        }, 5000);
    });

    $('.quform-button-back-1_42 button').click(function() {
        setTimeout(function () {
            $('.quform-form-1').data('quform').goToPage(36);
        }, 1000);
    });

});

Follow up question: Is it possible to override the original back button functionality? I had to add a delay of 1s to my custom back button click event (going to a certain step of the form) so it won’t interfere with the original functionality (going back one step). This results in the form going back one step (visible) and then performing my custom event. return false; and X.preventDefault(); etc. didn’t help.

• This reply was modified 4 years, 6 months ago by adg_domme.

[Ally]

You don't have permission to view this content. Please log in or register and then verify your purchases to gain access.

[Author]

Posts