<!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>一个简单的询盘表单，html+js代码
猜你喜欢
转载自blog.csdn.net/qq_37815596/article/details/82894451
今日推荐
周排行