jQuery example to trigger next/previous buttons on GravityForms #gravity-forms

gravityforms-auto-trigger-next-previous.js

// 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();
		});
	}
  });

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!

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 ;-)

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.

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.

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.

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

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?

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);