Radio Button – Auto Next Pagination

Hi @maniegrove,

I’m afraid at the moment there isn’t any out of the box setting supported in Forminator for such a workflow.

It’ll require using the Next and Previous buttons to browse through a paginated form.

I’m afraid, it will require custom coding to change existing behaviour, could we know the use case that you are looking to achieve with such workflow so that we could check if there is anything specific that could be suggested?

Looking forward to your response.

Kind Regards,
Nithin

Hi Nithin,

My requirement is skip the user behavior of click the next button in radio enabled quiz. Simply user need to click anyone radio options it should be redirect to next page/step.

Adv. Thanks.

Hi @maniegrove

I am afraid it is not possible out of the box but our developers created a script that can help you:

https://gist.github.com/wpmudev-sls/45e1629ea253386daab3f3600cc4314d

In this code, there are some Form Samples and step on how to make it works.

To install the code you can add it as a mu-plugin:

https://wpmudev.com/docs/using-wordpress/installing-wordpress-plugins/#installing-mu-plugins

Best Regards
Patrick Freitas

Hi Patrick,

Thanks for your valuable reply for saving my time. But above script code not working to me. From my analyzed “var all_steps = document.querySelectorAll(‘.forminator-step’);” this code not detect properly. Due to there is no class “forminator-step” in form. Is manually i should give this class in each steps or anything wrong correct me.

Thanks Adv.

Hi Patrick,

Update on above reply. If pagination format changed to steps will come with this class “forminator-step”. But script code output is not as much expected. It simply add display:block to div tag. not a regular behavior like next button click event.

Thanks.

Hello @maniegrove !

We’ve had a similar request recently and I was able to create a code snippet which seems to have worked for the other person, can you check the code I shared here and see if that works for you? https://www.ads-software.com/support/topic/click-on-radio-button-should-move-to-next-step/#post-15380278

Warm regards,
Pawel

Hi Pawel,

Awesome.! Works perfectly as what I expected..

Set “next-on-click” class into radio styling. And added below code into forminator form page. works great..

jQuery(document).ready(function($) {
        
	$(document).on('after.load.forminator', function(e, form_id) {        
		var next_button        = document.querySelector('.forminator-button-next'),
			click_event        = new CustomEvent('change_evt'),
			clickable_elements = document.querySelectorAll('.next-on-click .forminator-radio'),
			radios = document.querySelectorAll('.next-on-click input[type="radio"]');

		clickable_elements.forEach(
			clickable_element => {
				clickable_element.addEventListener('click', wpmudev_clickables_event_callback)
			}
		)

		function wpmudev_clickables_event_callback() {
				radios.forEach(radio => {
					radio.addEventListener('change', wpmudev_change_evt_callback)
				})
		}

		function wpmudev_change_evt_callback(e) {
			if (e.currentTarget.checked) {
				$('.forminator-button-next').trigger('click');
			}
		}

	});
setTimeout(function() {
		$('.forminator-custom-form').trigger('after.load.forminator');
	}, 100);

});

Thanks..

• This reply was modified 3 years ago by maniegrove.