一個簡單的詢盤表單，html+js程式碼
阿新 • • 發佈：2018-11-29
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{padding: 0;margin: 0;} #box{margin: 50px auto;width: 100px;} </style> </head> <body> <form id="contactForm"> <div class="form-group"> <div class="row"> <div class="col-md-6 col-lg-6"> <input id="name" type="text" required placeholder="Name*" required="required" class="form-control fix-mobile-margin"> </div> <div class="col-md-6 col-lg-6"> <input id="email" placeholder="Email*" type="email" required="required" class="form-control"> </div> </div> </div> <div class="form-group"> <textarea id="content" name="content" id="" cols="30" rows="5" data-text="text" data-field="sendPlaceHolder" placeholder="{$content.sendPlaceHolder}" required="required" class="form-control"></textarea> </div> <p class="sendStatus hide" data-text="text" data-field="waiting">{$content.waiting}</p > <button class="btn send-message" data-text="text" data-field="SEND">{$content.SEND} <i class="far fa-paper-plane"></i> </button> <div class="privacy"> <a href=" " data-text="text" data-field="PRIVACY">{$content.PRIVACY}</ a> </div> </form> <script> $("#contactForm").submit(function(e){//注意此處必須是form的id去執行submit e.preventDefault(); var data = {} var userName = $("#name").val(); var userEmail = $("#email").val(); var userSend = $("#content").val(); data.name = userName; data.email = userEmail; data.content = userSend; var parameter = JSON.stringify(data); $(".sendStatus").show(); $.ajax({ url: '/ajax/message', method: "POST", data: parameter, success: function(res) { $(".sendStatus").html("Thank you for your message"); setTimeout(function(){ $(".sendStatus").hide(); },2000); $("#name").val(""); $("#email").val(""); $("#content").val(""); } }); }); </script> </body> </html>