How to store values in JavaScript object using multi step form?

Viewed 19

I am using multi step wizard jquery form. I have four steps each having next button which is triggered using onClick event listener.

First step have input fields: age, height & weight

Second step has input field: exercise

Here's the code I am using:

     jQuery(document).on('click', '.next-step', function() {
        var currentstep = parseInt(jQuery(this).attr('data-step'));
        var nextstap = currentstep + 1;
        var age = jQuery('#ageYears').val();
        var weight = jQuery('#weightKgPound').val();
        var height = jQuery('#heightCmMeter').val();
        var height = jQuery('#heightCmMeter').val();
        var exercise = jQuery('input:radio[name=practice-sport]:checked').val();
        // console.log(age, weight, height);
        jQuery('.wizard-stape-cart').hide();
        jQuery('#wizard_stape_' + nextstap).show();
        jQuery('.pSteps[ data-tab-id="' + currentstep + '"]').addClass("completeStep");
        jQuery('.pSteps[ data-tab-id="' + nextstap + '"]').addClass("activeStep");
        jQuery('.pSteps[ data-tab-id="' + currentstep + '"]').removeClass("activeStep");
        jQuery('html, body').animate({
            scrollTop: jQuery("body").offset().top
        }, 1200);

        switch(currentstep) {
            case 1:
                var measurements = {
                    age: age,
                    weight: weight,
                    height: height
                };
            break;
            case 2:
                var practice_sport = {
                    exercise: exercise
                };
            break;
            default:
            console.log(currentstep);
        }

        userDetails(measurements, practice_sport);
    });

    function userDetails(measurements, practice_sport) {
        var userDetails = {
            measurements,
            practice_sport
        };
        console.log(userDetails);
    }

Clicking the first step shows in the console as:

measurements: {age: '50', weight: '80', height: '178'}
practice_sport: undefined

Clicking the second step shows in the console as:

measurements: undefined
practice_sport: {exercise: 'on'}

I want the result while clicking each next step button as:

measurements: {age: '50', weight: '80', height: '178'}
practice_sport: {exercise: 'on'}

Any suggestions or help ?

0 Answers
Related