|
|
@@ -0,0 +1,192 @@
|
|
|
+//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() {
|
|
|
+ document.location = '/a1/index_complete_msg.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();
|
|
|
+}
|
huaisianhuang