<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <h2>my form contact</h2> <p id="errornull" class="text-danger"></p> <form class="mt-2" method="" id="contactback" action=""> <div class="form-group "> <div class="form-group"> <input type="text" class="form-control" id="ctnamedk" name="ctname" placeholder="ชื่อผู้ติดต่อ" autocomplete="off" required> </div> <div class="form-group"> <input type="email" class="form-control" id="ctemaildk" name="ctemail" placeholder="อีเมล" autocomplete="off" required> <p id="errmail_box" class="text-danger"></p> </div> <div class="form-group"> <input type="numbers" class="form-control" id="ctphonedk" name="ctphone" placeholder="เบอร์โทรศัพท์" autocomplete="off" onkeyup="autoTab(this)" maxlength="12" required> <p id="errnumonly" class="text-danger"></p> </div> <div class="form-group"> <textarea rows="4" cols="50" class="form-control" id="cttopicdk" name="cttopic" placeholder="เรื่องที่ต้องการสอบถาม" autocomplete="off" required></textarea> </div> <div class="form-group"> <button type="button" id="btnSendmail" name="button" class="btn btn-warning text-white">ให้เราติดต่อกลับ</button> </div> </div> </form> </div> </div>

$(document).ready(function() { $("#btnSendmail").click(function() { var cfrm = $("#contactback").serialize(); var ipnamedk = $("#ctnamedk").val(); var ipemaildk = $("#ctemaildk").val(); var ipphonedk = $("#ctphonedk").val(); var iptopicdk = $("#ctphonedk").val(); if (!ipnamedk || !ipemaildk || !ipphonedk || !iptopicdk) { $("p#errornull").html("กรุณากรอกข้อมูล").show().fadeOut(5000); } else { if (!isEmail(ipemaildk)) { $("p#errmail_box").html("อีเมลไม่ถูกต้อง").show().fadeOut(5000); } else { //$("#showspinner").modal('show'); $.ajax({ type: "POST", url: "sendmail", data: cfrm, beforeSend: function() { $("#showspinner").modal('show'); // $('#showspinner').modal({backdrop: 'static', keyboard: false}) }, success: function(result) { if (result) { setTimeout(function() { $("#showspinner").modal('hide'); }, 1800); setTimeout(function() { $("p#contentsuccess").html("ได้รับข้อมูลของท่านแล้ว"); $('#showsendsuccess').modal('show'); }, 2000); setTimeout(function() { $('#showsendsuccess').modal('hide'); $('p#errnumonly').hide(); }, 2400); setTimeout(function() { location.reload() }, 3000); $('#contactback').trigger("reset") }else { $("p#contentsuccess").html("ไม่สามารถทำรายการได้"); $('#showsendsuccess').modal('show'); setTimeout(function() { $('#showsendsuccess').modal('hide'); $('p#errnumonly').hide(); }, 3000); } } }) } } }); function isEmail(email) { var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/; return regex.test(email) } }); $(document).ready(function () { //called when key is pressed in textbox $("#ctphonedk").keypress(function (e) { //if the letter is not digit then display error and don't type anything if (e.which != 8 && e.which != 0 && String.fromCharCode(e.which) != '-' && (e.which < 48 || e.which > 57)) { //display error message $("#errnumonly").html("กรุณากรอกเป็นตัวเลข").show().fadeOut(2000); return false; } }); }); function autoTab(obj){ var pattern=new String("__-____-____"); // กำหนดรูปแบบในนี้ var pattern_ex=new String("-"); // กำหนดสัญลักษณ์หรือเครื่องหมายที่ใช้แบ่งในนี้ var returnText=new String(""); var obj_l=obj.value.length; var obj_l2=obj_l-1; for(i=0;i<pattern.length;i++){ if(obj_l2==i && pattern.charAt(i+1)==pattern_ex){ returnText+=obj.value+pattern_ex; obj.value=returnText; } } if(obj_l>=pattern.length){ obj.value=obj.value.substr(0,pattern.length); } }