문의하기

html/index.html

@@ -32,6 +32,8 @@
 <script src="js/swiper.js"></script>
 <script src="js/swiper.min.js"></script>
 <script src="js/swiper-bundle.js"></script>
+<!-- 이메일 전송 라이브러리 -->
+<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@emailjs/browser@3/dist/email.min.js"></script>
 
 <title>PAL Networks</title>
 
@@ -659,6 +661,94 @@ body,html{
 
 <footer id="footer" class=""></footer>
 <!--//footer-->
+<script>
+  // onload
+  (function () {
+    var id = '8qhK01665Wbh5q4Oz';
+    // 이메일 라이브러리 초기화
+    emailjs.init(id);
+    // 문의하기 버튼 클릭 이벤트
+    $('#btnSubmit').click(function (e) {
+      e.preventDefault();
+      var data = getFormData();
+      if (!validation(data)) return;
+      sendEmail(data);
+    });
+
+    // 취소하기 버튼 클릭 이벤트
+    $('#btnCancel').click(function (e) {
+      e.preventDefault();
+      if (!confirm('입력하신내용을 삭제하시겠습니까?')) return;
+      $('#formMsg')[0].reset();
+    });
+
+    function sendEmail(params) {
+      emailjs.send('palnet_service', 'palnet_template', params, id)
+        .then(function (res) {
+          console.log(res)
+          alert('정상적으로 문의가 되었습니다.\n입력하신 이메일로 회신드립니다.');
+          $('#formMsg')[0].reset();
+        }, function (err) {
+          console.log(err)
+          alert('알수없는 오류로 실패되었습니다.');
+        });
+    }
+  })();
+
+  // form 데이터 가져오기(Object 형태)
+  function getFormData() {
+    // form data
+    var arr = $('#formMsg').serializeArray();
+    var r = {};
+    arr.forEach(function (obj, i) {
+      r[obj.name] = obj.value;
+    });
+    // add checkbox value
+    $('#formMsg input[type=checkbox]').map(function () {
+      r[this.name] = this.checked;
+    })
+    return r;
+  };
+
+  // 검증
+  function validation(data) {
+    if (!data) data = {};
+    // 약관 동의
+    if (data.agreePrivacy != true) {
+      alert('동의해주세요.')
+      return false;
+    }
+    // 필수값 검증
+    // 이름
+    if (!data.wrName) {
+      alert('이름을 입력해주세요.')
+      $('input[name=wrName]').focus();
+      return false;
+    }
+    // 이메일
+    console.log(data.wrEmail)
+    if (!data.wrEmail) {
+      alert('이메일을 입력해주세요.')
+      $('input[name=wrEmail]').focus();
+      return false;
+    }
+    // 내용
+    if (!data.wrTitle) {
+      alert('제목을 입력해주세요.')
+      $('textarea[name=wrTitle]').focus();
+      return false;
+    }
+    // 내용
+    if (!data.wrContent) {
+      alert('내용을 입력해주세요.')
+      $('textarea[name=wrContent]').focus();
+      return false;
+    }
+
+
+    return true;
+  };
+</script>
 </body>
 
 </html>

html/message.html

@@ -306,6 +306,7 @@
         .then(function (res) {
           console.log(res)
           alert('정상적으로 문의가 되었습니다.\n입력하신 이메일로 회신드립니다.');
+          $('#formMsg')[0].reset();
         }, function (err) {
           console.log(err)
           alert('알수없는 오류로 실패되었습니다.');