Skip to content

Instantly share code, notes, and snippets.

@yanknudtskov
Last active October 7, 2021 20:03
Show Gist options
  • Save yanknudtskov/a82d1f3fcfaca171ae1f14b74c65f2de to your computer and use it in GitHub Desktop.
Save yanknudtskov/a82d1f3fcfaca171ae1f14b74c65f2de to your computer and use it in GitHub Desktop.
jQuery example to trigger next/previous buttons on GravityForms #gravity-forms
// This is the initial GravityForms binding, it will be lost upon a page change with next/previous
// Thus we make a bind on gform_page_loaded event also
if( jQuery('.custom-form').length > 0 ) {
jQuery('.gfield_radio input[type=radio]').bind("click", function() {
//console.log('Clicked: ' + jQuery( this ).closest('.gform_page').find('.gform_page_footer .gform_next_button.button') );
jQuery(this).closest('.gform_page').find('.gform_page_footer .gform_next_button.button').click();
});
}
jQuery(document).bind('gform_page_loaded', function(event, form_id, current_page){
// code to be trigger when next/previous page is loaded
if( jQuery('.custom-form').length > 0 ) {
jQuery('.gfield_radio input[type=radio]').bind("click", function() {
//console.log('Clicked: ' + jQuery( this ).closest('.gform_page').find('.gform_page_footer .gform_next_button.button') );
jQuery(this).closest('.gform_page').find('.gform_page_footer .gform_next_button.button').click();
});
}
});
@critterpixel
Copy link

I've been looking for this solution for a while. Where would I put this in my form? Gravity Forms told me to use form_post_render and to put my code in a HTML block using script tags. Besides changing .custom-form to my own form class, is there anything else that needs changed to get this code to work with my site?

Thanks!

@yanknudtskov
Copy link
Author

Include it through a custom.js file would probably be the easiest, use enqueue_script to do it ;-)
Other than that I can't tell you anything specific as I don't know your code and site ;-)

@ticktockdesign
Copy link

Thank you for this - it looks good. So the theory then is that you have multiple pages, each page has just 1 form field (and in your code it's a radio button), and when that field is clicked it navigates to the next page. Is that right? Thanks for sharing.

@brianyerkes
Copy link

Hi there, thanks for this. Just tested and works nicely but it seems that it doesn't work if you go back with the "previous" button from the second page. Scenario: First page of the form, you click on a radio button option, triggers the next button as expected to load the second page. Clicking "Previous" displays the first page of the form with the radio button options, and nothing happens when clicked.

@kashifkiduniya
Copy link

It's working!
Just have a minor issue: In the first trigger is not working. I have to manually click next button. While other next steps are working fine. Even if i back on the first step and then select radio button then its work fine.

@austinsparx
Copy link

I've set this up in a custom JS file and enqued but not working - does this work with AJAX enabled on the form?

@cliffhilton
Copy link

First, love this idea! Thanks much. Question, I have it working with "ratings" survey add-on, but on mobile, when going to next page, the star rating does not clear. Ideas?

@KeviinCosmos
Copy link

This did not work for me.. I've made this, but it works like every second time ish.. Don't know why


(function($) {

   // Prisberegner
    $('.hideFooter li input:radio').change(function() {
        $(this).closest('.gform_page_fields').next().children('.gform_next_button').trigger('click');
    });  

    function hideFooter() {
        $('.hideFooter li input:radio').change(function () {
            $(this).closest('.gform_page_fields').next().children('.gform_next_button').trigger('click');
        });
    }

    // Load code GF
    $(document).on('gform_post_render', function (event, form_id, current_page) {

        hideFooter();

    });

})(jQuery);

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment