Following a question on the Sure Facebook group about this I thought i’d write a very quick article on how I would do this.
The specific question was ” how to automatically advance to the next page/question when clicking the button of a radio multiple choice field (allowing 1 choice only)?” This can be done, and I’ve done it for someone recently, but it requires my nemesis, JavaScript.
Snippet
The below snippet is what I will be using I use WPCODEBOX for this so there is no <script> </script> tags in the snippet if your using something else or a utility plugin then you will need to add these back.
You will need to modify the target form, in my case, form number 9, and you will need to edit the autoselectors; this could be modified for other selectors, too.
document.addEventListener('DOMContentLoaded', function () {
// Limit to this specific form
const form = document.getElementById('srfm-form-9');
if (!form) return;
// IDs (or selectors) of the options that should trigger auto-next
// Adjust this array to whatever options you want:
const autoNextSelectors = [
'#srfm-multi-choice-ec239c54-0', // first option on page 1
'#srfm-multi-choice-ec239c54-1', // second option on page 1
'#srfm-multi-choice-bab64fdb-0',
// '#srfm-multi-choice-bab64fdb-0', // example for page 2 if you want
];
// Delegate change events inside the form
form.addEventListener('change', function (e) {
const target = e.target;
// Only care about the multi-choice checkboxes
if (!target.matches('.srfm-input-multi-choice-single')) return;
// Only auto-next for specific options
const selector = '#' + target.id;
if (!autoNextSelectors.includes(selector)) return;
// Only trigger when the option becomes checked
if (!target.checked) return;
// Make sure we're on a page-break section (multi-step page)
const page = target.closest('.srfm-page-break');
if (!page) return;
// Find the Next button within the same form
const nextBtn = form.querySelector('.srfm-page-break-buttons .srfm-nxt-btn');
if (!nextBtn) return;
// Only click if it's visible (i.e. we're actually on a page where "Next" makes sense)
const style = window.getComputedStyle(nextBtn);
if (style.display === 'none' || style.visibility === 'hidden') return;
// Go to the next page
nextBtn.click();
});
});
Bubble: Explaining the process.
In the below bubble you can see it in action and also get to see how I customise it with new options.
