Custom Form Navigation Using JavaScript

In this guide, we will add custom navigation to our form pages with JavaScript. This will allow us to run custom logic before navigating users to the next page or submitting the form.

First, we will need to disable standard navigation on the form using the form builder setup.

Triggering default form navigation actions using JavaScript.

// Set navigation type from the following - back, next, cancel, draft, finish
var navigation_type = 'next';
// Create and trigger a hidden navigation button
$( '<input>' ).attr( {
	type: 'hidden',
	class: navigation_type,
	'data-go_to_page': ''
} ).appendTo( '#component_list' ).trigger( 'click' );

You can add custom buttons on your form for data validation before moving to the next page or submitting the form.

<button id="next_with_validation" class="btn btn-lg btn-block btn-default">Next</button>

<button id="submit_with_validation" class="btn btn-lg btn-block btn-success">Submit</button>

Using JavaScript you can listen to the custom button click and run custom validation before allowing users to navigate.

// Listen to button click
$( '#next_with_validation' ).click( function( event ) {
	// Set custom validation logic and flag
	var is_valid = false;
	// Check validation
	if ( is_valid ) {
		// Navigate user to next page
		$( '<input>' ).attr( {
			type: 'hidden',
			class: 'next',
		} ).appendTo( '#component_list' ).trigger( 'click' );
	} else {
		// Display validation alert
		window.formyoula.event_trigger( 'app:alert:display', { 
			title: 'Alert Title',
			message: 'Alert message',
			dismissable: true,
			fadeOut: 20000,
			center: false,
			type: 'warning'
		});// END Alert trigger
	}// END Validation check 
});// END Next page button click listener

Standard navigation button example using HTML field. These buttons can also be dynamically added to the page using JavaScript.

<button class="back btn btn-lg btn-block btn-default ">Previous</button>

<button class="next btn btn-lg btn-block btn-default">Next</button>

<button class="cancel btn btn-lg btn-block btn-warning">Cancel</button>

<button class="finish btn btn-lg btn-block btn-success">Submit</button>

<button class="draft btn btn-lg btn-block btn-default">Save Draft</button>

<button data-go_to_page="2" class="next btn btn-lg btn-block btn-default">Go To Page 2</button>

You can add other custom HTML components using the Bootstrap CSS library - https://getbootstrap.com/docs/3.4/components/

For any questions, please contact us at [email protected] or the Formyoula in-app chat 🙂