hhh_step_question/step_question/apis/static/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(){
	let stop;
	   console.log($("#msform").serialize());
	   
   	if( $('input[name="q9"]:visible').val() !== undefined && !$('input[name="q9"]:visible').prop('checked') ) {
		stop = 1;
		$('#term-error').text('必須同意免責聲明與隱私使用政策');
	}else {
		stop = 0;
		$('#term-error').text('');
	}
	if(stop == 0) {
		/* $.ajax({
			url: '/step_questions/submit',
			type: 'post',
			dataType: 'json',
			data: $("#msform").serialize(),
			success: function(data) {
			  showThankyou();
			},
			error: function (error) {
				console.error(error)
			}
		}); */
		showThankyou();
	}
});

// 依據管道導頁
function showThankyou() {
	axios.get('http://q.ptt.cx/coffee').then(res => {
		if(res.data.coffee == 1) {
			document.location = '/a1/index_complete_line.html';
		} else {
			document.location = '/a1/index_complete_line_after.html';
		}
	});
	// document.location = '/a1/index_complete_line.html';
}
// 跳離頁面
$('.btn-exit').click(function() {
	document.location = 'https://hhh.com.tw/';
})

$('.btn-term-exit').click(function () {
	self.opener = null;
	self.close();
})

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() { 
	let phoneno = /^\d{10}$/;
    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">請輸入正確手機號碼</p>');
      return false;
    } else if($('input[name="q2"]:visible').val() !== undefined && !phoneno.test($('input[name="q2"]:visible').val())){
		$('input[name="q2"]:visible').addClass('error');
      if( !$('.error-text').length )
          $('input.error').after('<p class="error-text">請輸入正確手機號碼</p>');
      return false;
	}else {
        $('input[name="q2"]:visible').removeClass('error');
        $('.error-text').remove();
        return true;
    }
  }

  function q3_validate() {
	  let emailPattern = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    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">請輸入E-mail</p>');
      return false;
    } else if ( $('input[name="q3"]:visible').val() !== undefined && !emailPattern.test($('input[name="q3"]:visible').val()) ){
		$('input[name="q3"]:visible').addClass('error');
      	if( !$('.error-text').length )
          $('input.error').after('<p class="error-text">請輸入正確email格式</p>');
      	return false;
	}
    else {
        $('input[name="q3"]:visible').removeClass('error');
        $('.error-text').remove();
        return true;
    }
  }

  function q4_validate() {
	  if( $('input[name="q4"]:visible').val() !== undefined && $('input[name="q4"]:visible').val().length <= 0 ) {
		$('input[name="q4"]:visible').addClass('error');
		if( !$('.error-text').length )
			$('input.error').after('<p class="error-text">請輸入建案名稱</p>');
		return false;
	  } 
	  else {
		$('input[name="q4"]:visible').removeClass('error');
        $('.error-text').remove();
        return true;
	  }
  }

  return q2_validate() && q3_validate() && q4_validate();
}