NAce01
Reputation: 57
How to display the selected option of a <select> in HTML using JavaScript?
I'm trying to display the selected option from a element using HTML I created in JavaScript. The select element has three options: "On the day", "Before", and "After".
What should happen next is that after clicking the Add button on the bottom-right, the selected option (e.g., "Before") should appear in the "When" column of the reminder list.
In the JavaScript file, I have a function called changeInnerHTML(sel) that should change the innerHTML of that column to that selected option. However, each time I click on one of the options, this error appears in the browser console: Uncaught TypeError: Cannot set properties of null (setting 'innerHTML') at changeInnerHTML (Create Event.js:195:54).
Here is the entire JS file:
var br = document.createElement("br");
function create_reminder() {
let form = document.createElement("form");
form.setAttribute("method", "post");
form.setAttribute("action", "");
form.setAttribute("id", "reminder_form");
// When
let reminder_status_label = document.createElement("label");
reminder_status_label.setAttribute("for", "reminder_status");
reminder_status_label.innerHTML = "When";
let reminder_status = document.createElement("select");
reminder_status.setAttribute("name", "reminder_status");
reminder_status.setAttribute("id", "reminder-status-sel");
reminder_status.setAttribute("onChange", "setReminderWhen(this);changeInnerHTML(this);");
let reminder_status_1 = document.createElement("option");
reminder_status_1.setAttribute("value", "on-the-day");
reminder_status_1.innerHTML = "On the day";
let reminder_status_2 = document.createElement("option");
reminder_status_2.setAttribute("value", "before");
reminder_status_2.innerHTML = "Before";
let reminder_status_3 = document.createElement("option");
reminder_status_3.setAttribute("value", "After");
reminder_status_3.innerHTML = "After";
// Note
let note_label = document.createElement("label");
note_label.setAttribute("for", "note");
note_label.innerHTML = "Note";
let note = document.createElement("textarea");
note.setAttribute("name", "note");
note.setAttribute("id", "reminder-note");
note.setAttribute("row", "10");
note.setAttribute("col", "60");
// Send to
let send_to_label = document.createElement("label");
send_to_label.setAttribute("for", "send-to");
send_to_label.innerHTML = "Send to";
let send_to = document.createElement("select");
send_to.setAttribute("name", "send-to");
send_to.setAttribute("onChange", "setReminderWhen(this);");
let blank = document.createElement("option");
blank.setAttribute("value", "--");
let email_1 = document.createElement("option");
email_1.setAttribute("value", "[email protected]");
email_1.innerHTML = "[email protected]";
let email_2 = document.createElement("option");
email_2.setAttribute("value", "[email protected]");
email_2.innerHTML = "[email protected]";
let email_3 = document.createElement("option");
email_3.setAttribute("value", "[email protected]");
email_3.innerHTML = "[email protected]";
let email_4 = document.createElement("option");
email_4.setAttribute("value", "[email protected]");
email_4.innerHTML = "[email protected]";
let email_5 = document.createElement("option");
email_5.setAttribute("value", "[email protected]");
email_5.innerHTML = "[email protected]";
let add_reminder_btn = document.createElement("button");
add_reminder_btn.setAttribute("type", "button");
add_reminder_btn.setAttribute("name", "add_reminder");
add_reminder_btn.setAttribute("id", "add-reminder-to-list-btn");
add_reminder_btn.innerHTML = "Add";
add_reminder_btn.setAttribute("onclick", "document.getElementById('reminder').innerHTML='1 reminder';list_reminder();");
let cancel_reminder_btn = document.createElement("button");
cancel_reminder_btn.setAttribute("type", "button");
cancel_reminder_btn.setAttribute("name", "cancel_reminder");
cancel_reminder_btn.setAttribute("id", "cancel-reminder-to-list-btn");
cancel_reminder_btn.innerHTML = "Cancel";
cancel_reminder_btn.setAttribute("onclick", "document.getElementById('reminder_form').style.visibility='hidden'");
// Form
form.appendChild(br.cloneNode());
form.appendChild(reminder_status_label);
form.appendChild(br.cloneNode());
form.appendChild(reminder_status);
reminder_status.appendChild(reminder_status_1);
reminder_status.appendChild(reminder_status_2);
reminder_status.appendChild(reminder_status_3);
form.appendChild(br.cloneNode());
form.appendChild(br.cloneNode());
form.appendChild(note_label);
form.appendChild(br.cloneNode());
form.appendChild(note);
form.appendChild(br.cloneNode());
form.appendChild(br.cloneNode());
form.appendChild(send_to_label);
form.appendChild(br.cloneNode());
form.appendChild(send_to);
send_to.appendChild(blank);
send_to.appendChild(email_1);
send_to.appendChild(email_2);
send_to.appendChild(email_3);
send_to.appendChild(email_4);
send_to.appendChild(email_5);
form.appendChild(br.cloneNode());
form.appendChild(add_reminder_btn);
form.appendChild(cancel_reminder_btn);
document.getElementById("reminder")
.appendChild(form);
}
function list_reminder() {
let add_reminder_btn = document.createElement("button");
add_reminder_btn.setAttribute("type", "button");
add_reminder_btn.setAttribute("name", "add_reminder");
add_reminder_btn.setAttribute("class", "add-reminder-btn");
add_reminder_btn.innerHTML = "Add";
add_reminder_btn.setAttribute("onclick", "document.getElementById('reminder').innerHTML='1 reminder';list_reminder();");
let reminder_table = document.createElement("table");
reminder_table.setAttribute("id", "reminder-table");
let reminder_table_head = document.createElement("thead");
reminder_table_head.setAttribute("id", "reminder-list-header");
let reminder_table_col_1 = document.createElement("th");
reminder_table_col_1.innerHTML = "Send to";
let reminder_table_col_2 = document.createElement("th");
reminder_table_col_2.innerHTML = "When";
let reminder_table_col_3 = document.createElement("th");
let reminder_table_body = document.createElement("tbody");
let reminder_table_row = document.createElement("tr");
let reminder_table_cell_1 = document.createElement("td");
reminder_table_cell_1.setAttribute("class", "reminder-list");
let reminder_table_cell_2 = document.createElement("td");
reminder_table_cell_2.setAttribute("class", "reminder-list");
reminder_table_cell_2.setAttribute("id", "reminder-when");
let reminder_table_cell_3 = document.createElement("td");
reminder_table_cell_3.setAttribute("class", "reminder-list");
reminder_table_cell_1.innerHTML = "[email protected]";
// reminder_table_cell_2.innerHTML = "";
let edit_reminder_btn = document.createElement("button");
edit_reminder_btn.setAttribute("type", "button");
edit_reminder_btn.setAttribute("name", "edit_reminder");
edit_reminder_btn.setAttribute("class", "edit-delete-reminder-btns");
edit_reminder_btn.innerHTML = "Edit";
let delete_reminder_btn = document.createElement("button");
delete_reminder_btn.setAttribute("type", "button");
delete_reminder_btn.setAttribute("name", "delete_reminder");
delete_reminder_btn.setAttribute("class", "edit-delete-reminder-btns");
delete_reminder_btn.innerHTML = "Delete";
reminder_table.appendChild(reminder_table_head);
reminder_table_head.appendChild(reminder_table_col_1);
reminder_table_head.appendChild(reminder_table_col_2);
reminder_table_head.appendChild(reminder_table_col_3);
reminder_table.appendChild(reminder_table_body);
reminder_table_body.appendChild(reminder_table_row);
reminder_table_row.appendChild(reminder_table_cell_1);
reminder_table_row.appendChild(reminder_table_cell_2);
reminder_table_row.appendChild(reminder_table_cell_3);
reminder_table_cell_3.appendChild(edit_reminder_btn);
reminder_table_cell_3.appendChild(delete_reminder_btn);
document.getElementById("reminder")
.appendChild(add_reminder_btn);
document.getElementById("reminder")
.appendChild(reminder_table);
}
// Used to ensure that values are being read
function setReminderWhen(sel) {
alert(sel.options[sel.selectedIndex].text);
}
function changeInnerHTML(sel) {
document.getElementById('reminder-when').innerHTML = sel.options[sel.selectedIndex].text;
}And here is the HTML and CSS:
h1 {
text-align: center;
color: black;
}
body, input, select, option, textarea {
font-size: 30px;
font-family: verdana;
color: #666666;
}
input, select, textarea {
border: 1px solid #e8e8e8;
}
input, select, option {
background: #e8e8e8;
padding: 10px 10px 10px 10px;
}
textarea {
background: #e8e8e8;
width: 100%
}
#guest-room-address {
width: 30%;
}
#reminder {
margin-top: 30px;
border: 3px #e8e8e8 solid;
padding: 10px 0px 60px 10px;
}
.add-reminder-btn {
float: right;
font-size: 30px;
border: 2px solid white;
background-color: white;
font-weight: bold;
font-family: verdana;
text-transform: uppercase;
}
#add-reservation-btn {
float: right;
font-size: 30px;
color: white;
background-color: #363636;
border: 15px solid white;
font-weight: bold;
font-family: verdana;
padding: 20px;
text-transform: uppercase;
}
#cancel-reservation-btn {
float: right;
font-size: 30px;
color: black;
background-color: white;
border: 15px solid white;
font-weight: bold;
font-family: verdana;
margin-right: 30px;
padding: 20px;
text-transform: uppercase;
}
#cancel-reservation-btn a:link {
color: black;
text-decoration: none;
}
#cancel-reservation-btn a:visited {
color: black;
text-decoration: none;
}
#cancel-add-btns {
margin-top: 30px;
}
#reminder-list-header {
background: #e8e8e8;
text-transform: uppercase;
}
td.reminder-list {
margin-top: 10px;
padding: 20px 10px 10px 20px;
width: 10%;
}
.edit-delete-reminder-btns {
border: 3px solid #363636;
background: white;
font-size: 25px;
font-weight: verdana;
text-transform: uppercase;
padding: 20px;
margin: 0px 40px 0px 20px;
}
.edit-delete-reminder-btns:hover {
background: #363636;
color: white;
}
#add-reminder-to-list-btn {
border: 1px solid #363636;
background: #363636;
color: white;
font-size: 30px;
font-weight: verdana;
text-transform: uppercase;
padding: 5px;
font-weight: bold;
margin: 0px 40px 0px 0px;
float: right;
}
#cancel-reminder-to-list-btn {
border: 1px solid white;
background: white;
font-size: 30px;
font-weight: verdana;
text-transform: uppercase;
padding: 5px;
font-weight: bold;
margin: 0px 40px 0px 0px;
float: right;
}
#reminder-note {
width: 98%;
}
#reminder-table {
margin-top: 20px;
}<!DOCTYPE html>
<html>
<head>
<title>Add Event to Main Calendar</title>
<meta name="viewport" width="device-width, initial-scale=1">
<link rel="stylesheet" href="Create Event.css">
<script type="text/javascript" src="Create Event.js"></script>
</head>
<body>
<div>
<h1>Add Reservation to Guest Room Calendar</h1>
<hr>
<form action="SMTWTFS Control Page 1.html" method="post">
<label for="check-in-date">Check-in Date</label>
<br>
<input type="date" name="check-in-date" min="2022-05-18" required>
<br>
<br>
<label for="check-in-time">Check-in Time</label>
<br>
<select name="hour" required>
<option value="--"></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
<select name="minute" required>
<option value="--"></option>
<option value="00">00</option>
<option value="05">05</option>
<option value="10">10</option>
<option value="15">15</option>
<option value="20">20</option>
<option value="25">25</option>
<option value="30">30</option>
<option value="35">35</option>
<option value="40">40</option>
<option value="45">45</option>
<option value="50">50</option>
<option value="55">55</option>
</select>
<select name="am-pm" required>
<option value="--"></option>
<option value="am">AM</option>
<option value="pm">PM</option>
</select>
<br>
<br>
<label for="check-out-date">Check-out Date</label>
<br>
<input type="date" name="check-out-date" min="2022-05-18" required>
<br>
<br>
<label for="check-out-time">Check-out Time</label>
<br>
<select name="hour" required>
<option value="--"></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
<select name="minute" required>
<option value="--"></option>
<option value="00">00</option>
<option value="05">05</option>
<option value="10">10</option>
<option value="15">15</option>
<option value="20">20</option>
<option value="25">25</option>
<option value="30">30</option>
<option value="35">35</option>
<option value="40">40</option>
<option value="45">45</option>
<option value="50">50</option>
<option value="55">55</option>
</select>
<select name="am-pm" required>
<option value="--"></option>
<option value="am">AM</option>
<option value="pm">PM</option>
</select>
<br>
<br>
<label for="guest-room-address">Guest Room Address</label>
<br>
<input id="guest-room-address" type="text" name="guest-room-address" value="" placeholder="1234 A St, Anytown, XY 12345" required>
<br>
<br>
<label for="reserved-by">Reserved by</label>
<br>
<select name="reserved-by" required>
<option value="nivaldo-acevedo">Nivaldo Acevedo</option>
<option value="sean-davey">Sean Davey</option>
<option value="margo-ketchum">Margo Ketchum</option>
<option value="jeff-kosky">Jeff Kosky</option>
<option value="mary-selman">Mary Selman</option>
</select>
<br>
<br>
<label for="no-of-guests">No. of Guests</label>
<br>
<input type="number" name="no-of-guests" min="1" max="5" required>
<br>
<br>
<label for="hosted-by">Hosted by</label>
<br>
<select name="hosted-by" required>
<option value="nivaldo-acevedo">Nivaldo Acevedo</option>
<option value="sean-davey">Sean Davey</option>
<option value="margo-ketchum">Margo Ketchum</option>
<option value="jeff-kosky">Jeff Kosky</option>
<option value="mary-selman">Mary Selman</option>
</select>
<br>
<br>
<label for="notes">Notes</label>
<br>
<textarea name="notes" rows="2" cols="40"></textarea>
<div id="reminder">
0 reminders <button type="button" name="add-reminder" class="add-reminder-btn" id="add-reminder-btn" onclick="create_reminder()">Add</button>
</div>
</div>
<div id="cancel-add-btns">
<button type="submit" name="add-reservation" id="add-reservation-btn">ADD</button>
<button type="button" name="cancel-reservation" id="cancel-reservation-btn"> <a href="SMTWTFS Control Page 1.html">Cancel</a></button>
</div>
</form>
</body>
</html>I've placed this function inside of the onChange attribute of reminder_status (line 17). I have also tried onClick, but it generated the same result. I have also tried to using this code: document.getElementById('reminder-when').innerHTML = sel.options[sel.selectedIndex].text; within the list_reminder() function but to no avail. I'm not sure what else I can do. I appreciate any help I can get.
Upvotes: 0
Views: 573
Answers (1)
user2495207
Reputation: 861
As bloodyKnuckles told you; the element you're trying to get isn't present in the DOM when the domument is loaded that's why you cannot get access to it.
I don't know if this is an elegant way to solve your issue but at least you'll understand where the problem is. What you can do is make the select save its value in a global variable, I made some comments to your code.
var br = document.createElement("br");
var option="";/*---added----*/
function create_reminder() {
let form = document.createElement("form");
form.setAttribute("method", "post");
form.setAttribute("action", "");
form.setAttribute("id", "reminder_form");
// When
let reminder_status_label = document.createElement("label");
reminder_status_label.setAttribute("for", "reminder_status");
reminder_status_label.innerHTML = "When";
let reminder_status = document.createElement("select");
reminder_status.setAttribute("name", "reminder_status");
reminder_status.setAttribute("id", "reminder-status-sel");
//reminder_status.setAttribute("onChange", "setReminderWhen(this);changeInnerHTML(this);");
reminder_status.setAttribute("onChange", "setReminderWhen(this);");/*---added----*/
let reminder_status_1 = document.createElement("option");
reminder_status_1.setAttribute("value", "on-the-day");
reminder_status_1.innerHTML = "On the day";
let reminder_status_2 = document.createElement("option");
reminder_status_2.setAttribute("value", "before");
reminder_status_2.innerHTML = "Before";
let reminder_status_3 = document.createElement("option");
reminder_status_3.setAttribute("value", "After");
reminder_status_3.innerHTML = "After";
// Note
let note_label = document.createElement("label");
note_label.setAttribute("for", "note");
note_label.innerHTML = "Note";
let note = document.createElement("textarea");
note.setAttribute("name", "note");
note.setAttribute("id", "reminder-note");
note.setAttribute("row", "10");
note.setAttribute("col", "60");
// Send to
let send_to_label = document.createElement("label");
send_to_label.setAttribute("for", "send-to");
send_to_label.innerHTML = "Send to";
let send_to = document.createElement("select");
send_to.setAttribute("name", "send-to");
send_to.setAttribute("onChange", "setReminderWhen(this);");
let blank = document.createElement("option");
blank.setAttribute("value", "--");
let email_1 = document.createElement("option");
email_1.setAttribute("value", "[email protected]");
email_1.innerHTML = "[email protected]";
let email_2 = document.createElement("option");
email_2.setAttribute("value", "[email protected]");
email_2.innerHTML = "[email protected]";
let email_3 = document.createElement("option");
email_3.setAttribute("value", "[email protected]");
email_3.innerHTML = "[email protected]";
let email_4 = document.createElement("option");
email_4.setAttribute("value", "[email protected]");
email_4.innerHTML = "[email protected]";
let email_5 = document.createElement("option");
email_5.setAttribute("value", "[email protected]");
email_5.innerHTML = "[email protected]";
let add_reminder_btn = document.createElement("button");
add_reminder_btn.setAttribute("type", "button");
add_reminder_btn.setAttribute("name", "add_reminder");
add_reminder_btn.setAttribute("id", "add-reminder-to-list-btn");
add_reminder_btn.innerHTML = "Add";
add_reminder_btn.setAttribute("onclick", "document.getElementById('reminder').innerHTML='1 reminder';list_reminder();");
let cancel_reminder_btn = document.createElement("button");
cancel_reminder_btn.setAttribute("type", "button");
cancel_reminder_btn.setAttribute("name", "cancel_reminder");
cancel_reminder_btn.setAttribute("id", "cancel-reminder-to-list-btn");
cancel_reminder_btn.innerHTML = "Cancel";
cancel_reminder_btn.setAttribute("onclick", "document.getElementById('reminder_form').style.visibility='hidden'");
// Form
form.appendChild(br.cloneNode());
form.appendChild(reminder_status_label);
form.appendChild(br.cloneNode());
form.appendChild(reminder_status);
reminder_status.appendChild(reminder_status_1);
reminder_status.appendChild(reminder_status_2);
reminder_status.appendChild(reminder_status_3);
form.appendChild(br.cloneNode());
form.appendChild(br.cloneNode());
form.appendChild(note_label);
form.appendChild(br.cloneNode());
form.appendChild(note);
form.appendChild(br.cloneNode());
form.appendChild(br.cloneNode());
form.appendChild(send_to_label);
form.appendChild(br.cloneNode());
form.appendChild(send_to);
send_to.appendChild(blank);
send_to.appendChild(email_1);
send_to.appendChild(email_2);
send_to.appendChild(email_3);
send_to.appendChild(email_4);
send_to.appendChild(email_5);
form.appendChild(br.cloneNode());
form.appendChild(add_reminder_btn);
form.appendChild(cancel_reminder_btn);
document.getElementById("reminder")
.appendChild(form);
}
function list_reminder() {
let add_reminder_btn = document.createElement("button");
add_reminder_btn.setAttribute("type", "button");
add_reminder_btn.setAttribute("name", "add_reminder");
add_reminder_btn.setAttribute("class", "add-reminder-btn");
add_reminder_btn.innerHTML = "Add";
add_reminder_btn.setAttribute("onclick", "document.getElementById('reminder').innerHTML='1 reminder';list_reminder();");
let reminder_table = document.createElement("table");
reminder_table.setAttribute("id", "reminder-table");
let reminder_table_head = document.createElement("thead");
reminder_table_head.setAttribute("id", "reminder-list-header");
let reminder_table_col_1 = document.createElement("th");
reminder_table_col_1.innerHTML = "Send to";
let reminder_table_col_2 = document.createElement("th");
reminder_table_col_2.innerHTML = "When";
let reminder_table_col_3 = document.createElement("th");
let reminder_table_body = document.createElement("tbody");
let reminder_table_row = document.createElement("tr");
let reminder_table_cell_1 = document.createElement("td");
reminder_table_cell_1.setAttribute("class", "reminder-list");
let reminder_table_cell_2 = document.createElement("td");
reminder_table_cell_2.setAttribute("class", "reminder-list");
reminder_table_cell_2.setAttribute("id", "reminder-when");
reminder_table_cell_2.innerHTML = option;/*---added----*/
let reminder_table_cell_3 = document.createElement("td");
reminder_table_cell_3.setAttribute("class", "reminder-list");
reminder_table_cell_1.innerHTML = "[email protected]";
// reminder_table_cell_2.innerHTML = "";
let edit_reminder_btn = document.createElement("button");
edit_reminder_btn.setAttribute("type", "button");
edit_reminder_btn.setAttribute("name", "edit_reminder");
edit_reminder_btn.setAttribute("class", "edit-delete-reminder-btns");
edit_reminder_btn.innerHTML = "Edit";
let delete_reminder_btn = document.createElement("button");
delete_reminder_btn.setAttribute("type", "button");
delete_reminder_btn.setAttribute("name", "delete_reminder");
delete_reminder_btn.setAttribute("class", "edit-delete-reminder-btns");
delete_reminder_btn.innerHTML = "Delete";
reminder_table.appendChild(reminder_table_head);
reminder_table_head.appendChild(reminder_table_col_1);
reminder_table_head.appendChild(reminder_table_col_2);
reminder_table_head.appendChild(reminder_table_col_3);
reminder_table.appendChild(reminder_table_body);
reminder_table_body.appendChild(reminder_table_row);
reminder_table_row.appendChild(reminder_table_cell_1);
reminder_table_row.appendChild(reminder_table_cell_2);
reminder_table_row.appendChild(reminder_table_cell_3);
reminder_table_cell_3.appendChild(edit_reminder_btn);
reminder_table_cell_3.appendChild(delete_reminder_btn);
document.getElementById("reminder")
.appendChild(add_reminder_btn);
document.getElementById("reminder")
.appendChild(reminder_table);
}
// Used to ensure that values are being read
function setReminderWhen(sel) {
//alert(sel.options[sel.selectedIndex].text);
option=sel.options[sel.selectedIndex].text;
}
/*
function changeInnerHTML(sel) {
document.getElementById('reminder-when').innerHTML = sel.options[sel.selectedIndex].text;
} */h1 {
text-align: center;
color: black;
}
body, input, select, option, textarea {
font-size: 30px;
font-family: verdana;
color: #666666;
}
input, select, textarea {
border: 1px solid #e8e8e8;
}
input, select, option {
background: #e8e8e8;
padding: 10px 10px 10px 10px;
}
textarea {
background: #e8e8e8;
width: 100%
}
#guest-room-address {
width: 30%;
}
#reminder {
margin-top: 30px;
border: 3px #e8e8e8 solid;
padding: 10px 0px 60px 10px;
}
.add-reminder-btn {
float: right;
font-size: 30px;
border: 2px solid white;
background-color: white;
font-weight: bold;
font-family: verdana;
text-transform: uppercase;
}
#add-reservation-btn {
float: right;
font-size: 30px;
color: white;
background-color: #363636;
border: 15px solid white;
font-weight: bold;
font-family: verdana;
padding: 20px;
text-transform: uppercase;
}
#cancel-reservation-btn {
float: right;
font-size: 30px;
color: black;
background-color: white;
border: 15px solid white;
font-weight: bold;
font-family: verdana;
margin-right: 30px;
padding: 20px;
text-transform: uppercase;
}
#cancel-reservation-btn a:link {
color: black;
text-decoration: none;
}
#cancel-reservation-btn a:visited {
color: black;
text-decoration: none;
}
#cancel-add-btns {
margin-top: 30px;
}
#reminder-list-header {
background: #e8e8e8;
text-transform: uppercase;
}
td.reminder-list {
margin-top: 10px;
padding: 20px 10px 10px 20px;
width: 10%;
}
.edit-delete-reminder-btns {
border: 3px solid #363636;
background: white;
font-size: 25px;
font-weight: verdana;
text-transform: uppercase;
padding: 20px;
margin: 0px 40px 0px 20px;
}
.edit-delete-reminder-btns:hover {
background: #363636;
color: white;
}
#add-reminder-to-list-btn {
border: 1px solid #363636;
background: #363636;
color: white;
font-size: 30px;
font-weight: verdana;
text-transform: uppercase;
padding: 5px;
font-weight: bold;
margin: 0px 40px 0px 0px;
float: right;
}
#cancel-reminder-to-list-btn {
border: 1px solid white;
background: white;
font-size: 30px;
font-weight: verdana;
text-transform: uppercase;
padding: 5px;
font-weight: bold;
margin: 0px 40px 0px 0px;
float: right;
}
#reminder-note {
width: 98%;
}
#reminder-table {
margin-top: 20px;
}<!DOCTYPE html>
<html>
<head>
<title>Add Event to Main Calendar</title>
<meta name="viewport" width="device-width, initial-scale=1">
<link rel="stylesheet" href="Create Event.css">
<script type="text/javascript" src="Create Event.js"></script>
</head>
<body>
<div>
<h1>Add Reservation to Guest Room Calendar</h1>
<hr>
<form action="SMTWTFS Control Page 1.html" method="post">
<label for="check-in-date">Check-in Date</label>
<br>
<input type="date" name="check-in-date" min="2022-05-18" required>
<br>
<br>
<label for="check-in-time">Check-in Time</label>
<br>
<select name="hour" required>
<option value="--"></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
<select name="minute" required>
<option value="--"></option>
<option value="00">00</option>
<option value="05">05</option>
<option value="10">10</option>
<option value="15">15</option>
<option value="20">20</option>
<option value="25">25</option>
<option value="30">30</option>
<option value="35">35</option>
<option value="40">40</option>
<option value="45">45</option>
<option value="50">50</option>
<option value="55">55</option>
</select>
<select name="am-pm" required>
<option value="--"></option>
<option value="am">AM</option>
<option value="pm">PM</option>
</select>
<br>
<br>
<label for="check-out-date">Check-out Date</label>
<br>
<input type="date" name="check-out-date" min="2022-05-18" required>
<br>
<br>
<label for="check-out-time">Check-out Time</label>
<br>
<select name="hour" required>
<option value="--"></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
<select name="minute" required>
<option value="--"></option>
<option value="00">00</option>
<option value="05">05</option>
<option value="10">10</option>
<option value="15">15</option>
<option value="20">20</option>
<option value="25">25</option>
<option value="30">30</option>
<option value="35">35</option>
<option value="40">40</option>
<option value="45">45</option>
<option value="50">50</option>
<option value="55">55</option>
</select>
<select name="am-pm" required>
<option value="--"></option>
<option value="am">AM</option>
<option value="pm">PM</option>
</select>
<br>
<br>
<label for="guest-room-address">Guest Room Address</label>
<br>
<input id="guest-room-address" type="text" name="guest-room-address" value="" placeholder="1234 A St, Anytown, XY 12345" required>
<br>
<br>
<label for="reserved-by">Reserved by</label>
<br>
<select name="reserved-by" required>
<option value="nivaldo-acevedo">Nivaldo Acevedo</option>
<option value="sean-davey">Sean Davey</option>
<option value="margo-ketchum">Margo Ketchum</option>
<option value="jeff-kosky">Jeff Kosky</option>
<option value="mary-selman">Mary Selman</option>
</select>
<br>
<br>
<label for="no-of-guests">No. of Guests</label>
<br>
<input type="number" name="no-of-guests" min="1" max="5" required>
<br>
<br>
<label for="hosted-by">Hosted by</label>
<br>
<select name="hosted-by" required>
<option value="nivaldo-acevedo">Nivaldo Acevedo</option>
<option value="sean-davey">Sean Davey</option>
<option value="margo-ketchum">Margo Ketchum</option>
<option value="jeff-kosky">Jeff Kosky</option>
<option value="mary-selman">Mary Selman</option>
</select>
<br>
<br>
<label for="notes">Notes</label>
<br>
<textarea name="notes" rows="2" cols="40"></textarea>
<div id="reminder">
0 reminders <button type="button" name="add-reminder" class="add-reminder-btn" id="add-reminder-btn" onclick="create_reminder()">Add</button>
</div>
</div>
<div id="cancel-add-btns">
<button type="submit" name="add-reservation" id="add-reservation-btn">ADD</button>
<button type="button" name="cancel-reservation" id="cancel-reservation-btn"> <a href="SMTWTFS Control Page 1.html">Cancel</a></button>
</div>
</form>
</body>
</html>Upvotes: 1
Related Questions
- Show a different text for the selected option for `<select>`s
- Get the selected value from populating select options
- Select option html in JavaScript
- how to choose selected option in select/option in HTML?
- How can I have a div appear option class is selected within <select>?
- How to make the chosen value of select list visible
- Displaying text when Select Option is chosen. How to do?
- how to get html select to show selected value with javascript
- selected value not appear in select option in html
- how to get html select to show selected value