script_msg.js 6.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229
  1. //jQuery time
  2. var current_fs, next_fs, previous_fs; //fieldsets
  3. var left, opacity, scale; //fieldset properties which we will animate
  4. var animating; //flag to prevent quick multi-click glitches
  5. $(".next").click(function(){
  6. if( !validate() ){
  7. return false;
  8. }
  9. name_title = $('.title_new').val();
  10. txtARR=[];
  11. imgARR=[];
  12. var step;
  13. for (step = 1; step <= 10; step++) {
  14. if($(".txtsrc"+step).val()!=""){
  15. txtARR.push($(".txtsrc"+step).val())
  16. }
  17. }
  18. var step2;
  19. for (step2 = 1; step2 <= 10; step2++) {
  20. if($(".imgsrc"+step2).val()!=""){
  21. imgARR.push($(".imgsrc"+step2).val())
  22. }
  23. }
  24. dataOBJ = {"name":name_title,"text_content":txtARR,"image_urls":imgARR}
  25. objstr = JSON.stringify(dataOBJ);
  26. obj2 = JSON.parse(objstr)
  27. obj3 = JSON.stringify(obj2)
  28. console.log(txtARR);
  29. console.log(obj3);
  30. $.ajax({
  31. url: 'http://www.choozmo.com:8888/make_anchor_video_v2',
  32. //url: 'http://www.choozmo.com:8888/qqreq',
  33. dataType : 'json', // 預期從server接收的資料型態
  34. contentType : 'application/json; charset=utf-8', // 要送到server的資料型態
  35. type: 'post',
  36. data: obj3,
  37. success: function(suc_data) {
  38. //console.log(suc_data)
  39. //window.location.replace(suc_data);
  40. //showThankyou();
  41. },
  42. //data:JSON.stringify({n1:"12",n2:"22"}),
  43. error: function (error) {
  44. console.error(error)
  45. }
  46. });
  47. if(animating) return false;
  48. animating = true;
  49. current_fs = $(this).parent();
  50. next_fs = $(this).parent().next();
  51. $("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");
  52. //show the next fieldset
  53. next_fs.show();
  54. //hide the current fieldset with style
  55. current_fs.animate({opacity: 0}, {
  56. step: function(now, mx) {
  57. //as the opacity of current_fs reduces to 0 - stored in "now"
  58. //1. scale current_fs down to 80%
  59. scale = 1 - (1 - now) * 0.2;
  60. //2. bring next_fs from the right(50%)
  61. left = (now * 50)+"%";
  62. //3. increase opacity of next_fs to 1 as it moves in
  63. opacity = 1 - now;
  64. current_fs.css({
  65. 'transform': 'scale('+scale+')',
  66. 'position': 'absolute'
  67. });
  68. next_fs.css({'left': left, 'opacity': opacity});
  69. },
  70. duration: 800,
  71. complete: function(){
  72. current_fs.hide();
  73. animating = false;
  74. },
  75. //this comes from the custom easing plugin
  76. easing: 'easeInOutBack'
  77. });
  78. });
  79. $(".previous").click(function(){
  80. if(animating) return false;
  81. animating = true;
  82. current_fs = $(this).parent();
  83. previous_fs = $(this).parent().prev();
  84. //de-activate current step on progressbar
  85. $("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");
  86. //show the previous fieldset
  87. previous_fs.show();
  88. //hide the current fieldset with style
  89. current_fs.animate({opacity: 0}, {
  90. step: function(now, mx) {
  91. //as the opacity of current_fs reduces to 0 - stored in "now"
  92. //1. scale previous_fs from 80% to 100%
  93. scale = 0.8 + (1 - now) * 0.2;
  94. //2. take current_fs to the right(50%) - from 0%
  95. left = ((1-now) * 50)+"%";
  96. //3. increase opacity of previous_fs to 1 as it moves in
  97. opacity = 1 - now;
  98. current_fs.css({'left': left});
  99. previous_fs.css({'transform': 'scale('+scale+')', 'opacity': opacity});
  100. },
  101. duration: 800,
  102. complete: function(){
  103. current_fs.hide();
  104. animating = false;
  105. },
  106. //this comes from the custom easing plugin
  107. easing: 'easeInOutBack'
  108. });
  109. });
  110. $("input[name=submit]").click(function(){
  111. let stop;
  112. console.log($("#msform").serialize());
  113. if( $('input[name="q9"]:visible').val() !== undefined && !$('input[name="q9"]:visible').prop('checked') ) {
  114. stop = 1;
  115. $('#term-error').text('必須同意免責聲明與隱私使用政策');
  116. }else {
  117. stop = 0;
  118. $('#term-error').text('');
  119. }
  120. if(stop == 0) {
  121. /* $.ajax({
  122. url: '/step_questions/submit',
  123. type: 'post',
  124. dataType: 'json',
  125. data: $("#msform").serialize(),
  126. success: function(data) {
  127. showThankyou();
  128. },
  129. error: function (error) {
  130. console.error(error)
  131. }
  132. }); */
  133. showThankyou();
  134. }
  135. });
  136. // 依據管道導頁
  137. function showThankyou() {
  138. document.location = '/a1/index_complete_msg.html';
  139. // document.location = '/a1/index_complete_line.html';
  140. }
  141. // 跳離頁面
  142. $('.btn-exit').click(function() {
  143. document.location = 'https://hhh.com.tw/';
  144. })
  145. $('.btn-term-exit').click(function () {
  146. self.opener = null;
  147. self.close();
  148. })
  149. function show_input_text(checkbox_id, input_id) {
  150. var checkBox = document.getElementById(checkbox_id);
  151. var inp = document.getElementById(input_id);
  152. if (checkBox.checked == true){
  153. inp.style.display = "block";
  154. } else {
  155. inp.style.display = "none";
  156. }
  157. }
  158. function validate() {
  159. function q2_validate() {
  160. let phoneno = /^\d{10}$/;
  161. if( $('input[name="q2"]:visible').val() !== undefined && $('input[name="q2"]:visible').val().length <= 0) {
  162. $('input[name="q2"]:visible').addClass('error');
  163. if( !$('.error-text').length )
  164. $('input.error').after('<p class="error-text">請輸入正確手機號碼</p>');
  165. return false;
  166. } else if($('input[name="q2"]:visible').val() !== undefined && !phoneno.test($('input[name="q2"]:visible').val())){
  167. $('input[name="q2"]:visible').addClass('error');
  168. if( !$('.error-text').length )
  169. $('input.error').after('<p class="error-text">請輸入正確手機號碼</p>');
  170. return false;
  171. }else {
  172. $('input[name="q2"]:visible').removeClass('error');
  173. $('.error-text').remove();
  174. return true;
  175. }
  176. }
  177. function q3_validate() {
  178. 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,}))$/;
  179. if( $('input[name="q3"]:visible').val() !== undefined && $('input[name="q3"]:visible').val().length <= 0) {
  180. $('input[name="q3"]:visible').addClass('error');
  181. if( !$('.error-text').length )
  182. $('input.error').after('<p class="error-text">請輸入E-mail</p>');
  183. return false;
  184. } else if ( $('input[name="q3"]:visible').val() !== undefined && !emailPattern.test($('input[name="q3"]:visible').val()) ){
  185. $('input[name="q3"]:visible').addClass('error');
  186. if( !$('.error-text').length )
  187. $('input.error').after('<p class="error-text">請輸入正確email格式</p>');
  188. return false;
  189. }
  190. else {
  191. $('input[name="q3"]:visible').removeClass('error');
  192. $('.error-text').remove();
  193. return true;
  194. }
  195. }
  196. function q4_validate() {
  197. if( $('input[name="q4"]:visible').val() !== undefined && $('input[name="q4"]:visible').val().length <= 0 ) {
  198. $('input[name="q4"]:visible').addClass('error');
  199. if( !$('.error-text').length )
  200. $('input.error').after('<p class="error-text">請輸入建案名稱</p>');
  201. return false;
  202. }
  203. else {
  204. $('input[name="q4"]:visible').removeClass('error');
  205. $('.error-text').remove();
  206. return true;
  207. }
  208. }
  209. return q2_validate() && q3_validate() && q4_validate();
  210. }