Homework SourseSave a reservation in session storage In this exercise youll
Save a reservation in session storage.
In this exercise, you’ll edit the Javascript file to develop an application that stores data in session storage. The interface looks like this:
In the index.html file, note the coding for the form element. It uses the get method to submit the data to the response.html page. Also, at the bottom of the form element, a button element (not a submit button) is used for the button that submits the form.
In the response.html file, note that there is an embedded script tag within the main element in the body of the document, and it contains document.write methods that get the data that’s submitted from session storage. This is the page that’s called when the form is submitted.
In the JavaScript file, note that three functions are supplied. The $ function. The start of a saveReservation function that ends by submitting the form. And an onloadevent handler that attaches the saveReservation function to the click event of the Submit Reservation button and sets the focus on the first textbox on the page.
Run this application without entering any data and click the submit button to see how the response.html file will look when no data has been saved to session storage.
In the saveReservation function of the JavaScript file, get the values from the controls on the page and store them in session storage using the same key names as the response.html file uses. But don’t bother doing any data validation because that isn’t the point of this exercise.
index.html:
<!DOCTYPE html>
<html>
<head>
<title>Reservation request</title>
<link rel=\"stylesheet\" href=\"reservation.css\">
<script src=\"reservation.js\"></script>
</head>
<body>
<main>
<h1>Reservation Request</h1>
<form action=\"response.html\" method=\"get\"
name=\"reservation_form\" id=\"reservation_form\">
<fieldset>
<legend>General Information</legend>
<label for=\"arrival_date\">Arrival date:</label>
<input type=\"text\" name=\"arrival_date\" id=\"arrival_date\"><br>
<label for=\"nights\">Nights:</label>
<input type=\"text\" name=\"nights\" id=\"nights\"><br>
<label>Adults:</label>
<select name=\"adults\" id=\"adults\">
<option value=\"1\">1</option>
<option value=\"2\">2</option>
<option value=\"3\">3</option>
<option value=\"4\">4</option>
</select><br>
<label>Children:</label>
<select name=\"children\" id=\"children\">
<option value=\"0\">0</option>
<option value=\"1\">1</option>
<option value=\"2\">2</option>
<option value=\"3\">3</option>
<option value=\"4\">4</option>
</select><br>
</fieldset>
<fieldset>
<legend>Preferences</legend>
<label>Room type:</label>
<input type=\"radio\" name=\"room\" id=\"standard\" value=\"standard\" checked>Standard
<input type=\"radio\" name=\"room\" id=\"business\" value=\"business\">Business
<input type=\"radio\" name=\"room\" id=\"suite\" value=\"suite\">Suite<br>
<label>Bed type:</label>
<input type=\"radio\" name=\"bed\" id=\"king\" value=\"king\" checked>King
<input type=\"radio\" name=\"bed\" id=\"double\" value=\"double\">Double Double<br>
<input type=\"checkbox\" name=\"smoking\" id=\"smoking\" value=\"smoking\">Smoking<br>
</fieldset>
<fieldset>
<legend>Contact Information</legend>
<label for=\"name\">Name:</label>
<input type=\"text\" name=\"name\" id=\"name\"><br>
<label for=\"email\">Email:</label>
<input type=\"text\" name=\"email\" id=\"email\"><br>
<label for=\"phone\">Phone:</label>
<input type=\"text\" name=\"phone\" id=\"phone\"><br>
</fieldset>
<input type=\"button\" id=\"submit_request\" value=\"Submit Reservation\"><br>
</form>
</main>
</body>
</html>
response.html:
<!DOCTYPE html>
<html>
<head>
<title>Reservation Request</title>
<link rel=\"stylesheet\" href=\"reservation.css\">
</head>
<body>
<main>
<script>
document.write(\"<h3>The following reservation has been submitted</h3>\");
document.write(\"Name: \", sessionStorage.name, \"<br>\");
document.write(\"Phone: \", sessionStorage.phone, \"<br>\");
document.write(\"Email: \", sessionStorage.email, \"<br>\");
document.write(\"Arrival Date: \", sessionStorage.arrivalDate, \"<br>\");
document.write(\"Nights: \", sessionStorage.nights, \"<br>\");
document.write(\"Adults: \", sessionStorage.adults, \"<br>\");
document.write(\"Children: \", sessionStorage.children, \"<br>\");
document.write(\"Room Type: \", sessionStorage.roomType, \"<br>\");
document.write(\"Bed Type: \", sessionStorage.bedType, \"<br>\");
document.write(\"Smoking: \", sessionStorage.smoking, \"<br><br>\");
</script>
</main>
</body>
</html>
reservation.css:
body {
font-family: Arial, Helvetica, sans-serif;
background-color: white;
margin: 0 auto;
width: 600px;
border: 3px solid blue;
padding: 10px 20px;
}
fieldset {
margin-top: 1em;
margin-bottom: 1em;
padding: .5em;
}
legend {
color: blue;
font-weight: bold;
font-size: 85%;
margin-bottom: .5em;
}
label {
float: left;
width: 90px;
}
input, select {
margin-left: 1em;
margin-right: 1em;
margin-bottom: .5em;
}
input {
width: 14em;
}
input[type=\"radio\"], input[type=\"checkbox\"] {
width: 1em;
padding-left: 0;
margin-right: 0.5em;
}
reservation.js:
\"use strict\";
var $ = function(id) { return document.getElementById(id); };
var saveReservation = function() {
// submit form
$(\"reservation_form\").submit();
};
window.onload = function() {
$(\"submit_request\").onclick = saveReservation;
$(\"arrival_date\").focus();
};
Reservation Request General Information Arrival date: 12/2/2015 Nights 3 Adults Children Preferences Room type Standard Business O Suite Bed type King O Double Double Smoking Contact Information Name Mary Email: mary@yahoo.com Phone: 555-555-5555 Submit Reservation Then, when you click on the Submit Reservation button, a new page gets the data from session storage and displays it like this: The following reservation has been submitted Name: Mary Phone: 555-555-5555 Ema mary@yahoo.com Arrival Date: 12/2/2015 Nights: 3 Adults: 2 Children. Room Type: business Bed Type: king Smoking: noSolution
Modified Javascript code is given below:
\"use strict\";
var $ = function(id) { return document.getElementById(id); };
var saveReservation = function() {
sessionStorage.setItem(\'name\', $(\"name\").value ); //set the name key value in sessionStorage
sessionStorage.setItem(\'phone\', $(\"phone\").value ); //set the phone key value in sessionStorage
sessionStorage.setItem(\'email\', $(\"email\").value ); //set the email key value in sessionStorage
sessionStorage.setItem(\'arrivalDate\', $(\"arrival_date\").value ); //set the arrival_date key value in sessionStorage
sessionStorage.setItem(\'nights\', $(\"nights\").value ); //set the nights key value in sessionStorage
sessionStorage.setItem(\'adults\', $(\"adults\").value ); //set the adults key value in sessionStorage
sessionStorage.setItem(\'children\', $(\"children\").value ); //set the children key value in sessionStorage
if($(\"standard\").checked){ //check if the standard checbox is selected
sessionStorage.setItem(\'roomType\', $(\"standard\").value ); // set the roomType key value in sessionStorage
}
else if($(\"business\").checked){ //check if the business checbox is selected
sessionStorage.setItem(\'roomType\', $(\"business\").value ); // set the roomType key value in sessionStorage
}
else if($(\"suite\").checked){ //check if the suite checbox is selected
sessionStorage.setItem(\'roomType\', $(\"suite\").value ); // set the roomType key value in sessionStorage
}
if($(\"king\").checked){ //check if the king checbox is selected
sessionStorage.setItem(\'bedType\', $(\"king\").value ); // set the bedType key value in sessionStorage
}
else if($(\"double\").checked){ //check if the double checbox is selected
sessionStorage.setItem(\'bedType\', $(\"double\").value ); // set the bedType key value in sessionStorage
}
if($(\"smoking\").checked){ //check if the smoking checbox is selected
sessionStorage.setItem(\'smoking\', \'yes\' ); // set the smoking key value to yes in sessionStorage
}else {
sessionStorage.setItem(\'smoking\', \'no\' ); // set the smoking key value to no in sessionStorage
}
// submit form
$(\"reservation_form\").submit();
};
window.onload = function() {
$(\"submit_request\").onclick = saveReservation;
$(\"arrival_date\").focus();
};
