1. 程式人生 > >一個簡單的詢盤表單,html+js程式碼

一個簡單的詢盤表單,html+js程式碼

<!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>