<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Booking</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<style>
label em {
color: red;
}
input.red {
border: 1px solid red;
}
</style>
<script>
var validation ={
checkEmail: function(){
if($('#email').val() === $('#emailrepeat').val()){return true;} else{return false;}
},
returnPrice: function(){
//base price is 90$ for a room, 20$ per extra guest
return (90 + ($('#persons').val() * 20)) * $('#nights').val();
},
isValid: function(){
if(this.checkEmail()){
$("#run-script").append("new price is " + this.returnPrice() + "US<br />");} else {
alert("email is wrong");}
}
}
</script>
</head>
<body>
<!--[if lt IE 7]>
<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
<![endif]-->
<!-- Add your site or application content here -->
<form action="#run-script" id="run-script">
<fieldset>
<legend>Book Hotel Room</legend>
<dl>
<dt><label for="forename">Firstname:<span class="required"><em>*</em>
</span></label></dt><dd>
<input type ="text" id="forename" name="forename" value="" placeholder="Enter Firstname"
required="required" autofocus="autofocus" /></dd>
<dt><label for="surname">Lastname:<span class="required"
><em>*</em></span></label></dt>
<dd><input type ="text" id="surname" name="surname" value="" placeholder="Enter
Surname" required="required" /></dd>
<dt><label for="email">Email Adress: <span class="required">
<em>*</em></span></label></dt>
<dd><input type="email" name="email" id="email" placeholder="email@domain.com"
required class="required" /></dd>
<dt><label for="emailrepeat">Email Repeat: <span class="required"
><em>*</em></span></label></dt>
<dd><input type="email" name="emailrepeat" id="emailrepeat"
placeholder="email@domain.com" required class="required" /></dd>
<dt><label for="date">Enter Date: <span class="required"
><em>*</em></span></label></dt>
<dd><input type="date" name="date" required class="required" /></dd>
<dt><label for="nights">How many nights:
<span class="required"><em>*</em></span></label></dt>
<dd><input type="number" name="nights" id="nights" min="1" max="5" value="1" /></dd>
<dt><label for="persons">How many guests:
<span class="required"><em>*</em></span></label></dt>
<dd><input type="number" name="persons" id="persons" min="1" max="3" value="1" /></dd>
<input type="submit" value="Check Price">
<script>
$("#run-script").submit(function(e) {
validation.isValid();
e.preventDefault();
});
</script>
</dl>
</fieldset>
</form>
</body>
</html>
Like this:
Like Loading...
You really make it seem so easy along with your presentation however I to find this topic to be actually one thing that I believe I might by no means understand. It kind of feels too complicated and very broad for me. I am looking forward on your subsequent put up, I’ll attempt to get the hang of it!
LikeLike