The Navigation

This is a simplified version of the navigation from the form in the video - only the first four pages are included for brevity. You can view the live form here: https://formstrap.com/samples/DemoForm (it will open in a new tab).

Page 1 is initially set with a class of "active". As we start on Page 1, the Previous button is initially disabled. Each Page button has an <a> tag with a hash URL e.g. <a href="#Page_1">1</a>.

<nav class="mb-3">
	<ul class="pagination justify-content-center">
		<li class="page-previous page-item disabled"><a role="button" onclick="prevpage()" class="page-link">Previous</a></li>
		<li class="d-none d-sm-inline pagenum1 page-number page-item active" aria-current="page"><a aria-label="Page 1" class="page-link" href="#Page_1">1</a></li>
		<li class="d-none d-sm-inline pagenum2 page-number page-item"><a aria-label="Page 2" class="page-link" href="#Page_2">2</a></li>
		<li class="d-none d-sm-inline pagenum3 page-number page-item"><a aria-label="Page 3" class="page-link" href="#Page_3">3</a></li>
		<li class="d-none d-sm-inline pagenum4 page-number page-item"><a aria-label="Page 4" class="page-link" href="#Page_4">4</a></li>
		<li class="page-next page-item "><a role="button" onclick="nextpage()" class="page-link">Next</a></li>
	</ul>
</nav>

The Page Containers

Each page needs to have a container with an ID that matches the hash URL. This ensures the caret position is set to the top of the page container. This is important for accessibility as it is the point that screen reading software will start to read.

Initially, only Page 1 is visible.

<div id="pages">
	<div id="Page_1" class="page">Page 1 Content</div>
	<div id="Page_2"  class="text-bg-primary d-none page">Page 2 Content</div>
	<div id="Page_3" class="text-bg-danger d-none page">Page 3 Content</div>
	<div id="Page_4" class="text-bg-success d-none page">Page 4 Content</div>
</div>

Click the page number buttons above - this is a working example.

The JavaScript

You need to create a function that is invoked when the Window popstate event is triggered. This happens whenever a navigation occurs in the current session (e.g. a link in a webpage is clicked).

To invoke a function that manages pagination, first create the event listener:

window.addEventListener('popstate', function(e) {
	// Isolate the page number from the location.hash value
	var page=location.hash.split("_");
	// If the page is NOT already visible AND the page container exists
	if($("#Page_"+page[1]).is(":visible")==false && $("#Page_"+page[1]).length>0)
	{	
		gotopage(page[1]);
	}
});

A "page loaded" listener is also required so that the correct initial page is displayed if the URL including the page number is the initial page load.

This is needed because the popstate event is not triggered on the initial page load.

window.addEventListener('load',function(e)
{
	if($(location.hash).length==0)
	{
		location.href="#Start";
	}
	else
	{	
		var page=location.hash.split("_");
		gotopage(page[1]);
	}                        
});

The popstate listener calls a function called gotopage(page). This function makes changes to the active state of page buttons and the visibility of page containers.

function gotopage(page)
{
	// How Many Pages does the form have?
	var pages=$("nav").find(".page-number").length;
	// If on first page, disable the Previous button
	if(page==1)
	{
		$(".page-previous").addClass("disabled");
	}
	else
	{
		$(".page-previous").removeClass("disabled");
	}
	// If on last page, disable the Next button
	if(page==pages)
	{
		$(".page-next").addClass("disabled");
	}
	else
	{
		$(".page-next").removeClass("disabled");
	}
	// Set the selected page button to active
	$(".page-item").removeClass("active");
	$(".page-item").removeAttr("aria-current");
	$(".pagenum"+page).addClass("active");
	$(".pagenum"+page).attr("aria-current","page");	

	// Display the selected page container
	$(".page").addClass("d-none");
	$("#Page_"+page).removeClass("d-none");
}

Finally you need functions to process clicks of the Previous and Next buttons.

function prevpage()
{
	if($("nav").find(".page-item.active").prev().hasClass("page-number"))
	{
		location.href=$("nav").find(".page-item.active").prev(".page-number").eq(0).find("a").attr("href");
	}
}
function nextpage()
{
	if($("nav").find(".page-item.active").next().hasClass("page-number"))
	{
		location.href=$("nav").find(".page-item.active").next(".page-number").eq(0).find("a").attr("href");
	}
}