Ninja Forms: Multi Part Forms - Next Step On Field Click (jQuery)

user_7762808 0
Viewed 2352

I've been having trouble implementing jQuery click events with Ninja Forms + Multi Step form plugin. The goal is to eliminate the need for the user to click the "Next" button.

Using the following function, I can successfully trigger a click on the next button but only on the first step. Once the second step loads the entire function seems to be unbound (due to the changing of the DOM?).

jQuery(document).on( 'nfFormReady', function( e, layoutView ) {

    jQuery( ".nf-field-element ul li label" ).click(function() {

      var nextButton = jQuery(this).closest('.nf-form-content').find('.nf-next');
      jQuery(nextButton).click();

    });

});

Is there a better solution to achieve this? I can't seem to find any concrete developer resources on the Multi-Part Form plugin.

ninja-forms wordpress forms jquery
2 Answers

I found this in the Ninja Forms Developer Slack channels on how to bind functions to page changes. Maybe this could be a solution for you.

You'll need to hook into the page change:

nfRadio.channel( 'nfMP' ).trigger( 'change:part', this );

See: /assets/js/front-end/models/partCollection.js#33

It seems that if you hook your action to the page change, it will rebind to the new DOM on the next page.

An alternative solution that worked for me is to bind your jQuery to a parent element of your form that won't get removed from the DOM using the following:

jQuery(document).on('click', '#parentid'`, function( e layoutView ) {

    jQuery( ".nf-field-element ul li label" ).click(function() {

      var nextButton = jQuery(this).closest('.nf-form-content').find('.nf-next');
      jQuery(nextButton).click();

    });
});

I haven't tested this, but hopefully it points you in the right direction.

Also, it's possible that you might get performance issues using on('click'), I've heard, but it doesn't seem to be effecting my form at all.

user_64060060

The first answer is a good start, but the jQuery used requires a double-click in order to register. The following script loaded into the page footer works like a charm:

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

         // on ID (#) click, do the following:
         $(document).on('click', '#clickedID', function(event) {

          event.preventDefault;

          // click the input button associated with .nf-next class
          $(".nf-next").click();

        });

    });
})( jQuery );

In order to write standard jQuery in WordPress, like above, wrap standard jQuery in the following:

(function($) {

     <Standard jQuery>

 })( jQuery );
user_87556390
Related