bitwiser · August 29, 2015 13:56
diff --git a/html.html b/html.html
 <!doctype html>
 <html>
 	<head>
 		<title>BuzzButtons</title>
 		<style>
 		.error{
 			color: red;
 		}
 		</style>
 	</head>
 	<body>
 		<form id="mainForm" action="#">
 			<h2>BuzzButtons order form</h2>
 			<p>
 				<input placeholder="Name" type="text" id="name">
 				<span id="nameError" class="error"></span>
 			</p>
 			<p>
 				<input type="text" id="email" placeholder="Email">
 				<span id="emailError" class="error"></span>
 			</p>
 			<p>
 				<input type="text" id="btnNumber" placeholder="Number of buttons">
 				<span id="btnError" class="error"></span>
 			</p>
 			<input type="submit" value="Submit">
 			<div id="message">
 			</div>
 		</form>
 		<script>
 			function get(id){
 				return document.querySelector(id);
 			}
 			var frm = get("#mainForm");
 			frm.addEventListener("submit",processForm);
 			var em = get("#email");
 			var num = get("#btnNumber");
 			var nm = get("#name");
 			function isValidEmail(email) {
 				var reg = /^\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
 				if(reg.test(email))
 					return true;
 				return false;
 			}
 			function validateForm(){
 				var ok = true;
 				var nmError = get("#nameError");
 				var numError = get("#btnError");
 				var emError = get("#emailError");
 				nmError.innerHTML="";
 				numError.innerHTML="";
 				emError.innerHTML="";
 				if(nm.value==""){
 					ok=false;
 					nmError.innerHTML = 'Enter a valid number.';
 									}
 				if(typeof num.value=="number"){
 					ok = false;
 					numError.innerHTML = 'Enter a valid number.';
 				}
 				if(!isValidEmail(em.value)){
 					ok = false;
 					emError.innerHTML = 'Invalid email.';
 				}
 				return ok;
 			}
 			function processForm(e){
 				e.preventDefault();
 				var frm = get("#mainForm");
 				var msg = get("#message");
 				if(validateForm()){
 					var tot = 0.99*num.value*(1.06)+2.00
 					var ms = ""
 					ms += "<p>Name: "+nm.value+"</p>";
 					ms += "<p>Email: "+em.value+"</p>";
 					ms += "<p>Number of buttons required: "+num.value+"</p>";
 					ms += "<p>Price of buttons: $ "+num.value*(0.99)+"</p>";
 					ms += "<p>Sales tax: 6%</p>";
 					ms += "<p>Shipping amount: $2.00</p>";
 					ms += "<p>Total amount to be paid: $"+tot+"</p>";
 					msg.innerHTML = ms;

 				}else{
 					msg.innerHTML = '<p class="error">Invalid entry in form.</p>';
 				}
 				return false;
 			}
 		</script>
 	</body>
 </html>
	<!doctype html>
	<html>
	<head>
	<title>BuzzButtons</title>
	<style>
	.error{
	color: red;
	}
	</style>
	</head>
	<body>
	<form id="mainForm" action="#">
	<h2>BuzzButtons order form</h2>
	<p>
	<input placeholder="Name" type="text" id="name">
	<span id="nameError" class="error"></span>
	</p>
	<p>
	<input type="text" id="email" placeholder="Email">
	<span id="emailError" class="error"></span>
	</p>
	<p>
	<input type="text" id="btnNumber" placeholder="Number of buttons">
	<span id="btnError" class="error"></span>
	</p>
	<input type="submit" value="Submit">
	<div id="message">
	</div>
	</form>
	<script>
	function get(id){
	return document.querySelector(id);
	}
	var frm = get("#mainForm");
	frm.addEventListener("submit",processForm);
	var em = get("#email");
	var num = get("#btnNumber");
	var nm = get("#name");
	function isValidEmail(email) {
	var reg = /^\w+([-+.']\w+)@\w+([-.]\w+)\.\w+([-.]\w+)*$/;
	if(reg.test(email))
	return true;
	return false;
	}
	function validateForm(){
	var ok = true;
	var nmError = get("#nameError");
	var numError = get("#btnError");
	var emError = get("#emailError");
	nmError.innerHTML="";
	numError.innerHTML="";
	emError.innerHTML="";
	if(nm.value==""){
	ok=false;
	nmError.innerHTML = 'Enter a valid number.';
	}
	if(typeof num.value=="number"){
	ok = false;
	numError.innerHTML = 'Enter a valid number.';
	}
	if(!isValidEmail(em.value)){
	ok = false;
	emError.innerHTML = 'Invalid email.';
	}
	return ok;
	}
	function processForm(e){
	e.preventDefault();
	var frm = get("#mainForm");
	var msg = get("#message");
	if(validateForm()){
	var tot = 0.99num.value(1.06)+2.00
	var ms = ""
	ms += "<p>Name: "+nm.value+"</p>";
	ms += "<p>Email: "+em.value+"</p>";
	ms += "<p>Number of buttons required: "+num.value+"</p>";
	ms += "<p>Price of buttons: $ "+num.value*(0.99)+"</p>";
	ms += "<p>Sales tax: 6%</p>";
	ms += "<p>Shipping amount: $2.00</p>";
	ms += "<p>Total amount to be paid: $"+tot+"</p>";
	msg.innerHTML = ms;

	}else{
	msg.innerHTML = '<p class="error">Invalid entry in form.</p>';
	}
	return false;
	}
	</script>
	</body>
	</html>