js: Form

<script>

    window.onload=function(){
        var stepIndex = 0;
    }

    // var modeToggle = document.getElementsByClassName("input:radio[name=c-tabs__choice]:checked");
    // const stepElements = document.querySelector('[data-toggle-step]');


    {% if mode %}
        var stepElements = document.getElementsByClassName("{{mode}}-{{type}}-fw__step");
        var form = document.getElementById("{{mode}}-{{type}}-form");    
    {% else %}
        var stepElements = document.getElementsByClassName("{{type}}-fw__step");
        var form = document.getElementById("{{type}}-form");
    {% endif %}

    {# var stepElements = document.getElementsByClassName("{{mode}}-{{type}}-fw__step");
    var form = document.getElementById("{{mode}}-{{type}}-form");     #}
    var breadcrumbsItems = document.getElementsByClassName("c-stepper__element");



    // Initialise the form
    function init() {
        // Reset the step
        stepIndex = 0;
        // Clear all fields
        form.reset();
        toggleBreadcrumbsStep();
        showCurrentStep();      
        breadcrumbsItems.classList.add("c-stepper__element--active");  
    }

      // Indicate the current step with breadcrumbs
    function toggleBreadcrumbsStep() {
        Array.from(breadcrumbsItems).forEach(function (el, index) {
            if (index <= stepIndex) {
            el.classList.add("c-stepper__element--active");
            } else {
            el.classList.remove("c-stepper__element--active");
            }
        });
    }

    // Show the current step and hide the rest
    function showCurrentStep() {
    Array.from(stepElements).forEach(function (el, index) {
        if (index !== stepIndex) {
        el.classList.add("u-none");
        } else {
        el.classList.remove("u-none");
        }
    });
    
    }

    // Next step action, all fields in current step must be validated before proceed to next step.
    function next() {
        const fields = stepElements[stepIndex].querySelectorAll("input:not([type=button]):not([type=submit]), select");
        // Increment step
        stepIndex++;
        toggleBreadcrumbsStep();
        showCurrentStep();
    }

    // Back button action to navigate 1 step back
    function back() {
    // Clear all fields in current step
    const fields = stepElements[stepIndex].querySelectorAll("input:not([type=button]):not([type=submit]), select");
    Array.from(fields).forEach(function (field) {
        const tagName = field.tagName;
        if (tagName.localeCompare("INPUT") === 0) {
        field.value = '';
        } else if (tagName.localeCompare("SELECT") === 0) {
        field.selectedIndex = 0;
        }
    });
    // Decrement step
    stepIndex--;
    toggleBreadcrumbsStep();
    showCurrentStep();
    }


    form.addEventListener('submit', function (e) {
    e.preventDefault();

    const fields = stepElements[stepIndex].querySelectorAll("input:not([type=button]):not([type=submit]), select");
    // all fields in current step must be validated before submission.

    // Prepare the result in next view
        showResult();
        // Navigate to result
        stepIndex++;
        // toggleBreadcrumbsStep();
        showCurrentStep();
    }, false);

    function showResult() {
    const resultsContainer = document.getElementById("results");
    // Make sure the result page is empty
    resultsContainer.innerHTML = "";

    const fields = form.querySelectorAll("input:not([type=button]):not([type=submit]), select");

    // List out all data
    fields.forEach(field => {
        const fieldLabel = field.getAttribute("data-label");
        const fieldValue = field.value;
        const resultItem = document.createElement("li");
        resultItem.setAttribute("class", "fw__result__item");
        resultItem.innerHTML = '<span class="fw__result__label">' + fieldLabel + ':</span> <strong class="fw__result__value">' + fieldValue + '</strong>';

        resultsContainer.append(resultItem);
    });
    }

    init();

</script>