hhh_step_question/step_question/multi_steps/script.js

//jQuery time
var current_fs, next_fs, previous_fs; //fieldsets
var left, opacity, scale; //fieldset properties which we will animate
var animating; //flag to prevent quick multi-click glitches

$(".next").click(function(){
  if( !validate() ){
    return false;
  }

	if(animating) return false;
	animating = true;
	
	current_fs = $(this).parent();
	next_fs = $(this).parent().next();
	
	//activate next step on progressbar using the index of next_fs
	$("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");
	
	//show the next fieldset
	next_fs.show(); 
	//hide the current fieldset with style
	current_fs.animate({opacity: 0}, {
		step: function(now, mx) {
			//as the opacity of current_fs reduces to 0 - stored in "now"
			//1. scale current_fs down to 80%
			scale = 1 - (1 - now) * 0.2;
			//2. bring next_fs from the right(50%)
			left = (now * 50)+"%";
			//3. increase opacity of next_fs to 1 as it moves in
			opacity = 1 - now;
			current_fs.css({
        'transform': 'scale('+scale+')',
        'position': 'absolute'
      });
			next_fs.css({'left': left, 'opacity': opacity});
		}, 
		duration: 800, 
		complete: function(){
			current_fs.hide();
			animating = false;
		}, 
		//this comes from the custom easing plugin
		easing: 'easeInOutBack'
	});
});

$(".previous").click(function(){
	if(animating) return false;
	animating = true;
	
	current_fs = $(this).parent();
	previous_fs = $(this).parent().prev();
	
	//de-activate current step on progressbar
	$("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");
	
	//show the previous fieldset
	previous_fs.show(); 
	//hide the current fieldset with style
	current_fs.animate({opacity: 0}, {
		step: function(now, mx) {
			//as the opacity of current_fs reduces to 0 - stored in "now"
			//1. scale previous_fs from 80% to 100%
			scale = 0.8 + (1 - now) * 0.2;
			//2. take current_fs to the right(50%) - from 0%
			left = ((1-now) * 50)+"%";
			//3. increase opacity of previous_fs to 1 as it moves in
			opacity = 1 - now;
			current_fs.css({'left': left});
			previous_fs.css({'transform': 'scale('+scale+')', 'opacity': opacity});
		}, 
		duration: 800, 
		complete: function(){
			current_fs.hide();
			animating = false;
		}, 
		//this comes from the custom easing plugin
		easing: 'easeInOutBack'
	});
});

$("input[name=submit]").click(function(){
  console.log($("#msform").serialize());
  $.ajax({
    url: 'http://127.0.0.1:8000/step_questions/submit',
    type: 'post',
    dataType: 'json',
    data: $("#msform").serialize(),
    success: function(data) {
      showThankyou();
      }
  });
	return false;
})

function showThankyou() {
  $('#overlay').show();
}

function show_input_text(checkbox_id, input_id) {
	var checkBox = document.getElementById(checkbox_id);
	var inp = document.getElementById(input_id);
	if (checkBox.checked == true){
	  inp.style.display = "block";
	} else {
	  inp.style.display = "none";
	}
}

function validate() {
  function q2_validate() {
    if( $('input[name="q2"]:visible').val() !== undefined && $('input[name="q2"]:visible').val().length <= 0 ) {
      $('input[name="q2"]:visible').addClass('error');
      if( !$('.error-text').length )
          $('input.error').after('<p class="error-text">手機號碼 is Required</p>');
      return false;
    }
    else {
        $('input[name="q2"]:visible').removeClass('error');
        $('.error-text').remove();
        return true;
    }
  }

  function q3_validate() {
    if( $('input[name="q3"]:visible').val() !== undefined && $('input[name="q3"]:visible').val().length <= 0 ) {
      $('input[name="q3"]:visible').addClass('error');
      if( !$('.error-text').length )
          $('input.error').after('<p class="error-text">Email Field is Required</p>');
      return false;
    }
    else {
        $('input[name="q3"]:visible').removeClass('error');
        $('.error-text').remove();
        return true;
    }
  }

  return q2_validate() && q3_validate()
}