Javascript changes reset when page reloads

Question

I have a one page checkout for my site, so i decided to separate it to 5 parts, and make one or two display at a time, using javascript.

see the code below:

    <fieldset id="vm-fieldset-pricelist" class="vm-fieldset-pricelist"> ... </fieldset>

    <div id="coupon-section" class="coupon-section display-none"> ... </div>

    <fieldset id="shipment-section" class="shipment-section display-none"> ... </fieldset>

    <div id="edit-account-section" class="billto-shipto display-none"> ... </div>

    <div id="part-five" class="display-none"> ... </div>


    <?php
                    $user = JFactory::getUser();
                    if ($user->guest) { 
                        $usercheckin = '_notloggedin';
                    } else {
                        $usercheckin = '_loggedin';
                    } 
            ?> 

   <button type="button" id="one-to-two<?php echo $usercheckin ?>" class="sabz-button pull-right" onclick="cartButtonHandler(this.id); return false;"><?php echo vmText::_('COM_VIRTUEMART_CHECKOUT_TITLE')?> </button>

<script>

window.cartButtonHandler = function(button_id) {
    switch(button_id) {
    case 'one-to-two_notloggedin':
        document.getElementById("vm-fieldset-pricelist").className = "display-none";
        document.getElementById("com-form-login").className = "";
        document.getElementById(button_id).innerHTML = "ثبت اطلاعات و ادامه خرید";
        document.getElementById(button_id).className = "abi-button pull-right";
        document.getElementById(button_id).id = 'two-to-three';
        break;
    case 'one-to-two_loggedin':
        document.getElementById("vm-fieldset-pricelist").className = "display-none";
        document.getElementById("edit-account-section").className = "billto-shipto display-none";
        document.getElementById("shipment-section").className = "shipment-section";
        document.getElementById(button_id).innerHTML = "ثبت اطلاعات و ادامه خرید";
        document.getElementById(button_id).className = "abi-button pull-right";
        document.getElementById(button_id).id = 'two-to-three';
        break;
    case 'two-to-three':
        document.getElementById("edit-account-section").className = "display-none";
        document.getElementById("shipment-section").className = "display-none";
        document.getElementById("coupon-section").className = "coupon-section";
        document.getElementById(button_id).innerHTML = "بازبینی و تایید سفارش";
        document.getElementById(button_id).id = 'three-to-four';
        break;
   case 'three-to-four':
        document.getElementById("part-chahar").className = "";
        document.getElementById("vm-fieldset-pricelist").className = "vm-fieldset-pricelist";
        document.getElementById("edit-account-section").className = "billto-shipto display-none";
        document.getElementById("shipment-section").className = "shipment-section";
        document.getElementById("coupon-section").className = "coupon-section";
        document.getElementById("handlerbutton-section").className = "display-none";
        document.getElementById(button_id).id = 'four-to-five';
        break;
   case 'four-to-five':
        alert(button_id);
        break;
}
}

    </script>

First of all, I don't know javascript, is there a better way to do this in javascript or jquery or ...?

My problem: when a user for example in "coupon-section" inputs a coupon code and clicks on the submit button, mind that coupon submit button is different from NEXT STEP button, the page reloads and first step pops up. or when a user checks a check box, or any other interaction, page reloads and first step pops up.

How can i save javascript changes and get them back on page reload so user can stay on the same step after interacting with the form? i guess it might be solved using cookies or something but i don't know how to do that.

Answer 1

1.Go through Jquery for easy html (DOM) manipulations and selections.

2. Go through the documentation SessionStorage ,(to set and get items in broswer session on reload)

3. Learn Json , Create a json structure to record the progress , and make a function to load the section based on that json .(make everything driven by data) eg :

   [

   { sectionName:"section1", progress:"started" }, { sectionName:"section2", progress:"incomplete" },
   ]

Hope this helps