Multi-Page Forms in Caldera Forms

Getting the reference here, I want to change the radio field to advance the page in the Multi-Page and submit automatically form at the end .

So I combined the two codes and added the extra code at the beginning based on the references here.

So the complete code is:

/**
Plugin Name: Header Scripts
*/
add_action( 'wp_footer', 'my_footer_scripts' );
function my_footer_scripts(){
  ?>
  <script>

	  jQuery( document ).ready( function( $ ) {
	//find highest page
	var highest_page = 1;
	//IMPORTANT: Change form ID to match your form
	$( '.CF6198768c0fd31 .caldera-form-page' ).each( function () {
		highest_page = $(this).data('formpage');
	});

	/** When radio field is selected go to next page */
	//IMPORTANT: Change form ID to match your form
	$('.CF6198768c0fd31 input:radio').on('change', function () {
		var $this = $(this);
		var $form = $(this).closest('form.caldera_forms_form'),
			current_page = $form.find('.caldera-form-page:visible').data('formpage');
		//check if we're on the last page
		if ( highest_page == current_page ) {
			//find and click submit
			$form.find( 'input[type="submit"]' ).trigger( 'click') ;
		}else{
			//find and click next page button
			$form.find('[data-formpage="' + current_page + '"]').find('.cf-page-btn-next').trigger('click');
		}
	});

	/** Hide next page buttons and submit buttons*/
	//IMPORTANT: Change form ID to match your form
	$('.CF6198768c0fd31').find('.cf-page-btn-next, input[type="submit"]').hide().attr('aria-hidden', true);

});
  
	  
  
jQuery( document ).ready( function( $ ) {
	//find highest page
	var highest_page = 1;
	//IMPORTANT: Change form ID to match your form
	$( '.CF6198768c0fd31 .caldera-form-page' ).each( function () {
		highest_page = $(this).data('formpage');
	});

	/** When radio field is selected go to next page */
	//IMPORTANT: Change form ID to match your form
	$('.CF6198768c0fd31 input:radio').on('change', function () {
		var $this = $(this);
		var $form = $(this).closest('form.caldera_forms_form'),
			current_page = $form.find('.caldera-form-page:visible').data('formpage');
		//check if we're on the last page
		if ( highest_page == current_page ) {
			//find and click submit
			$form.find( 'input[type="submit"]' ).trigger( 'click') ;
		}else{
			//find and click next page button
			$form.find('[data-formpage="' + current_page + '"]').find('.cf-page-btn-next').trigger('click');
		}
	});

	/** Hide next page buttons and submit buttons*/
	//IMPORTANT: Change form ID to match your form
	$('.CF6198768c0fd31').find('.cf-page-btn-next, input[type="submit"]').hide().attr('aria-hidden', true);

});
	  
 </script>
  <?php
}

I saved the code using the code snippet plugin.

At the time see of (form preview) on the admin page, the action/form has worked as I wanted it to.

When a radio is selected, it advances the page. And when at the end of the form it submits the data without having to press the submit button (the submit button has been hidden).

Next, I placed this form (using a shortcode) to display on a single page in woocommerce, instead of the add cart button for some reasons.

The problem happened is the form doesn’t work the way it should.
The visitor has to click on the next button/submit button.(See)

(After double checking the form preview in admin page, the action/code is still working).

I have also placed the form on the wordpress page but same that not working.

Can anyone here help me see what went wrong and what I need to do to reach the target?

Any help is greatly appreciated,
thank you

• This topic was modified 3 years, 4 months ago by carloz san. Reason: move link