頁面修正表單功能新增

desktopB/goto.js

@@ -4,6 +4,105 @@ $(".banner-slider").slick({
     arrows: false,
   });
 
+  $.fn.serializeObject = function () {
+    var o = {};
+    var a = this.serializeArray();
+    o["id"] = 0;
+    o["time_stamp"] = "";
+    $.each(a, function () {
+      if (o[this.name]) {
+        if (!o[this.name].push) {
+          o[this.name] = [o[this.name]];
+        }
+        o[this.name].push(this.value || '');
+      } else {
+        o[this.name] = this.value || '';
+      }
+    });
+  
+    return o;
+  };
+
+  $(".contact-form1").submit(function (e) {
+    /*	var formRef = $('#form1').serializeArray();
+      var jsonString = JSON.stringify(formRef);*/
+    var jsonInfo = $('.contact-form1').serializeObject();
+    var jsonString = JSON.stringify(jsonInfo);
+    // email 格式檢查
+    $(document).ready(function () {
+  
+      //E-MAIL格式檢查
+  
+      $("body").on("change", "#email", function () {
+  
+        $Emailchecking = IsEmail($("#email").val());
+  
+  
+        if ($Emailchecking == false) {
+  
+          alert("請填寫正確的E-MAIL格式");
+  
+          // $("#email").blur(); //離開焦點
+  
+        }
+  
+      })
+  
+      function IsEmail(email) {
+  
+        var regex = /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
+  
+        if (!regex.test(email)) {
+  
+          return false;
+  
+        } else {
+  
+          return true;
+  
+        }
+  
+      }
+  
+    });
+   
+  
+    
+  
+  
+  
+    $.ajax({
+      type: 'POST',
+      url: 'https://go.hhh.com.tw:8001/deco_request_detail',
+      data: jsonString,
+      dataType: 'json',
+      success: function (data) {
+        console.log('送出成功: ' + data);
+        if (data == 0) {
+          alert("送出成功");
+        } else if (data == 1) {
+          alert("此email已填過表單");
+        } else if (data == 2) {
+          alert("此phone已填過表單");
+        } else if (data == 3) {
+          alert("此email、phone已填過表單");
+        }
+      },
+      beforeSend: function () {
+        console.log('beforeSend');
+      },
+      complete: function () {
+        console.log('complete');
+      },
+      error: function (jqXHR, textStatus, errorThrown) {
+        console.log(JSON.stringify(jqXHR));
+        console.log("AJAX errr: " + textStatus + ' : ' + errorThrown);
+        console.log('送出失敗: ' + jqXHR.responseText);
+      }
+    });
+    return false;
+  });
+
   $("*").each(function (index, element) {
     // 此元素被點選後執行
     $(this).click(function (e) {

desktopB/index.html

@@ -275,37 +275,37 @@
             <h1 class="title">客戶真實見證</h1>
             <div id="feedback-box">
                 <div class="box">
-                    <img src="./img/feedback-img/feedback01.webp" alt="">
+                    <a href="https://hhh.com.tw/video-post.php?id=2905"><img src="./img/feedback-img/feedback01.webp" alt=""></a>
                     <p>嚮往人文接觸處的溫度-文響</p>
                     <a href="https://hhh.com.tw/video-post.php?id=2905"><img class="play"
                             style="width: 3vw;height: 3vw  " src="./img/play (1).png" alt=""></a>
                 </div>
                 <div class="box">
-                    <img src="./img/feedback-img/feedback02.webp" alt="">
+                    <a href="https://hhh.com.tw/video-post.php?id=3782"><img src="./img/feedback-img/feedback02.webp" alt=""></a>
                     <p>緞帶般曲線 譜出家的律動與甜蜜</p>
                     <a href="https://hhh.com.tw/video-post.php?id=3782"><img class="play"
                             style="width: 3vw;height: 3vw  " src="./img/play (1).png" alt=""></a>
                 </div>
                 <div class="box">
-                    <img src="./img/feedback-img/feedback03.webp" alt="">
+                    <a href="https://hhh.com.tw/video-post.php?id=3549"><img src="./img/feedback-img/feedback03.webp" alt=""></a>
                     <p>系統設計的變革 前衛科技宅</p>
                     <a href="https://hhh.com.tw/video-post.php?id=3549"><img class="play"
                             style="width: 3vw;height: 3vw  " src="./img/play (1).png" alt=""></a>
                 </div>
                 <div class="box">
-                    <img src="./img/feedback-img/feedback0411.webp" alt="">
+                    <a href="https://hhh.com.tw/video-post.php?id=2985"><img src="./img/feedback-img/feedback0411.webp" alt=""></a>
                     <p>用系統設計 實現歐洲皇室城堡夢</p>
                     <a href="https://hhh.com.tw/video-post.php?id=2985"><img class="play"
                             style="width: 3vw;height: 3vw  " src="./img/play (1).png" alt=""></a>
                 </div>
                 <div class="box">
-                    <img src="./img/feedback-img/feedback05.webp" alt="">
+                    <a href="https://hhh.com.tw/video-post.php?id=2122"><img src="./img/feedback-img/feedback05.webp" alt=""></a>
                     <p>不良格局變身 3米6日光鄉村宅</p>
                     <a href="https://hhh.com.tw/video-post.php?id=2122"><img class="play"
                             style="width: 3vw;height: 3vw  " src="./img/play (1).png" alt=""></a>
                 </div>
                 <div class="box">
-                    <img src="./img/feedback-img/feedback06.webp" alt="">
+                    <a href="https://hhh.com.tw/video-post.php?id=3847"><img src="./img/feedback-img/feedback06.webp" alt=""></a>
                     <p>雙拼豪宅古典、日式一次擁有</p>
                     <a href="https://hhh.com.tw/video-post.php?id=3847"><img class="play"
                             style="width: 3vw;height: 3vw  " src="./img/play (1).png" alt=""></a>

desktopB/style.css

@@ -294,7 +294,7 @@ body .arrow {
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
-  background: url(./img/icondown.webp) 95% 50% no-repeat scroll transparent;
+  background: url(./img/icondown1.webp) 95% 50% no-repeat scroll transparent;
   background-size: 10px 10px;
   background-color: #fff;
 }
@@ -318,7 +318,7 @@ body .arrow {
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
-  background: url(./img/icondown.webp) 85% 50% no-repeat scroll transparent;
+  background: url(./img/icondown1.webp) 85% 50% no-repeat scroll transparent;
   background-size: 10px 10px;
   background-color: #fff;
 }

desktopB/style.scss

@@ -256,7 +256,7 @@ body {
             font-size: 16px;
             border-radius: 3px;
             appearance: none;
-            background: url(./img/icondown.webp) 95% 50% no-repeat scroll transparent;
+            background: url(./img/icondown1.webp) 95% 50% no-repeat scroll transparent;
             background-size: 10px 10px;
             background-color: #fff;
         }
@@ -276,7 +276,7 @@ body {
                 font-size: 16px;
                 border-radius: 3px;
                 appearance: none;
-                background: url(./img/icondown.webp) 85% 50% no-repeat scroll transparent;
+                background: url(./img/icondown1.webp) 85% 50% no-repeat scroll transparent;
                 background-size: 10px 10px;
                 background-color: #fff;
             }

mobileB/goto.js

@@ -11,6 +11,104 @@ $(".feedback-slider1").slick({
     speed: 1000,
     swipe: true,
   });
+
+  $.fn.serializeObject = function () {
+    var o = {};
+    var a = this.serializeArray();
+    o["id"] = 0;
+    o["time_stamp"] = "";
+    $.each(a, function () {
+      if (o[this.name]) {
+        if (!o[this.name].push) {
+          o[this.name] = [o[this.name]];
+        }
+        o[this.name].push(this.value || '');
+      } else {
+        o[this.name] = this.value || '';
+      }
+    });
+  
+    return o;
+  };
+  $(".contact-form1").submit(function (e) {
+    /*	var formRef = $('#form1').serializeArray();
+      var jsonString = JSON.stringify(formRef);*/
+    var jsonInfo = $('.contact-form1').serializeObject();
+    var jsonString = JSON.stringify(jsonInfo);
+    // email 格式檢查
+    $(document).ready(function () {
+  
+      //E-MAIL格式檢查
+  
+      $("body").on("change", "#email", function () {
+  
+        $Emailchecking = IsEmail($("#email").val());
+  
+  
+        if ($Emailchecking == false) {
+  
+          alert("請填寫正確的E-MAIL格式");
+  
+          // $("#email").blur(); //離開焦點
+  
+        }
+  
+      })
+  
+      function IsEmail(email) {
+  
+        var regex = /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
+  
+        if (!regex.test(email)) {
+  
+          return false;
+  
+        } else {
+  
+          return true;
+  
+        }
+  
+      }
+  
+    });
+   
+  
+    
+  
+  
+  
+    $.ajax({
+      type: 'POST',
+      url: 'https://go.hhh.com.tw:8001/deco_request_detail',
+      data: jsonString,
+      dataType: 'json',
+      success: function (data) {
+        console.log('送出成功: ' + data);
+        if (data == 0) {
+          alert("送出成功");
+        } else if (data == 1) {
+          alert("此email已填過表單");
+        } else if (data == 2) {
+          alert("此phone已填過表單");
+        } else if (data == 3) {
+          alert("此email、phone已填過表單");
+        }
+      },
+      beforeSend: function () {
+        console.log('beforeSend');
+      },
+      complete: function () {
+        console.log('complete');
+      },
+      error: function (jqXHR, textStatus, errorThrown) {
+        console.log(JSON.stringify(jqXHR));
+        console.log("AJAX errr: " + textStatus + ' : ' + errorThrown);
+        console.log('送出失敗: ' + jqXHR.responseText);
+      }
+    });
+    return false;
+  });
   $("*").each(function (index, element) {
     // 此元素被點選後執行
     $(this).click(function (e) {

mobileB/index.html

@@ -254,7 +254,7 @@
                     <option class="option" value="type">工業風</option>
                     <option class="option" value="type">異國風</option>
                 </select>
-                <input name="prefer_date" type="date" id="date" placeholder="預選裝修日期" required>
+                <input name="prefer_date" type="date" id="date" required>
                 <div id="facebook">
                     <img src="./img/logo/facebook.webp" alt="">
                     <p>使用FB填入信箱與姓名 </p>
@@ -279,37 +279,37 @@
         <h1 class="title">客戶真實見證</h1>
         <div class="feedback-slider1">
             <div class="box">
-                <img src="./img/feedback/feedback01.webp" alt="">
+                <a href="https://hhh.com.tw/video-post.php?id=2905"><img src="./img/feedback/feedback01.webp" alt=""></a>
                 <p>嚮往仁文街處的溫度-文響</p>
                 <a href="https://hhh.com.tw/video-post.php?id=2905"><img class="play" src="./img/play (1).png"
                         alt=""></a>
             </div>
             <div class="box">
-                <img src="./img/feedback/feedback02.webp" alt="">
+                <a href="https://hhh.com.tw/video-post.php?id=3782"><img src="./img/feedback/feedback02.webp" alt=""></a>
                 <p>緞帶般曲線 譜出家的律動與甜蜜</p>
                 <a href="https://hhh.com.tw/video-post.php?id=3782"><img class="play" src="./img/play (1).png"
                         alt=""></a>
             </div>
             <div class="box">
-                <img src="./img/feedback/feedback03.webp" alt="">
+                <a href="https://hhh.com.tw/video-post.php?id=3549"><img src="./img/feedback/feedback03.webp" alt=""></a>
                 <p>系統設計的變革 前衛科技宅</p>
                 <a href="https://hhh.com.tw/video-post.php?id=3549"><img class="play" src="./img/play (1).png"
                         alt=""></a>
             </div>
             <div class="box">
-                <img src="./img/feedback/feedback04.webp" alt="">
+                <a href="https://hhh.com.tw/video-post.php?id=2985"><img src="./img/feedback/feedback04.webp" alt=""></a>
                 <p>用系統設計 實現歐洲皇室城堡夢</p>
                 <a href="https://hhh.com.tw/video-post.php?id=2985"><img class="play" src="./img/play (1).png"
                         alt=""></a>
             </div>
             <div class="box">
-                <img src="./img/feedback/feedback05.webp" alt="">
+                <a href="https://hhh.com.tw/video-post.php?id=2122"><img src="./img/feedback/feedback05.webp" alt=""></a>
                 <p>不良格局變身 3米6日光鄉村宅</p>
                 <a href="https://hhh.com.tw/video-post.php?id=2122"><img class="play" src="./img/play (1).png"
                         alt=""></a>
             </div>
             <div class="box">
-                <img src="./img/feedback/feedback06.webp" alt="">
+                <a href="https://hhh.com.tw/video-post.php?id=3847"><img src="./img/feedback/feedback06.webp" alt=""></a>
                 <p>雙拼豪宅古典、日式一次擁有</p>
                 <a href="https://hhh.com.tw/video-post.php?id=3847"><img class="play" src="./img/play (1).png"
                         alt=""></a>

mobileB/style.css

@@ -416,7 +416,7 @@ body .btn-main:hover {
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
-  background: url(./img/icondown.webp) 95% 50% no-repeat scroll transparent;
+  background: url(./img/icondown1.webp) 95% 50% no-repeat scroll transparent;
   background-size: 10px 10px;
   background-color: #fff;
 }

mobileB/style.scss

@@ -300,7 +300,7 @@ body {
             border: 1px solid rgba(0, 0, 0, 0.3);
             font-size: 18px;
             appearance: none;
-            background: url(./img/icondown.webp) 95% 50% no-repeat scroll transparent;
+            background: url(./img/icondown1.webp) 95% 50% no-repeat scroll transparent;
             background-size: 10px 10px;
             background-color: #fff;
         }