Homework SourseHeres the HTML for the start page Reservation request Reserv
Here\'s the HTML for the start page:
<!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>
Here\'s the HTML for the response submission page:
<!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>
Here\'s the javascript I have so far:
\"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();
};
In the saveReservation function of the JavaScript file, I need to 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. No validation is needed.
Solution
Updated the saveReservation function, rest of the files are same
var saveReservation = function() {
sessionStorage.name=document.getElementById(\'name\').value;
sessionStorage.phone=document.getElementById(\'phone\').value;
sessionStorage.email=document.getElementById(\'email\').value;
sessionStorage.arrivalDate=document.getElementById(\'arrival_date\').value;
sessionStorage.nights=document.getElementById(\'nights\').value;
sessionStorage.adults=document.getElementById(\'adults\').value;
sessionStorage.children=document.getElementById(\'children\').value;
if (document.getElementById(\'standard\').checked) {
sessionStorage.roomType=\"Standard\";
}
else if (document.getElementById(\'business\').checked) {
sessionStorage.roomType=\"Business\";
}
else if (document.getElementById(\'suite\').checked) {
sessionStorage.roomType=\"Suite\";
}
if (document.getElementById(\'king\').checked) {
sessionStorage.bedType=\"King\";
}
else if (document.getElementById(\'double\').checked) {
sessionStorage.bedType=\"Double\";
}
if (document.getElementById(\'smoking\').checked)
sessionStorage.smoking=\"Smoking\";
else sessionStorage.smoking=\"Non Smoking\";
// submit form
$(\"reservation_form\").submit();
};
Replace function with athe above func
![Here\'s the HTML for the start page: <!DOCTYPE html> <html> <head> <title>Reservation request</title> <link rel=\](/WebImages/42/heres-the-html-for-the-start-page-reservation-request-reserv-1131357-1761604475-0.webp "Here\'s the HTML for the start page: <!DOCTYPE html> <html> <head> <title>Reservation request</title> <link rel=\")
![Here\'s the HTML for the start page: <!DOCTYPE html> <html> <head> <title>Reservation request</title> <link rel=\](/WebImages/42/heres-the-html-for-the-start-page-reservation-request-reserv-1131357-1761604475-1.webp "Here\'s the HTML for the start page: <!DOCTYPE html> <html> <head> <title>Reservation request</title> <link rel=\")
![Here\'s the HTML for the start page: <!DOCTYPE html> <html> <head> <title>Reservation request</title> <link rel=\](/WebImages/42/heres-the-html-for-the-start-page-reservation-request-reserv-1131357-1761604475-2.webp "Here\'s the HTML for the start page: <!DOCTYPE html> <html> <head> <title>Reservation request</title> <link rel=\")
