Forward button not working after history.pushState

Keep in mind that history.pushState() sets a new state as the newest history state. And window.onpopstate is called when navigating (backward/forward) between states that you have set.

So do not pushState when the window.onpopstate is called, as this will set the new state as the last state and then there is nothing to go forward to.

Complete solution working with multiple clicks on back and forward navigation.

Register globally window.onpopstate event handler, as this gets reset on page reload (and then second and multiple navigation clicks don't work):

window.onpopstate = function() {    location.reload();};

And, update function performing AJAX reload (and, for my use-case replacing query parameters):

function update() {    var currentURL = window.location.href;    var startURL = currentURL.split("?")[0];    var formParams = form.serialize();    var newURL = startURL + "?" + formParams;    var ajaxURL = startURL + "?ajax-update=1&" + formParams;    $.ajax({        url: ajaxURL,        data: {id: $(this).attr('id')},        type: 'GET',        success: function (dataRaw) {            var data = $(dataRaw);            // replace specific content(s) ....            window.history.pushState({path:newURL},'',newURL);        }    });}

I suggest reading about navigating browser history and the pushState() method here. It explicitly notes that pushState() by itself will not cause the browser to load a page.

As far as the forward button not working, once you call pushState() the browser is (conceptually) at the last (latest) page of the history, so there is no further page to go "forward" to.