表單功能修正

goto.js

@@ -175,12 +175,12 @@ $("#card-box").slick({
 
   });
 
+  // 電腦版表單
 
   $.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) {
@@ -237,6 +237,67 @@ $("#card-box").slick({
     return false;
   });
 
+  // 手機板表單
+  $.fn.serializeObject = function () {
+    var o = {};
+    var a = this.serializeArray();
+    
+    $.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-form2").submit(function (e) {
+    /*	var formRef = $('#form1').serializeArray();
+      var jsonString = JSON.stringify(formRef);*/
+    var jsonInfo = $('.contact-form2').serializeObject();
+    var jsonString = JSON.stringify(jsonInfo);
+    console.log(jsonString),
+      $.ajax({
+        type: 'POST',
+        url: 'https://go.hhh.com.tw:8005/add_client_info',
+        data: jsonString,
+        dataType: 'json',
+
+
+        success: function (data) {
+          console.log('送出成功: ' + data);
+          alert("送出成功");
+          // if (data == 0) {
+          //   alert("送出成功");
+          // } else if (data == 1) {
+          //   alert("此email已填過表單");
+          // } else if (data == 2) {
+          //   alert("此phone已填過表單");
+          // } else if (data == 3) {
+          //   alert("此email、phone已填過表單");
+          // }
+          location.reload();
+        },
+        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;
+  });
+
   $(function () {
 
     $(".box1").hover(

index.html

@@ -770,8 +770,7 @@
                         <option class="option">非室內設計師</option>
                         <option class="option">其他</option>
                     </select>
-                    <input type="text" id="phone" name="phone" placeholder="連絡電話(必填, 詳答)" pattern="09\d{2}\d{6}"
-                        required>
+                    <input type="text" id="phone" name="phone" placeholder="連絡電話(必填, 詳答)" pattern="09\d{2}\d{6}" required>
                     <input type="email" id="email" name="email" placeholder="聯絡email(必填, 詳答)" required>
                     <input type="text" id="pay" name="cert_last5" placeholder="已匯款, 後五碼是(選填, 詳答)">
                     <textarea name="where_learn" id="message" cols="50" rows="3"
@@ -823,7 +822,7 @@
 
         <div id="mobile-form" class="container-fluid" style="padding:0;margin: 0; ">
             <div id="form-card" class="row">
-                <form class="contact-form col-md-6">
+                <form class="contact-form2 col-md-6">
                     <input type="text" id="name" name="name" placeholder="姓名(必填, 詳答)" required>
                     <input type="text" id="company" name="organization" placeholder="公司名稱(必填, 詳答)">
                     <select name="position" id="profession">

style.css

@@ -1857,8 +1857,8 @@ body #btn-a #mobile-btn {
   margin: 0 auto;
 }
 
-#information-mobile #mobile-form #form-card .contact-form #name,
-#information-mobile #mobile-form #form-card .contact-form #company {
+#information-mobile #mobile-form #form-card .contact-form2 #name,
+#information-mobile #mobile-form #form-card .contact-form2 #company {
   width: 49.5%;
   padding: 10px 15px;
   font-size: 16px;
@@ -1868,18 +1868,18 @@ body #btn-a #mobile-btn {
 }
 
 @media screen and (max-width: 1024px) {
-  #information-mobile #mobile-form #form-card .contact-form #name,
-  #information-mobile #mobile-form #form-card .contact-form #company {
+  #information-mobile #mobile-form #form-card .contact-form2 #name,
+  #information-mobile #mobile-form #form-card .contact-form2 #company {
     width: 100%;
   }
 }
 
-#information-mobile #mobile-form #form-card .contact-form #phone,
-#information-mobile #mobile-form #form-card .contact-form #email,
-#information-mobile #mobile-form #form-card .contact-form #pay,
-#information-mobile #mobile-form #form-card .contact-form #message,
-#information-mobile #mobile-form #form-card .contact-form #message1,
-#information-mobile #mobile-form #form-card .contact-form #profession {
+#information-mobile #mobile-form #form-card .contact-form2 #phone,
+#information-mobile #mobile-form #form-card .contact-form2 #email,
+#information-mobile #mobile-form #form-card .contact-form2 #pay,
+#information-mobile #mobile-form #form-card .contact-form2 #message,
+#information-mobile #mobile-form #form-card .contact-form2 #message1,
+#information-mobile #mobile-form #form-card .contact-form2 #profession {
   width: 100%;
   padding: 10px 15px;
   font-size: 16px;
@@ -1888,7 +1888,7 @@ body #btn-a #mobile-btn {
   border: 1px solid rgba(0, 0, 0, 0.3);
 }
 
-#information-mobile #mobile-form #form-card .contact-form .btn {
+#information-mobile #mobile-form #form-card .contact-form2 .btn {
   margin-top: 3vw;
   width: 55vw;
   border-radius: 30px;

style.scss

@@ -1246,7 +1246,7 @@ body {
         #form-card {
             width: 90vw;
             margin: 0 auto;
-            .contact-form {
+            .contact-form2{
                 #name,
                 #company {
                     width: 49.5%;