Is there a way if the user finishes the Range Slider and clicks the "Submit" button and it will automatically show the result on the next page? And that result page will have a reset or back to the first page button?

Please see the code I have attached for reference.

Also the working code: http://jsfiddle.net/archer201977/h9f6r21u/

function proRangeSlider(sliderid, outputid, colorclass) {
        var x = document.getElementById(sliderid).value;  
        document.getElementById(outputid).innerHTML = x;
        document.getElementById(sliderid).setAttribute('class', colorclass);
        
        updateTotal();
}

var total = 0;
function updateTotal() {
        var list= document.getElementsByClassName("range");
        [].forEach.call(list, function(el) {
            console.log(el.value);
            total += parseInt(el.value);
        }); 
        document.getElementById("n_total").innerHTML = total;
      
}
$.fn.serializeObject = function()
{
    var o = {};
    var a = this.serializeArray();
    $.each(a, function() {
        if (o[this.name] !== undefined) {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || '');
        } else {
            o[this.name] = this.value || '';
        }
    });
    return o;
};

$(function() {
    $('form').submit(function() {
        $("#result").empty().append(
            "<ul>" + Object.entries($('form').serializeObject()).map(e => `<li>${e[0]}: ${e[1]}`).join("") + "</ul>"
        );
        return false;
    });
});