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 ?