Develop Reference

Show or Display Text of the Selected Radio Button in Email and Hide Others

Trying to figure how to make the code shown in the email the options of the selected radio button. I have 5 radio button and if I select on the radio it shows their option but when I go to submit the request it send all the data from all other options
Also trying to make the the code work in the PHP format
$(function() {
// listen for changes
$('input[type="radio"]').on('change', function(){
// get checked one
var $target = $('input[type="radio"]:checked');
// hide all divs with .showhide class
$(".showhide").hide();
// show div that corresponds to selected radio.
$( $target.attr('data-section') ).show();
// trigger the change on page load
}).trigger('change');
});
html, body {
min-height: 100%;
}
body, div, form, input, select, textarea, p {
padding: 0;
margin: 0;
outline: none;
font-family: Roboto, Arial, sans-serif;
font-size: 14px;
color: #666;
line-height: 22px;
}
h1 {
position: absolute;
margin: 0;
font-size: 32px;
color: #fff;
z-index: 2;
}
legend {
color: #fff;
background-color: #095484;
padding: 3px 5px;
font-size: 20px;
}
h5 {
margin: 10px 0;
}
.testbox {
display: flex;
justify-content: center;
align-items: center;
height: inherit;
padding: 20px;
}
form {
width: 50%;
padding: 20px;
border-radius: 6px;
background: #fff;
box-shadow: 0 0 20px 0 #095484;
}
.banner {
position: relative;
height: 210px;
background-image: url("//pww-wwdweb01/c$/inetpub/wwwroot/Krishneel/OnBoarding/Walgreen.jpg");
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.banner::after {
content: "";
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
width: 100%;
height: 100%;
}
input, select, textarea {
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 3px;
}
input {
width: calc(100% - 10px);
padding: 5px;
}
select {
width: 100%;
padding: 7px 0;
background: transparent;
}
textarea {
width: calc(100% - 12px);
padding: 5px;
}
.item:hover p, .item:hover i, .question:hover p, .question label:hover, input:hover::placeholder, a {
color: #095484;
}
.item input:hover, .item select:hover, .item textarea:hover {
border: 1px solid transparent;
box-shadow: 0 0 6px 0 #095484;
color: #095484;
}
input[type="date"]::-webkit-inner-spin-button {
display: none;
}
.showhide {
display:none;
}
.item i, input[type="date"]::-webkit-calendar-picker-indicator {
position: absolute;
font-size: 20px;
color: #a9a9a9;
}
.item i {
right: 2%;
top: 30px;
z-index: 1;
}
[type="date"]::-webkit-calendar-picker-indicator {
right: 1%;
z-index: 2;
opacity: 0;
cursor: pointer;
}
input[type=radio], input[type=checkbox] {
display: none;
}
label.radio, label.check {
position: relative;
display: inline-block;
margin: 5px 20px 15px 0;
cursor: pointer;
}
.question span {
margin-left: 30px;
}
span.required {
margin-left: 0;
color: red;
}
.checkbox-item label {
margin: 5px 20px 10px 0;
}
label.radio:before, label.check:before {
content: "";
position: absolute;
left: 0;
}
label.radio:before {
width: 17px;
height: 17px;
border-radius: 50%;
border: 2px solid #095484;
}
label.check:before {
top: 2px;
width: 16px;
height: 16px;
border-radius: 2px;
border: 1px solid #095484;
}
input[type=checkbox]:checked + .check:before {
background: #095484;
}
label.radio:after {
left: 5px;
border: 3px solid #095484;
}
label.check:after {
left: 4px;
border: 3px solid #fff;
}
label.radio:after, label.check:after {
content: "";
position: absolute;
top: 6px;
width: 8px;
height: 4px;
background: transparent;
border-top: none;
border-right: none;
transform: rotate(-45deg);
opacity: 0;
}
input[type=radio]:checked + label:after, input[type=checkbox]:checked + label:after {
opacity: 1;
}
.btn-block {
margin-top: 10px;
text-align: center;
}
button {
width: 200px;
padding: 10px;
border: none;
border-radius: 5px;
background: #095484;
font-size: 16px;
color: #fff;
cursor: pointer;
}
button:hover {
background: #0666a3;
}
#media (min-width: 568px) {
.city-item {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.city-item input {
width: calc(50% - 20px);
}
.city-item select {
width: calc(50% - 8px);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="testbox">
<form action="mailto:someone#example.com" method="post" enctype="text/plain">
<div class="banner">
<h1>Employment Form</h1>
</div><br>
<p>Please fill out with the information that is requested below and submit the employment verification form. Thank you!</p>
<br>
<div class="question">
<fieldset>
<legend>Employee Status</legend>
<p>Choose Employee Status:<span class="required">*</span></p>
<div class="question-answer">
<input type="radio" value="none" id="radio_1" name="investigator" data-section="#div-1" />
<label for="radio_1" class="radio"><span>New Hire</span></label>
<br>
<input type="radio" value="none" id="radio_2" name="investigator" data-section="#div-2" />
<label for="radio_2" class="radio"><span>Upgrade Credentials to DCS</span></label>
<br>
<input type="radio" value="none" id="radio_3" name="investigator" data-section="#div-3">
<label for="radio_3" class="radio"><span>Return to Work</span></label>
<br>
<input type="radio" value="none" id="radio_4" name="investigator" data-section="#div-4" >
<label for="radio_4" class="radio"><span>Terminate Access DCS or Above</span></label>
<br>
<input type="radio" value="none" id="radio_5" name="investigator" data-section="#div-5" >
<label for="radio_5" class="radio"><span>Terminate Access TM AS400</span></label>
</div>
</fieldset>
</div>
<br>
<!---New Hire Option -->
<div class="showhide" id="div-1">
<fieldset>
<legend>Employee Information</legend>
<label for="text_1" class="text">Enter Employee Full Name:</label>
<input type="text" value="" id="text_1" placeholder="Enter First & Last Name" name="name">
<br>
<label for="text_2" class="text">One ID & Employee ID:</label>
<input type="text" value="" id="text_2" placeholder="Enter One ID & Employee ID" name="name">
<br>
<p>Date</p>
<input type="datetime-local" name="bdate">
<p>Department</p>
<select>
<option selected value="" disabled selected>Department</option>
<option value="1">HR</option>
<option value="2">AP</option>
<option value="3">SC-AM</option>
<option value="4">SC-PM</option>
<option value="5">FC-AM</option>
<option value="6">FC-PM</option>
<option value="7">INB-AM</option>
<option value="8">INB-PM</option>
<option value="9">IO</option>
<option value="10">Maintenace</option>
<option value="11">Shipping-AM</option>
<option value="12">sHIPPING-PM</option>
<option value="13">Computer Room</option>
</select>
<p>User On-Boarding Notification Info:</p>
<textarea rows="4"></textarea>
<br>
<fieldset>
<legend>I/O or Manager Approved</legend>
<label for="text_6" class="text">Enter I/O or Manager Email Address:</label>
<input type="text" value="" id="text_6" placeholder="Enter Email Address" name="name">
</fieldset>
</fieldset>
<br>
<div class="question">
<fieldset>
<legend>Additional Access/Accessories</legend>
<p>Select All That Apply:</p>
<div class="question-answer checkbox-item">
<div>
<input type="checkbox" value="none" id="check_1" name="checklist">
<label for="check_1" class="check"><span>Full DCS Access : DC NET, Email Lists, K Drive, AS400, Shared, etcDrive,</span></label>
</div>
<div>
<input type="checkbox" value="none" id="check_2" name="checklist">
<label for="check_2" class="check"><span>Laptop</span></label>
</div>
<div>
<input type="checkbox" value="none" id="check_3" name="checklist">
<label for="check_3" class="check"><span>Phone</span></label>
</div>
<div>
<input type="checkbox" value="none" id="check_4" name="checklist">
<label for="check_4" class="check"><span>Office Space</span></label>
</div>
<div>
<input type="checkbox" value="none" id="check_5" name="checklist">
<label for="check_5" class="check"><span>Computer Setup/Verify in Location</span></label>
</div>
</div>
</fieldset>
</div>
<br>
<fieldset>
<legend>Additional Comments</legend>
<label for="text_6" class="text">Please briefly describe your concern:</label>
<input type="text" value="" id="text_6" placeholder="Enter Additional Comments Here" name="name">
</fieldset>
</div>
<!---Upgrade Creditials Option -->
<div class="showhide" id="div-2">
<fieldset>
<legend>Employee Information</legend>
<label for="text_1" class="text">Enter Employee Full Name:</label>
<input type="text" value="" id="text_1" placeholder="Enter First & Last Name" name="name">
<br>
<label for="text_2" class="text">One ID & Employee ID:</label>
<input type="text" value="" id="text_2" placeholder="Enter One ID & Employee ID" name="name">
<br>
<p>Date</p>
<input type="datetime-local" name="bdate">
<br>
<p>Department</p>
<select>
<option selected value="" disabled selected>Department</option>
<option value="1">HR</option>
<option value="2">AP</option>
<option value="3">SC-AM</option>
<option value="4">SC-PM</option>
<option value="5">FC-AM</option>
<option value="6">FC-PM</option>
<option value="7">INB-AM</option>
<option value="8">INB-PM</option>
<option value="9">IO</option>
<option value="10">Maintenace</option>
<option value="11">Shipping-AM</option>
<option value="12">sHIPPING-PM</option>
<option value="13">Computer Room</option>
</select>
<br>
<fieldset>
<legend>I/O or Manager Approved</legend>
<label for="text_6" class="text">Enter I/O or Manager Email Address:</label>
<input type="text" value="" id="text_6" placeholder="Enter Email Address" name="name">
</fieldset>
<br>
<div class="question">
<fieldset>
<legend>Additional Access/Accessories</legend>
<p>Select All That Apply:</p>
<div class="question-answer checkbox-item">
<div>
<input type="checkbox" value="none" id="check_1" name="checklist">
<label for="check_1" class="check"><span>Full DCS Access : DC NET, Email Lists, K Drive, AS400, Shared, etcDrive,</span></label>
</div>
<div>
<input type="checkbox" value="none" id="check_2" name="checklist">
<label for="check_2" class="check"><span>Laptop</span></label>
</div>
<div>
<input type="checkbox" value="none" id="check_3" name="checklist">
<label for="check_3" class="check"><span>Phone</span></label>
</div>
<div>
<input type="checkbox" value="none" id="check_4" name="checklist">
<label for="check_4" class="check"><span>Office Space</span></label>
</div>
<div>
<input type="checkbox" value="none" id="check_5" name="checklist">
<label for="check_5" class="check"><span>Computer Setup/Verify in Location</span></label>
</div>
</div>
</fieldset>
</div>
<br>
<fieldset>
<legend>Additional Comments</legend>
<label for="text_6" class="text">Please briefly describe your concern:</label>
<input type="text" value="" id="text_6" placeholder="Enter Additional Comments Here" name="name">
</fieldset>
</fieldset>
</div>
<!---Return to Work Option -->
<div class="showhide" id="div-3">
<fieldset>
<legend>Employee Information</legend>
<label for="text_1" class="text">Enter Employee Full Name:</label>
<input type="text" value="" id="text_1" placeholder="Enter First & Last Name" name="name">
<br>
<label for="text_2" class="text">One ID & Employee ID:</label>
<input type="text" value="" id="text_2" placeholder="Enter One ID & Employee ID" name="name">
<br>
<p>Department</p>
<select>
<option selected value="" disabled selected>Department</option>
<option value="1">HR</option>
<option value="2">AP</option>
<option value="3">SC-AM</option>
<option value="4">SC-PM</option>
<option value="5">FC-AM</option>
<option value="6">FC-PM</option>
<option value="7">INB-AM</option>
<option value="8">INB-PM</option>
<option value="9">IO</option>
<option value="10">Maintenace</option>
<option value="11">Shipping-AM</option>
<option value="12">sHIPPING-PM</option>
<option value="13">Computer Room</option>
</select>
<br>
<fieldset>
<legend>I/O or Manager Approved</legend>
<label for="text_6" class="text">Enter I/O or Manager Email Address:</label>
<input type="text" value="" id="text_6" placeholder="Enter Email Address" name="name">
</fieldset>
<br>
<div class="question">
<fieldset>
<legend>Additional Access/Accessories</legend>
<p>Select All That Apply:</p>
<div class="question-answer checkbox-item">
<div>
<input type="checkbox" value="none" id="check_1" name="checklist">
<label for="check_1" class="check"><span>Full DCS Access : DC NET, Email Lists, K Drive, AS400, Shared, etcDrive,</span></label>
</div>
<div>
<input type="checkbox" value="none" id="check_2" name="checklist">
<label for="check_2" class="check"><span>Laptop</span></label>
</div>
<div>
<input type="checkbox" value="none" id="check_3" name="checklist">
<label for="check_3" class="check"><span>Phone</span></label>
</div>
<div>
<input type="checkbox" value="none" id="check_4" name="checklist">
<label for="check_4" class="check"><span>Office Space</span></label>
</div>
<div>
<input type="checkbox" value="none" id="check_5" name="checklist">
<label for="check_5" class="check"><span>Computer Setup/Verify in Location</span></label>
</div>
</div>
</fieldset>
</div>
<br>
<fieldset>
<legend>Additional Comments</legend>
<label for="text_6" class="text">Please briefly describe your concern:</label>
<input type="text" value="" id="text_6" placeholder="Enter Additional Comments Here" name="name">
</fieldset>
</fieldset>
</div>
<!---Terminate DCS or I/O Option -->
<div class="showhide" id="div-4">
<fieldset>
<legend>Employee Information</legend>
<label for="text_3" class="text">Enter I/O or DCS Full Name:</label>
<input type="text" value="" id="text_3" placeholder="Enter I/O or DCS Full Name" name="name">
<br>
<label for="text_2" class="text">One ID & Employee ID:</label>
<input type="text" value="" id="text_2" placeholder="Enter One ID & Employee ID" name="name">
<br>
<p>Termination Date:</p>
<input type="datetime-local" name="bdate">
<br>
<p>Department</p>
<select>
<option selected value="" disabled selected>Department</option>
<option value="1">HR</option>
<option value="2">AP</option>
<option value="3">SC-AM</option>
<option value="4">SC-PM</option>
<option value="5">FC-AM</option>
<option value="6">FC-PM</option>
<option value="7">INB-AM</option>
<option value="8">INB-PM</option>
<option value="9">IO</option>
<option value="10">Maintenace</option>
<option value="11">Shipping-AM</option>
<option value="12">sHIPPING-PM</option>
<option value="13">Computer Room</option>
</select>
<br>
<fieldset>
<legend>I/O or Manager Approved</legend>
<label for="text_6" class="text">Enter I/O or Manager Email Address:</label>
<input type="text" value="" id="text_6" placeholder="Enter Email Address" name="name">
</fieldset>
<br>
<fieldset>
<legend>Additional Comments</legend>
<label for="text_6" class="text">Please briefly describe your concern:</label>
<input type="text" value="" id="text_6" placeholder="Enter Additional Comments Here" name="name">
</fieldset>
</fieldset>
</div>
<!---Terminate TM Option -->
<div class="showhide" id="div-5">
<fieldset>
<legend>Employee Information</legend>
<label for="text_4" class="text">Enter TM Full Name:</label>
<input type="text" value="" id="text_4" placeholder="Enter TM Full Name" name="name">
<br>
<label for="text_2" class="text">One ID & Employee ID:</label>
<input type="text" value="" id="text_2" placeholder="Enter One ID & Employee ID" name="name">
<br>
<p>Termination Date:</p>
<input type="datetime-local" name="bdate">
<br>
<fieldset>
<legend>DCS Approved</legend>
<label for="text_7" class="text">Enter DCS Email Address:</label>
<input type="text" value="" id="text_7" placeholder="Enter Email Address" name="name">
</fieldset>
<br>
<fieldset>
<legend>Additional Comments</legend>
<label for="text_6" class="text">Please briefly describe your concern:</label>
<input type="text" value="" id="text_6" placeholder="Enter Additional Comments Here" name="name">
</fieldset>
</fieldset>
</div>
<br>
<div class="btn-block">
<button type="submit" href="/">Submit Your Request</button>
</div>
</form>
</div>

One way is to actually remove the elements that are hidden from the DOM before you submit:
$("form").submit(function(e) {
$(this).children(':hidden').remove();
});
$(function() {
$("form").submit(function(e) {
$(this).children(':hidden').remove();
});
// listen for changes
$('input[type="radio"]').on('change', function() {
// get checked one
var $target = $('input[type="radio"]:checked');
// hide all divs with .showhide class
$(".showhide").hide();
// show div that corresponds to selected radio.
$($target.attr('data-section')).show();
// trigger the change on page load
}).trigger('change');
});
html,
body {
min-height: 100%;
}
body,
div,
form,
input,
select,
textarea,
p {
padding: 0;
margin: 0;
outline: none;
font-family: Roboto, Arial, sans-serif;
font-size: 14px;
color: #666;
line-height: 22px;
}
h1 {
position: absolute;
margin: 0;
font-size: 32px;
color: #fff;
z-index: 2;
}
legend {
color: #fff;
background-color: #095484;
padding: 3px 5px;
font-size: 20px;
}
h5 {
margin: 10px 0;
}
.testbox {
display: flex;
justify-content: center;
align-items: center;
height: inherit;
padding: 20px;
}
form {
width: 50%;
padding: 20px;
border-radius: 6px;
background: #fff;
box-shadow: 0 0 20px 0 #095484;
}
.banner {
position: relative;
height: 210px;
background-image: url("//pww-wwdweb01/c$/inetpub/wwwroot/Krishneel/OnBoarding/Walgreen.jpg");
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.banner::after {
content: "";
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
width: 100%;
height: 100%;
}
input,
select,
textarea {
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 3px;
}
input {
width: calc(100% - 10px);
padding: 5px;
}
select {
width: 100%;
padding: 7px 0;
background: transparent;
}
textarea {
width: calc(100% - 12px);
padding: 5px;
}
.item:hover p,
.item:hover i,
.question:hover p,
.question label:hover,
input:hover::placeholder,
a {
color: #095484;
}
.item input:hover,
.item select:hover,
.item textarea:hover {
border: 1px solid transparent;
box-shadow: 0 0 6px 0 #095484;
color: #095484;
}
input[type="date"]::-webkit-inner-spin-button {
display: none;
}
.showhide {
display: none;
}
.item i,
input[type="date"]::-webkit-calendar-picker-indicator {
position: absolute;
font-size: 20px;
color: #a9a9a9;
}
.item i {
right: 2%;
top: 30px;
z-index: 1;
}
[type="date"]::-webkit-calendar-picker-indicator {
right: 1%;
z-index: 2;
opacity: 0;
cursor: pointer;
}
input[type=radio],
input[type=checkbox] {
display: none;
}
label.radio,
label.check {
position: relative;
display: inline-block;
margin: 5px 20px 15px 0;
cursor: pointer;
}
.question span {
margin-left: 30px;
}
span.required {
margin-left: 0;
color: red;
}
.checkbox-item label {
margin: 5px 20px 10px 0;
}
label.radio:before,
label.check:before {
content: "";
position: absolute;
left: 0;
}
label.radio:before {
width: 17px;
height: 17px;
border-radius: 50%;
border: 2px solid #095484;
}
label.check:before {
top: 2px;
width: 16px;
height: 16px;
border-radius: 2px;
border: 1px solid #095484;
}
input[type=checkbox]:checked+.check:before {
background: #095484;
}
label.radio:after {
left: 5px;
border: 3px solid #095484;
}
label.check:after {
left: 4px;
border: 3px solid #fff;
}
label.radio:after,
label.check:after {
content: "";
position: absolute;
top: 6px;
width: 8px;
height: 4px;
background: transparent;
border-top: none;
border-right: none;
transform: rotate(-45deg);
opacity: 0;
}
input[type=radio]:checked+label:after,
input[type=checkbox]:checked+label:after {
opacity: 1;
}
.btn-block {
margin-top: 10px;
text-align: center;
}
button {
width: 200px;
padding: 10px;
border: none;
border-radius: 5px;
background: #095484;
font-size: 16px;
color: #fff;
cursor: pointer;
}
button:hover {
background: #0666a3;
}
#media (min-width: 568px) {
.city-item {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.city-item input {
width: calc(50% - 20px);
}
.city-item select {
width: calc(50% - 8px);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="testbox">
<form action="mailto:someone#example.com" method="post" enctype="text/plain">
<div class="banner">
<h1>Employment Form</h1>
</div><br>
<p>Please fill out with the information that is requested below and submit the employment verification form. Thank you!</p>
<br>
<div class="question">
<fieldset>
<legend>Employee Status</legend>
<p>Choose Employee Status:<span class="required">*</span></p>
<div class="question-answer">
<input type="radio" value="none" id="radio_1" name="investigator" data-section="#div-1" />
<label for="radio_1" class="radio"><span>New Hire</span></label>
<br>
<input type="radio" value="none" id="radio_2" name="investigator" data-section="#div-2" />
<label for="radio_2" class="radio"><span>Upgrade Credentials to DCS</span></label>
<br>
<input type="radio" value="none" id="radio_3" name="investigator" data-section="#div-3">
<label for="radio_3" class="radio"><span>Return to Work</span></label>
<br>
<input type="radio" value="none" id="radio_4" name="investigator" data-section="#div-4">
<label for="radio_4" class="radio"><span>Terminate Access DCS or Above</span></label>
<br>
<input type="radio" value="none" id="radio_5" name="investigator" data-section="#div-5">
<label for="radio_5" class="radio"><span>Terminate Access TM AS400</span></label>
</div>
</fieldset>
</div>
<br>
<!---New Hire Option -->
<div class="showhide" id="div-1">
<fieldset>
<legend>Employee Information</legend>
<label for="text_1" class="text">Enter Employee Full Name:</label>
<input type="text" value="" id="text_1" placeholder="Enter First & Last Name" name="name">
<br>
<label for="text_2" class="text">One ID & Employee ID:</label>
<input type="text" value="" id="text_2" placeholder="Enter One ID & Employee ID" name="name">
<br>
<p>Date</p>
<input type="datetime-local" name="bdate">
<p>Department</p>
<select>
<option selected value="" disabled selected>Department</option>
<option value="1">HR</option>
<option value="2">AP</option>
<option value="3">SC-AM</option>
<option value="4">SC-PM</option>
<option value="5">FC-AM</option>
<option value="6">FC-PM</option>
<option value="7">INB-AM</option>
<option value="8">INB-PM</option>
<option value="9">IO</option>
<option value="10">Maintenace</option>
<option value="11">Shipping-AM</option>
<option value="12">sHIPPING-PM</option>
<option value="13">Computer Room</option>
</select>
<p>User On-Boarding Notification Info:</p>
<textarea rows="4"></textarea>
<br>
<fieldset>
<legend>I/O or Manager Approved</legend>
<label for="text_6" class="text">Enter I/O or Manager Email Address:</label>
<input type="text" value="" id="text_6" placeholder="Enter Email Address" name="name">
</fieldset>
</fieldset>
<br>
<div class="question">
<fieldset>
<legend>Additional Access/Accessories</legend>
<p>Select All That Apply:</p>
<div class="question-answer checkbox-item">
<div>
<input type="checkbox" value="none" id="check_1" name="checklist">
<label for="check_1" class="check"><span>Full DCS Access : DC NET, Email Lists, K Drive, AS400, Shared, etcDrive,</span></label>
</div>
<div>
<input type="checkbox" value="none" id="check_2" name="checklist">
<label for="check_2" class="check"><span>Laptop</span></label>
</div>
<div>
<input type="checkbox" value="none" id="check_3" name="checklist">
<label for="check_3" class="check"><span>Phone</span></label>
</div>
<div>
<input type="checkbox" value="none" id="check_4" name="checklist">
<label for="check_4" class="check"><span>Office Space</span></label>
</div>
<div>
<input type="checkbox" value="none" id="check_5" name="checklist">
<label for="check_5" class="check"><span>Computer Setup/Verify in Location</span></label>
</div>
</div>
</fieldset>
</div>
<br>
<fieldset>
<legend>Additional Comments</legend>
<label for="text_6" class="text">Please briefly describe your concern:</label>
<input type="text" value="" id="text_6" placeholder="Enter Additional Comments Here" name="name">
</fieldset>
</div>
<!---Upgrade Creditials Option -->
<div class="showhide" id="div-2">
<fieldset>
<legend>Employee Information</legend>
<label for="text_1" class="text">Enter Employee Full Name:</label>
<input type="text" value="" id="text_1" placeholder="Enter First & Last Name" name="name">
<br>
<label for="text_2" class="text">One ID & Employee ID:</label>
<input type="text" value="" id="text_2" placeholder="Enter One ID & Employee ID" name="name">
<br>
<p>Date</p>
<input type="datetime-local" name="bdate">
<br>
<p>Department</p>
<select>
<option selected value="" disabled selected>Department</option>
<option value="1">HR</option>
<option value="2">AP</option>
<option value="3">SC-AM</option>
<option value="4">SC-PM</option>
<option value="5">FC-AM</option>
<option value="6">FC-PM</option>
<option value="7">INB-AM</option>
<option value="8">INB-PM</option>
<option value="9">IO</option>
<option value="10">Maintenace</option>
<option value="11">Shipping-AM</option>
<option value="12">sHIPPING-PM</option>
<option value="13">Computer Room</option>
</select>
<br>
<fieldset>
<legend>I/O or Manager Approved</legend>
<label for="text_6" class="text">Enter I/O or Manager Email Address:</label>
<input type="text" value="" id="text_6" placeholder="Enter Email Address" name="name">
</fieldset>
<br>
<div class="question">
<fieldset>
<legend>Additional Access/Accessories</legend>
<p>Select All That Apply:</p>
<div class="question-answer checkbox-item">
<div>
<input type="checkbox" value="none" id="check_1" name="checklist">
<label for="check_1" class="check"><span>Full DCS Access : DC NET, Email Lists, K Drive, AS400, Shared, etcDrive,</span></label>
</div>
<div>
<input type="checkbox" value="none" id="check_2" name="checklist">
<label for="check_2" class="check"><span>Laptop</span></label>
</div>
<div>
<input type="checkbox" value="none" id="check_3" name="checklist">
<label for="check_3" class="check"><span>Phone</span></label>
</div>
<div>
<input type="checkbox" value="none" id="check_4" name="checklist">
<label for="check_4" class="check"><span>Office Space</span></label>
</div>
<div>
<input type="checkbox" value="none" id="check_5" name="checklist">
<label for="check_5" class="check"><span>Computer Setup/Verify in Location</span></label>
</div>
</div>
</fieldset>
</div>
<br>
<fieldset>
<legend>Additional Comments</legend>
<label for="text_6" class="text">Please briefly describe your concern:</label>
<input type="text" value="" id="text_6" placeholder="Enter Additional Comments Here" name="name">
</fieldset>
</fieldset>
</div>
<!---Return to Work Option -->
<div class="showhide" id="div-3">
<fieldset>
<legend>Employee Information</legend>
<label for="text_1" class="text">Enter Employee Full Name:</label>
<input type="text" value="" id="text_1" placeholder="Enter First & Last Name" name="name">
<br>
<label for="text_2" class="text">One ID & Employee ID:</label>
<input type="text" value="" id="text_2" placeholder="Enter One ID & Employee ID" name="name">
<br>
<p>Department</p>
<select>
<option selected value="" disabled selected>Department</option>
<option value="1">HR</option>
<option value="2">AP</option>
<option value="3">SC-AM</option>
<option value="4">SC-PM</option>
<option value="5">FC-AM</option>
<option value="6">FC-PM</option>
<option value="7">INB-AM</option>
<option value="8">INB-PM</option>
<option value="9">IO</option>
<option value="10">Maintenace</option>
<option value="11">Shipping-AM</option>
<option value="12">sHIPPING-PM</option>
<option value="13">Computer Room</option>
</select>
<br>
<fieldset>
<legend>I/O or Manager Approved</legend>
<label for="text_6" class="text">Enter I/O or Manager Email Address:</label>
<input type="text" value="" id="text_6" placeholder="Enter Email Address" name="name">
</fieldset>
<br>
<div class="question">
<fieldset>
<legend>Additional Access/Accessories</legend>
<p>Select All That Apply:</p>
<div class="question-answer checkbox-item">
<div>
<input type="checkbox" value="none" id="check_1" name="checklist">
<label for="check_1" class="check"><span>Full DCS Access : DC NET, Email Lists, K Drive, AS400, Shared, etcDrive,</span></label>
</div>
<div>
<input type="checkbox" value="none" id="check_2" name="checklist">
<label for="check_2" class="check"><span>Laptop</span></label>
</div>
<div>
<input type="checkbox" value="none" id="check_3" name="checklist">
<label for="check_3" class="check"><span>Phone</span></label>
</div>
<div>
<input type="checkbox" value="none" id="check_4" name="checklist">
<label for="check_4" class="check"><span>Office Space</span></label>
</div>
<div>
<input type="checkbox" value="none" id="check_5" name="checklist">
<label for="check_5" class="check"><span>Computer Setup/Verify in Location</span></label>
</div>
</div>
</fieldset>
</div>
<br>
<fieldset>
<legend>Additional Comments</legend>
<label for="text_6" class="text">Please briefly describe your concern:</label>
<input type="text" value="" id="text_6" placeholder="Enter Additional Comments Here" name="name">
</fieldset>
</fieldset>
</div>
<!---Terminate DCS or I/O Option -->
<div class="showhide" id="div-4">
<fieldset>
<legend>Employee Information</legend>
<label for="text_3" class="text">Enter I/O or DCS Full Name:</label>
<input type="text" value="" id="text_3" placeholder="Enter I/O or DCS Full Name" name="name">
<br>
<label for="text_2" class="text">One ID & Employee ID:</label>
<input type="text" value="" id="text_2" placeholder="Enter One ID & Employee ID" name="name">
<br>
<p>Termination Date:</p>
<input type="datetime-local" name="bdate">
<br>
<p>Department</p>
<select>
<option selected value="" disabled selected>Department</option>
<option value="1">HR</option>
<option value="2">AP</option>
<option value="3">SC-AM</option>
<option value="4">SC-PM</option>
<option value="5">FC-AM</option>
<option value="6">FC-PM</option>
<option value="7">INB-AM</option>
<option value="8">INB-PM</option>
<option value="9">IO</option>
<option value="10">Maintenace</option>
<option value="11">Shipping-AM</option>
<option value="12">sHIPPING-PM</option>
<option value="13">Computer Room</option>
</select>
<br>
<fieldset>
<legend>I/O or Manager Approved</legend>
<label for="text_6" class="text">Enter I/O or Manager Email Address:</label>
<input type="text" value="" id="text_6" placeholder="Enter Email Address" name="name">
</fieldset>
<br>
<fieldset>
<legend>Additional Comments</legend>
<label for="text_6" class="text">Please briefly describe your concern:</label>
<input type="text" value="" id="text_6" placeholder="Enter Additional Comments Here" name="name">
</fieldset>
</fieldset>
</div>
<!---Terminate TM Option -->
<div class="showhide" id="div-5">
<fieldset>
<legend>Employee Information</legend>
<label for="text_4" class="text">Enter TM Full Name:</label>
<input type="text" value="" id="text_4" placeholder="Enter TM Full Name" name="name">
<br>
<label for="text_2" class="text">One ID & Employee ID:</label>
<input type="text" value="" id="text_2" placeholder="Enter One ID & Employee ID" name="name">
<br>
<p>Termination Date:</p>
<input type="datetime-local" name="bdate">
<br>
<fieldset>
<legend>DCS Approved</legend>
<label for="text_7" class="text">Enter DCS Email Address:</label>
<input type="text" value="" id="text_7" placeholder="Enter Email Address" name="name">
</fieldset>
<br>
<fieldset>
<legend>Additional Comments</legend>
<label for="text_6" class="text">Please briefly describe your concern:</label>
<input type="text" value="" id="text_6" placeholder="Enter Additional Comments Here" name="name">
</fieldset>
</fieldset>
</div>
<br>
<div class="btn-block">
<button type="submit" href="/">Submit Your Request</button>
</div>
</form>
</div>

how to use preventDefault() for specified form fields?

I have a task to use preventDefault() on a form I created before using HTML and CSS. I am not sure how to use preventDefault() and how to use it only for the fields my task asks.
The fields which need to go through the preventDefault() process are name, email address, address and postcode, the 'keep me informed' box is not checked.
form{
background-color: rgb(190, 231, 190);
padding: 5pt;
margin: 0 auto;
width:30%;
border: 1pt solid black;
}
legend{
background-color: rgb(134, 97, 28);
margin: auto;
padding-inline: 20%;
padding-top: 2pt;
padding-bottom: 2pt;
color: white;
}
fieldset{
padding: 10pt;
}
#p1, #p3{
background-color: white;
padding: 5pt;
}
#p3{
padding-left: 30%;
padding-right: 25%;
}
#p3 input{
background-color: rgb(134, 97, 28);
border-radius: 7pt;
color: white;
padding: 5pt;
width: 75pt;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Topic 4, Exercise 4 (Miguel Divo)</title>
</head>
<body>
<form>
<fieldset>
<legend>Shirt Order Form</legend>
<p>
<label>Shirt Size</label>
</p>
<p>
<select name="shirt_size" >
<option>Choose Size</option>
<option>XS</option>
<option>S</option>
<option>M</option>
<option>L</option>
<option>XL</option>
</select>
</p>
<p>
<label>Sleeves</label>
</p>
<p>
<input type="radio" name="sleeve" value="1" >Short<br>
<input type="radio" name="sleeve" value="2" >Long<br>
</p>
<p>
<label>Choose Shirt Colour</label>
</p>
<p>
<input type="color" name="colourChoice" >
</p>
<p>
<label>Quantity</label>
</p>
<p>
<input type="number" name="quantity" >
</p>
<p>
<label>Date Requested</label>
</p>
<p>
<input type="date" name="date" >
</p>
</fieldset>
<br>
<fieldset>
<p>
<label>Name</label>
</p>
<p>
<input type="text" name="name" >
</p>
<p>
<label>Email</label>
</p>
<p>
<input type="email" name="email" >
</p>
<p>Telephone Number</p>
<p>
<input type="text" name="phone"
pattern="[4]{2}[-][0-9]{3}[-][0-9]{3}[-][0-9]{4}" > Example: 44-207-882-1234
</p>
</fieldset>
<br>
<fieldset>
<p>
<label>Address</label>
</p>
<p>
<input type="text" name="address" >
</p>
<p>
<label>City</label>
</p>
<p>
<input type="text" name="city" list="cities" >
<datalist id="cities">
<option>Birmingham</option>
<option>Glasgow</option>
<option>London</option>
<option>Manchester</option>
</datalist>
</input>
</p>
<p>
<label>Postcode</label>
</p>
<p>
<input type="text" name="postcode" >
</p>
</fieldset>
<br>
<p id="p1">
Please keep me informed about future shirt designs<input type="checkbox" name="accept">
</p>
<p id="p3">
<input type="submit">
<input type="reset" value="Clear Form">
</p>
</form>
<script src="preventDefault.js"></script>
</body>
</html>

If you want to prevent form submission using preventDefault when the specific fields are not filled out
window.addEventListener("load", function() {
const orderForm = document.getElementById("orderForm")
orderForm.addEventListener("submit", function(event) {
if (orderForm.querySelector("[name=accept]").checked) {
const valid = ["name", "email", "address", "address", "postcode"]
.filter(fieldName => orderForm.querySelector("[name=" + fieldName + "]").value === "").length === 0; // count empty
if (!valid) {
console.log("empty fields")
event.preventDefault()
}
}
})
})
form {
background-color: rgb(190, 231, 190);
padding: 5pt;
margin: 0 auto;
width: 30%;
border: 1pt solid black;
}
legend {
background-color: rgb(134, 97, 28);
margin: auto;
padding-inline: 20%;
padding-top: 2pt;
padding-bottom: 2pt;
color: white;
}
fieldset {
padding: 10pt;
}
#p1,
#p3 {
background-color: white;
padding: 5pt;
}
#p3 {
padding-left: 30%;
padding-right: 25%;
}
#p3 input {
background-color: rgb(134, 97, 28);
border-radius: 7pt;
color: white;
padding: 5pt;
width: 75pt;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Topic 4, Exercise 4 (Miguel Divo)</title>
</head>
<body>
<form id="orderForm">
<fieldset>
<legend>Shirt Order Form</legend>
<p>
<label>Shirt Size</label>
</p>
<p>
<select name="shirt_size">
<option>Choose Size</option>
<option>XS</option>
<option>S</option>
<option>M</option>
<option>L</option>
<option>XL</option>
</select>
</p>
<p>
<label>Sleeves</label>
</p>
<p>
<input type="radio" name="sleeve" value="1">Short<br>
<input type="radio" name="sleeve" value="2">Long<br>
</p>
<p>
<label>Choose Shirt Colour</label>
</p>
<p>
<input type="color" name="colourChoice">
</p>
<p>
<label>Quantity</label>
</p>
<p>
<input type="number" name="quantity">
</p>
<p>
<label>Date Requested</label>
</p>
<p>
<input type="date" name="date">
</p>
</fieldset>
<br>
<fieldset>
<p>
<label>Name</label>
</p>
<p>
<input type="text" name="name">
</p>
<p>
<label>Email</label>
</p>
<p>
<input type="email" name="email">
</p>
<p>Telephone Number</p>
<p>
<input type="text" name="phone" pattern="[4]{2}[-][0-9]{3}[-][0-9]{3}[-][0-9]{4}"> Example: 44-207-882-1234
</p>
</fieldset>
<br>
<fieldset>
<p>
<label>Address</label>
</p>
<p>
<input type="text" name="address">
</p>
<p>
<label>City</label>
</p>
<p>
<input type="text" name="city" list="cities">
<datalist id="cities">
<option>Birmingham</option>
<option>Glasgow</option>
<option>London</option>
<option>Manchester</option>
</datalist>
</input>
</p>
<p>
<label>Postcode</label>
</p>
<p>
<input type="text" name="postcode">
</p>
</fieldset>
<br>
<p id="p1">
Please keep me informed about future shirt designs<input type="checkbox" name="accept">
</p>
<p id="p3">
<input type="submit">
<input type="reset" value="Clear Form">
</p>
</form>
<script src="preventDefault.js"></script>
</body>
</html>
this can also be achieved by simply adding required on each of the tags in question
window.addEventListener("load", function() {
const orderForm = document.getElementById("orderForm")
orderForm.querySelector("[name=accept]").addEventListener("change", function() {
const req = this.checked;
["name", "email", "address", "address", "postcode"].forEach(fieldName =>
orderForm.querySelector("[name=" + fieldName + "]").required = req);
})
})
form {
background-color: rgb(190, 231, 190);
padding: 5pt;
margin: 0 auto;
width: 30%;
border: 1pt solid black;
}
legend {
background-color: rgb(134, 97, 28);
margin: auto;
padding-inline: 20%;
padding-top: 2pt;
padding-bottom: 2pt;
color: white;
}
fieldset {
padding: 10pt;
}
#p1,
#p3 {
background-color: white;
padding: 5pt;
}
#p3 {
padding-left: 30%;
padding-right: 25%;
}
#p3 input {
background-color: rgb(134, 97, 28);
border-radius: 7pt;
color: white;
padding: 5pt;
width: 75pt;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Topic 4, Exercise 4 (Miguel Divo)</title>
</head>
<body>
<form id="orderForm">
<fieldset>
<legend>Shirt Order Form</legend>
<p>
<label>Shirt Size</label>
</p>
<p>
<select name="shirt_size">
<option>Choose Size</option>
<option>XS</option>
<option>S</option>
<option>M</option>
<option>L</option>
<option>XL</option>
</select>
</p>
<p>
<label>Sleeves</label>
</p>
<p>
<input type="radio" name="sleeve" value="1">Short<br>
<input type="radio" name="sleeve" value="2">Long<br>
</p>
<p>
<label>Choose Shirt Colour</label>
</p>
<p>
<input type="color" name="colourChoice">
</p>
<p>
<label>Quantity</label>
</p>
<p>
<input type="number" name="quantity">
</p>
<p>
<label>Date Requested</label>
</p>
<p>
<input type="date" name="date">
</p>
</fieldset>
<br>
<fieldset>
<p>
<label>Name</label>
</p>
<p>
<input type="text" name="name">
</p>
<p>
<label>Email</label>
</p>
<p>
<input type="email" name="email">
</p>
<p>Telephone Number</p>
<p>
<input type="text" name="phone" pattern="[4]{2}[-][0-9]{3}[-][0-9]{3}[-][0-9]{4}"> Example: 44-207-882-1234
</p>
</fieldset>
<br>
<fieldset>
<p>
<label>Address</label>
</p>
<p>
<input type="text" name="address">
</p>
<p>
<label>City</label>
</p>
<p>
<input type="text" name="city" list="cities">
<datalist id="cities">
<option>Birmingham</option>
<option>Glasgow</option>
<option>London</option>
<option>Manchester</option>
</datalist>
</input>
</p>
<p>
<label>Postcode</label>
</p>
<p>
<input type="text" name="postcode">
</p>
</fieldset>
<br>
<p id="p1">
Please keep me informed about future shirt designs<input type="checkbox" name="accept">
</p>
<p id="p3">
<input type="submit">
<input type="reset" value="Clear Form">
</p>
</form>
<script src="preventDefault.js"></script>
</body>
</html>

you can do this:
<html>
<head>
<title>ejemplo de preventDefault</title>
<script type="text/javascript">
function stopDefAction(evt) {
evt.preventDefault();
}
</script>
</head>
<body>
<p>click on the box.</p>
<form>
<input type="checkbox" onclick="stopDefAction(event);"/>
<label for="checkbox">Select</label>
</form>
</body>
</html>
reference: https://developer.mozilla.org/es/docs/Web/API/Event/preventDefault

Checkbox not checking and hiding even if in the same form/div

How to make boxes checkable and not hiding when in the same form?
What works:
Button (hide/display)
Furnishing (dropdown)
Keyword Search (text input)
Bathroom (dropdown)
Save (button)
Search (button)
NOT WORKING:
All checkboxes
Size (2 text input)
How to make sure that I can use and check all the element of this form?
const more_form = document.getElementById('more_form');
const more_button = document.querySelector('div.more_button_wrapper button.more_button');
document.body.addEventListener('click', e => {
e.preventDefault();
e.stopPropagation();
if ((e.target == more_button && more_form.parentNode.style.visibility !== 'visible') || e.target == more_form || e.target.parentNode == more_form) {
more_form.parentNode.style.visibility = 'visible'
} else {
more_form.parentNode.style.visibility = 'hidden'
}
})
* {
margin: 0;
padding: 0;
/* border: thin solid blue;*/
font-family: 'Roboto', sans-serif;
}
html {
height: 100%;
}
body {
height: 100vh;
display: flex;
flex-direction: column;
}
.spacer {
min-height: 300px;
text-align: center;
}
.search_box_flex_main_container {
/* border: thick solid red;*/
display: flex;
justify-content: center;
flex-wrap: nowrap;
}
.button_wrapper {
background: white none repeat scroll 0% 0%;
border-radius: 6px;
height: 48px;
}
.button {
min-width: 120px;
}
.building_text_input {
min-width: 200px;
text-align: center;
}
.city_form {
text-align: center;
}
.more_button_container {
border: thick solid yellow;
}
.more_button_wrapper {
border: thick solid red;
}
.more_form {
display: flex;
flex-direction: column;
border: thick solid green;
}
.amenities_check_box_small_row_container {
display: flex;
}
form.more_form>* {
border: thin dotted blue;
}
<div class="more_button_container">
<p>Yellow: .more_button_container</p>
<div class="more_button_wrapper">
<p>Red: .more_button_wrapper</p>
<button class="more_button">More</button>
</div>
<div class="more_form_container" style="visibility: hidden;">
<form class="more_form" id="more_form">
<p>Green: .more_form</p>
<h4>Furnishing</h4>
<select>
<option value="show_all">Show All</option>
<option value="furnished">Furnished</option>
<option value="unfurnished">Unfurnished</option>
</select>
<h4>Amenities</h4>
<div class="amenities_check_box_small_row_container">
<input type="checkbox" id="maids_room" name="maids_room" value="maids_room">
<label for="maids_room"> Maids Room</label><br>
<input type="checkbox" id="study" name="study" value="study">
<label for="study"> Study</label><br>
</div>
<div class="amenities_check_box_small_row_container">
<input type="checkbox" id="central_ac" name="central_ad" value="central_ad">
<label for="central_ac"> Central AC </label><br>
<input type="checkbox" id="balcony" name="balcony" value="balcony">
<label for="balcony"> Balcony </label><br>
</div>
<div class="amenities_check_box_small_row_container">
<input type="checkbox" id="privet_garden" name="privet_garden" value="privet_garden">
<label for="privet_garden"> Private Garden </label><br>
<input type="checkbox" id="private_pool" name="private_pool" value="private_pool">
<label for="private_pool"> Private Pool </label><br>
</div>
<div class="amenities_check_box_small_row_container">
<input type="checkbox" id="private_gym" name="private_gym" value="private_gym">
<label for="private_gym"> Private Gym </label><br>
<input type="checkbox" id="private_jacuzzi" name="private_jacuzzi" value="private_jacuzzi">
<label for="private_jacuzzi"> Private Jacuzzi</label><br>
</div>
<div class="amenities_check_box_small_row_container">
<input type="checkbox" id="shared_pool" name="shared_pool" value="shared_pool">
<label for="shared_pool"> Shared Pool </label><br>
<input type="checkbox" id="shared_spa" name="shared_spa" value="shared_spa">
<label for="shared_spa"> Shared Spa </label><br>
</div>
<div class="amenities_check_box_small_row_container">
<input type="checkbox" id="shared_gym" name="shared_gym" value="shared_gym">
<label for="shared_gym"> Shared Gym </label><br>
<input type="checkbox" id="security" name="security" value="security">
<label for="security"> Security </label><br>
</div>
<div class="amenities_check_box_small_row_container">
<input type="checkbox" id="concierge_service" name="concierge_service" value="concierge_service">
<label for="concierge_service"> Concierge Service </label><br>
<input type="checkbox" id="maid_service" name="maid_service" value="maid_service">
<label for="maid_service"> Maid Service </label><br>
</div>
<div class="amenities_check_box_small_row_container">
<input type="checkbox" id="covered_parking" name="covered_parking" value="covered_parking">
<label for="covered_parking"> Covered Parking </label><br>
<input type="checkbox" id="built_in_wardrobe" name="built_in_wardrobe" value="built_in_wardrobe">
<label for="built_in_wardrobe"> Built-in Wardrobe </label><br>
</div>
<div class="amenities_check_box_small_row_container">
<input type="checkbox" id="walk_in_closet" name="walk_in_closet" value="walk_in_closet">
<label for="walk_in_closet"> Walk-in Closet </label><br>
<input type="checkbox" id="built_in_kitchen" name="built_in_kitchen" value="built_in_kitchen">
<label for="built_in_kitchen"> Built-in Kitchen </label><br>
</div>
<div class="amenities_check_box_small_row_container">
<input type="checkbox" id="view_of_water" name="view_of_water" value="view_of_water">
<label for="view_of_water"> View Of Water </label><br>
<input type="checkbox" id="view_of_landmark" name="view_of_landmark" value="view_of_landmark">
<label for="view_of_landmark"> View Of Landmark </label><br>
</div>
<div class="amenities_check_box_small_row_container">
<input type="checkbox" id="pets_allowed" name="pets_allowed" value="pets_allowed">
<label for="pets_allowed"> Pets Allowed </label><br>
</div>
<h4>Rent Is Paid</h4>
<div class="amenities_check_box_small_row_container">
<input type="checkbox" id="yearly" name="yearly" value="yearly">
<label for="yearly"> Yearly </label><br>
<input type="checkbox" id="bi_yearly" name="bi_yearly" value="bi_yearly">
<label for="bi_yearly"> Bi-Yearly </label><br>
</div>
<div class="amenities_check_box_small_row_container">
<input type="checkbox" id="quarterly" name="quarterly" value="quarterly">
<label for="quarterly"> Quarterly </label><br>
<input type="checkbox" id="monthly" name="monthly" value="monthly">
<label for="monthly"> Monthly </label><br>
</div>
<h4>Keyword Search</h4>
<input type="text" placeholder="Eg. Pool, Security, Ref.ID Number">
<h4>Bathroom</h4>
<select>
<option value="one_bathroom">1 Bathroom or More</option>
<option value="two_bathroom">2 Bathroom or More</option>
<option value="three_bathroom">3 Bathroom or More</option>
<option value="four_bathroom">4 Bathroom or More</option>
<option value="five_bathroom">5 Bathroom or More</option>
<option value="six_bathroom">6 Bathroom or More</option>
<option value="seven_bathroom">7 Bathroom or More</option>
<option value="eight_bathroom">8 Bathroom or More</option>
<option value="nine_bathroom">9 Bathroom or More</option>
<option value="ten_bathroom">10 Bathroom or More</option>
<option value="eleven_bathroom">11 Bathroom or More</option>
<option value="twelve_bathroom">12 Bathroom or More</option>
</select>
<div class="amenities_check_box_small_row_container">
<h4>Size</h4>
<input type="number">
<input type="number">
</div>
<div class="amenities_check_box_small_row_container">
<h4>Ads with video only</h4>
<input type="checkbox" id="ads_with_video_only" name="ads_with_video_only" value="ads_with_video_only">
<h4>Ads with tour only</h4>
<input type="checkbox" id="ads_with_tour_only" name="ads_with_tour_only" value="ads_with_tour_only">
</div>
<div class="amenities_check_box_small_row_container">
<button> Save </button>
<button> Search </button>
</div>
</form>
</div>
</div>

One way that you might do this with an unlimited number ( potentially ) of form elements would be to make use of form.elements and check that the target clicked is within that collection
const form = document.forms.more_form;
const bttn = document.querySelector('div.bttn_wrapper button.bttn');
document.body.addEventListener('click', e => {
e.stopPropagation();
const elems=Array.from( form.elements );
if (( e.target == bttn && more_form.parentNode.style.visibility !== 'visible' ) || e.target == more_form || e.target.parentNode == more_form || elems.includes( e.target ) ) {
form.parentNode.style.visibility = 'visible'
} else {
form.parentNode.style.visibility = 'hidden'
}
})
* {
margin: 0;
padding: 0;
/* border: thin solid blue;*/
font-family: 'Roboto', sans-serif;
}
html {
height: 100%;
}
body {
height: 100vh;
display: flex;
flex-direction: column;
}
.spacer {
min-height: 300px;
text-align: center;
}
.search_box_flex_main_container {
/* border: thick solid red;*/
display: flex;
justify-content: center;
flex-wrap: nowrap;
}
.button_wrapper {
background: white none repeat scroll 0% 0%;
border-radius: 6px;
height: 48px;
}
.button {
min-width: 120px;
}
.building_text_input {
min-width: 200px;
text-align: center;
}
.city_form {
text-align: center;
}
.more_button_container {
border: thick solid yellow;
}
.more_button_wrapper {
border: thick solid red;
}
.more_form {
display: flex;
flex-direction: column;
border: thick solid green;
}
.amenities_check_box_small_row_container {
display: flex;
}
form.more_form>* {
border: thin dotted blue;
}
[type='checkbox']{margin:0 1rem;}
form{background:pink}
<div class="bttn_container">
<p>Yellow: .bttn_container</p>
<div class="bttn_wrapper">
<p>Red: .bttn_wrapper</p>
<button class="bttn">More</button>
</div>
<div class="more_form_container" style="visibility: hidden;">
<form class="more_form" name="more_form">
<p>Green: .more_form</p>
<h4>Furnishing</h4>
<select>
<option value="show_all">Show All</option>
<option value="furnished">Furnished</option>
<option value="unfurnished">Unfurnished</option>
</select>
<h4>Amenities</h4>
<div class="amenities_check_box_small_row_container">
<input type="checkbox" id="maids_room" name="maids_room" value="maids_room">
<label for="maids_room"> Maids Room</label><br>
<input type="checkbox" id="study" name="study" value="study">
<label for="study"> Study</label><br>
</div>
<div class="amenities_check_box_small_row_container">
<input type="checkbox" id="central_ac" name="central_ad" value="central_ad">
<label for="central_ac"> Central AC </label><br>
<input type="checkbox" id="balcony" name="balcony" value="balcony">
<label for="balcony"> Balcony </label><br>
</div>
<div class="amenities_check_box_small_row_container">
<input type="checkbox" id="privet_garden" name="privet_garden" value="privet_garden">
<label for="privet_garden"> Private Garden </label><br>
<input type="checkbox" id="private_pool" name="private_pool" value="private_pool">
<label for="private_pool"> Private Pool </label><br>
</div>
<div class="amenities_check_box_small_row_container">
<input type="checkbox" id="private_gym" name="private_gym" value="private_gym">
<label for="private_gym"> Private Gym </label><br>
<input type="checkbox" id="private_jacuzzi" name="private_jacuzzi" value="private_jacuzzi">
<label for="private_jacuzzi"> Private Jacuzzi</label><br>
</div>
<div class="amenities_check_box_small_row_container">
<input type="checkbox" id="shared_pool" name="shared_pool" value="shared_pool">
<label for="shared_pool"> Shared Pool </label><br>
<input type="checkbox" id="shared_spa" name="shared_spa" value="shared_spa">
<label for="shared_spa"> Shared Spa </label><br>
</div>
<div class="amenities_check_box_small_row_container">
<input type="checkbox" id="shared_gym" name="shared_gym" value="shared_gym">
<label for="shared_gym"> Shared Gym </label><br>
<input type="checkbox" id="security" name="security" value="security">
<label for="security"> Security </label><br>
</div>
<div class="amenities_check_box_small_row_container">
<input type="checkbox" id="concierge_service" name="concierge_service" value="concierge_service">
<label for="concierge_service"> Concierge Service </label><br>
<input type="checkbox" id="maid_service" name="maid_service" value="maid_service">
<label for="maid_service"> Maid Service </label><br>
</div>
<div class="amenities_check_box_small_row_container">
<input type="checkbox" id="covered_parking" name="covered_parking" value="covered_parking">
<label for="covered_parking"> Covered Parking </label><br>
<input type="checkbox" id="built_in_wardrobe" name="built_in_wardrobe" value="built_in_wardrobe">
<label for="built_in_wardrobe"> Built-in Wardrobe </label><br>
</div>
<div class="amenities_check_box_small_row_container">
<input type="checkbox" id="walk_in_closet" name="walk_in_closet" value="walk_in_closet">
<label for="walk_in_closet"> Walk-in Closet </label><br>
<input type="checkbox" id="built_in_kitchen" name="built_in_kitchen" value="built_in_kitchen">
<label for="built_in_kitchen"> Built-in Kitchen </label><br>
</div>
<div class="amenities_check_box_small_row_container">
<input type="checkbox" id="view_of_water" name="view_of_water" value="view_of_water">
<label for="view_of_water"> View Of Water </label><br>
<input type="checkbox" id="view_of_landmark" name="view_of_landmark" value="view_of_landmark">
<label for="view_of_landmark"> View Of Landmark </label><br>
</div>
<div class="amenities_check_box_small_row_container">
<input type="checkbox" id="pets_allowed" name="pets_allowed" value="pets_allowed">
<label for="pets_allowed"> Pets Allowed </label><br>
</div>
<h4>Rent Is Paid</h4>
<div class="amenities_check_box_small_row_container">
<input type="checkbox" id="yearly" name="yearly" value="yearly">
<label for="yearly"> Yearly </label><br>
<input type="checkbox" id="bi_yearly" name="bi_yearly" value="bi_yearly">
<label for="bi_yearly"> Bi-Yearly </label><br>
</div>
<div class="amenities_check_box_small_row_container">
<input type="checkbox" id="quarterly" name="quarterly" value="quarterly">
<label for="quarterly"> Quarterly </label><br>
<input type="checkbox" id="monthly" name="monthly" value="monthly">
<label for="monthly"> Monthly </label><br>
</div>
<h4>Keyword Search</h4>
<input type="text" placeholder="Eg. Pool, Security, Ref.ID Number">
<h4>Bathroom</h4>
<select>
<option value="one_bathroom">1 Bathroom or More</option>
<option value="two_bathroom">2 Bathroom or More</option>
<option value="three_bathroom">3 Bathroom or More</option>
<option value="four_bathroom">4 Bathroom or More</option>
<option value="five_bathroom">5 Bathroom or More</option>
<option value="six_bathroom">6 Bathroom or More</option>
<option value="seven_bathroom">7 Bathroom or More</option>
<option value="eight_bathroom">8 Bathroom or More</option>
<option value="nine_bathroom">9 Bathroom or More</option>
<option value="ten_bathroom">10 Bathroom or More</option>
<option value="eleven_bathroom">11 Bathroom or More</option>
<option value="twelve_bathroom">12 Bathroom or More</option>
</select>
<div class="amenities_check_box_small_row_container">
<h4>Size</h4>
<input type="number">
<input type="number">
</div>
<div class="amenities_check_box_small_row_container">
<h4>Ads with video only</h4>
<input type="checkbox" id="ads_with_video_only" name="ads_with_video_only" value="ads_with_video_only">
<h4>Ads with tour only</h4>
<input type="checkbox" id="ads_with_tour_only" name="ads_with_tour_only" value="ads_with_tour_only">
</div>
<div class="amenities_check_box_small_row_container">
<button> Save </button>
<button> Search </button>
</div>
</form>
</div>
</div>

You need to place the check on the more_button right to the top. So, if a click lands on anything other than the more_button nothing will happen instead if your previous action making everything disappear.
const more_form = document.getElementById('more_form');
const more_button = document.querySelector('div.more_button_wrapper button.more_button');
document.body.addEventListener('click', e => { if(e.target!=more_button) return true;
e.preventDefault();
e.stopPropagation();
const frmstyle=more_form.parentNode.style;
frmstyle.visibility=frmstyle.visibility=="visible"?"hidden":"visible";
})
* {
margin: 0;
padding: 0;
/* border: thin solid blue;*/
font-family: 'Roboto', sans-serif;
}
html {
height: 100%;
}
body {
height: 100vh;
display: flex;
flex-direction: column;
}
.spacer {
min-height: 300px;
text-align: center;
}
.search_box_flex_main_container {
/* border: thick solid red;*/
display: flex;
justify-content: center;
flex-wrap: nowrap;
}
.button_wrapper {
background: white none repeat scroll 0% 0%;
border-radius: 6px;
height: 48px;
}
.button {
min-width: 120px;
}
.building_text_input {
min-width: 200px;
text-align: center;
}
.city_form {
text-align: center;
}
.more_button_container {
border: thick solid yellow;
}
.more_button_wrapper {
border: thick solid red;
}
.more_form {
display: flex;
flex-direction: column;
border: thick solid green;
}
.amenities_check_box_small_row_container {
display: flex;
}
form.more_form>* {
border: thin dotted blue;
}
<div class="more_button_container">
<p>Yellow: .more_button_container</p>
<div class="more_button_wrapper">
<p>Red: .more_button_wrapper</p>
<button class="more_button">More</button>
</div>
<div class="more_form_container" style="visibility: hidden;">
<form class="more_form" id="more_form">
<p>Green: .more_form</p>
<h4>Furnishing</h4>
<select>
<option value="show_all">Show All</option>
<option value="furnished">Furnished</option>
<option value="unfurnished">Unfurnished</option>
</select>
<h4>Amenities</h4>
<div class="amenities_check_box_small_row_container">
<input type="checkbox" id="maids_room" name="maids_room" value="maids_room">
<label for="maids_room"> Maids Room</label><br>
<input type="checkbox" id="study" name="study" value="study">
<label for="study"> Study</label><br>
</div>
<div class="amenities_check_box_small_row_container">
<input type="checkbox" id="central_ac" name="central_ad" value="central_ad">
<label for="central_ac"> Central AC </label><br>
<input type="checkbox" id="balcony" name="balcony" value="balcony">
<label for="balcony"> Balcony </label><br>
</div>
<div class="amenities_check_box_small_row_container">
<input type="checkbox" id="privet_garden" name="privet_garden" value="privet_garden">
<label for="privet_garden"> Private Garden </label><br>
<input type="checkbox" id="private_pool" name="private_pool" value="private_pool">
<label for="private_pool"> Private Pool </label><br>
</div>
<div class="amenities_check_box_small_row_container">
<input type="checkbox" id="private_gym" name="private_gym" value="private_gym">
<label for="private_gym"> Private Gym </label><br>
<input type="checkbox" id="private_jacuzzi" name="private_jacuzzi" value="private_jacuzzi">
<label for="private_jacuzzi"> Private Jacuzzi</label><br>
</div>
<div class="amenities_check_box_small_row_container">
<input type="checkbox" id="shared_pool" name="shared_pool" value="shared_pool">
<label for="shared_pool"> Shared Pool </label><br>
<input type="checkbox" id="shared_spa" name="shared_spa" value="shared_spa">
<label for="shared_spa"> Shared Spa </label><br>
</div>
<div class="amenities_check_box_small_row_container">
<input type="checkbox" id="shared_gym" name="shared_gym" value="shared_gym">
<label for="shared_gym"> Shared Gym </label><br>
<input type="checkbox" id="security" name="security" value="security">
<label for="security"> Security </label><br>
</div>
<div class="amenities_check_box_small_row_container">
<input type="checkbox" id="concierge_service" name="concierge_service" value="concierge_service">
<label for="concierge_service"> Concierge Service </label><br>
<input type="checkbox" id="maid_service" name="maid_service" value="maid_service">
<label for="maid_service"> Maid Service </label><br>
</div>
<div class="amenities_check_box_small_row_container">
<input type="checkbox" id="covered_parking" name="covered_parking" value="covered_parking">
<label for="covered_parking"> Covered Parking </label><br>
<input type="checkbox" id="built_in_wardrobe" name="built_in_wardrobe" value="built_in_wardrobe">
<label for="built_in_wardrobe"> Built-in Wardrobe </label><br>
</div>
<div class="amenities_check_box_small_row_container">
<input type="checkbox" id="walk_in_closet" name="walk_in_closet" value="walk_in_closet">
<label for="walk_in_closet"> Walk-in Closet </label><br>
<input type="checkbox" id="built_in_kitchen" name="built_in_kitchen" value="built_in_kitchen">
<label for="built_in_kitchen"> Built-in Kitchen </label><br>
</div>
<div class="amenities_check_box_small_row_container">
<input type="checkbox" id="view_of_water" name="view_of_water" value="view_of_water">
<label for="view_of_water"> View Of Water </label><br>
<input type="checkbox" id="view_of_landmark" name="view_of_landmark" value="view_of_landmark">
<label for="view_of_landmark"> View Of Landmark </label><br>
</div>
<div class="amenities_check_box_small_row_container">
<input type="checkbox" id="pets_allowed" name="pets_allowed" value="pets_allowed">
<label for="pets_allowed"> Pets Allowed </label><br>
</div>
<h4>Rent Is Paid</h4>
<div class="amenities_check_box_small_row_container">
<input type="checkbox" id="yearly" name="yearly" value="yearly">
<label for="yearly"> Yearly </label><br>
<input type="checkbox" id="bi_yearly" name="bi_yearly" value="bi_yearly">
<label for="bi_yearly"> Bi-Yearly </label><br>
</div>
<div class="amenities_check_box_small_row_container">
<input type="checkbox" id="quarterly" name="quarterly" value="quarterly">
<label for="quarterly"> Quarterly </label><br>
<input type="checkbox" id="monthly" name="monthly" value="monthly">
<label for="monthly"> Monthly </label><br>
</div>
<h4>Keyword Search</h4>
<input type="text" placeholder="Eg. Pool, Security, Ref.ID Number">
<h4>Bathroom</h4>
<select>
<option value="one_bathroom">1 Bathroom or More</option>
<option value="two_bathroom">2 Bathroom or More</option>
<option value="three_bathroom">3 Bathroom or More</option>
<option value="four_bathroom">4 Bathroom or More</option>
<option value="five_bathroom">5 Bathroom or More</option>
<option value="six_bathroom">6 Bathroom or More</option>
<option value="seven_bathroom">7 Bathroom or More</option>
<option value="eight_bathroom">8 Bathroom or More</option>
<option value="nine_bathroom">9 Bathroom or More</option>
<option value="ten_bathroom">10 Bathroom or More</option>
<option value="eleven_bathroom">11 Bathroom or More</option>
<option value="twelve_bathroom">12 Bathroom or More</option>
</select>
<div class="amenities_check_box_small_row_container">
<h4>Size</h4>
<input type="number">
<input type="number">
</div>
<div class="amenities_check_box_small_row_container">
<h4>Ads with video only</h4>
<input type="checkbox" id="ads_with_video_only" name="ads_with_video_only" value="ads_with_video_only">
<h4>Ads with tour only</h4>
<input type="checkbox" id="ads_with_tour_only" name="ads_with_tour_only" value="ads_with_tour_only">
</div>
<div class="amenities_check_box_small_row_container">
<button> Save </button>
<button> Search </button>
</div>
</form>
</div>
</div>

Not sure if my condition correlates to radio button being checked

I want to create a function in javascript whereby I check whether is the radio is being checked if so I will display the cost that is I assign in javascript itself to HTML.
The following is my HTML and javascript:
function priceCalculator(){
var price_dict = {
"Small":22, "Medium":28, "Large":35,
}
var length = Object.keys(price_dict).length;
for(var i=0;i<length;i++){
var dis = document.getElementsByName('Size')[i].value;
if(document.getElementsByName('Size').checked){
document.getElementById("DisplayPrice").innerHTML = price_dict[dis];
}
}
}
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Pizza Order Form</title>
<style>
form {
font-family: Arial, Helvetica, sans-serif;
vertical-align: central;
border: 5px solid black;
margin:0px auto;
width:650px;
padding-left:0.5em;
}
fieldset{
width:600px;
box-sizing:border-box;
border-radius: 20px;
}
.deliver > p > label {
width: 70px;
display: inline-block;
}
.deliver > p > input {
width: 130px;
display: inline-block;
}
#DisplayPrice{
background-color: yellow;
}
</style>
</head>
<body >
<form>
<h1>Pizza order Form</h1>
<p>
<label for="Pizza Type">Pizza Type:</label>
<select name="pizza type">
<option value="Please select" selected>Please select...</option>
<option value="Aloha Chicken">Aloha Chicken</option>
<option value="Beef Pepperoni">Beef Pepperoni</option>
<option value="Chicken Delight">Chicken Delight</option>
<option value="Deluxe Cheese">Deluxe Cheese</option>
</select>
<label for="Quantity">Quantity</label>
<input name="quantity" type="number" min="1" max="4" />
</p>
<!--Size-->
<fieldset >
<legend>Size:</legend>
<input type="radio" name="Size" value="Small" onclick="priceCalculator()" />Small
<input type="radio" name="Size" value="Medium" onchange="priceCalculator()"/>Medium
<input type="radio" name="Size" value="Large" onload="priceCalculator()"/>Large
</fieldset>
<!--Crust-->
<fieldset>
<legend>Crust:</legend>
<input type="radio" name="Crust"value="Thin" />Thin
<input type="radio" name="Crust" value="Thick" />Thick
<input type="radio" name="Crust" value="Deep Dish" />Deep Dish
</fieldset>
<!--Toppings-->
<fieldset>
<legend>Toppings:</legend>
<input type="radio" name="Toppings" value="Mushrooms" />Mushrooms
<input type="radio" name="Toppings" value="Sausage" />Sausage
<input type="radio" name="Toppings" value="Olives" />Olives
</fieldset>
<!--Addons-->
<p>
<label for="Addons">Addons</label>
<select name="Addons" multiple>
<option value="Side of Buffalo Wings">Side of Buffalo Wings</option>
<option value="Garlic Bread">Garlic Bread</option>
</select>
</p>
<div id="DisplayPrice"></div>
<!--Delivery section-->
<fieldset class="deliver">
<legend>Deliver to:</legend>
<p>
<label for="Name">Name:</label>
<input type="text" name="name" required/>
</p>
<p>
<label for="Address">Address:</label>
<textarea rows="2" cols="30" required></textarea>
<label for="Postal Code">Postal Code:</label>
<input type="text" name="Postal Code" maxlength="6" required/>
</p>
<p>
<label for="Phone Number">Phone#: </label>
<input type="tel" name="Phone#" maxlength="8" pattern="^[896]\d{7}" required/>
</p>
<p>
<label for="email">Email:</label>
<input type="email" form="email" required />
</p>
<p>
<label for=" Date">Date:</label>
<input type="date" name="Date" min="1 November 2017" max="31 December 2017" required/>
<label for="time">Time: </label>
<input type="time" value="10:00" name="Time" min="10:00" max="22:00" step="15" required/>
</p>
</fieldset>
<p>
<input type="submit" value="submit">
<input type="reset" value="reset">
</p>
</form>
<script src="pizzaScript.js"></script>
</body>
</html>
Also, I would like to know is the use of onclick is correct?
Thx in advance m8s!

remember that getElementsByName returns a collection therefore it is not correct to do a getElementsByName('Size').checked it would be correct to access an element of a list getElementsByName('Size')[i].checked
Your event where you assign the function should change for all three, do not load as you have right now.
Also, if you declare values that will always be used price_dict and will not change in your program, you should declare it outside the function.
Your code can be greatly reduced if you pass the item from the html on the onchange
var price_dict = {
"Small":22, "Medium":28, "Large":35,
}
function priceCalculator(elm){
document.getElementById("DisplayPrice").innerHTML = price_dict[elm.value];
}
<fieldset >
<legend>Size:</legend>
<input type="radio" name="Size" value="Small" onchange="priceCalculator(this)" />Small
<input type="radio" name="Size" value="Medium" onchange="priceCalculator(this)"/>Medium
<input type="radio" name="Size" value="Large" onchange="priceCalculator(this)"/>Large
</fieldset>
<div id="DisplayPrice"></div>

You can loop through the elements and find the correct price from the dictionary.
var sizeElements = Array.from(document.getElementsByName('Size'));
var value = sizeElements.length && sizeElements.find(r => r.checked).value;
Working example given below
For the onClick vs onChange: You should probably use onClick. You can read more about it at this question: What the difference between .click and .change on a checkbox
function priceCalculator(){
var price_dict = {
"Small":22, "Medium":28, "Large":35,
}
var sizeElements = Array.from(document.getElementsByName('Size'));
var value = sizeElements.length && sizeElements.find(r => r.checked).value;
return price_dict[value] // use returned price elsewhere
}
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Pizza Order Form</title>
<style>
form {
font-family: Arial, Helvetica, sans-serif;
vertical-align: central;
border: 5px solid black;
margin:0px auto;
width:650px;
padding-left:0.5em;
}
fieldset{
width:600px;
box-sizing:border-box;
border-radius: 20px;
}
.deliver > p > label {
width: 70px;
display: inline-block;
}
.deliver > p > input {
width: 130px;
display: inline-block;
}
#DisplayPrice{
background-color: yellow;
}
</style>
</head>
<body >
<form>
<h1>Pizza order Form</h1>
<p>
<label for="Pizza Type">Pizza Type:</label>
<select name="pizza type">
<option value="Please select" selected>Please select...</option>
<option value="Aloha Chicken">Aloha Chicken</option>
<option value="Beef Pepperoni">Beef Pepperoni</option>
<option value="Chicken Delight">Chicken Delight</option>
<option value="Deluxe Cheese">Deluxe Cheese</option>
</select>
<label for="Quantity">Quantity</label>
<input name="quantity" type="number" min="1" max="4" />
</p>
<!--Size-->
<fieldset >
<legend>Size:</legend>
<input type="radio" name="Size" value="Small" onclick="priceCalculator()" />Small
<input type="radio" name="Size" value="Medium" onclick="priceCalculator()"/>Medium
<input type="radio" name="Size" value="Large" onclick="priceCalculator()"/>Large
</fieldset>
<!--Crust-->
<fieldset>
<legend>Crust:</legend>
<input type="radio" name="Crust"value="Thin" />Thin
<input type="radio" name="Crust" value="Thick" />Thick
<input type="radio" name="Crust" value="Deep Dish" />Deep Dish
</fieldset>
<!--Toppings-->
<fieldset>
<legend>Toppings:</legend>
<input type="radio" name="Toppings" value="Mushrooms" />Mushrooms
<input type="radio" name="Toppings" value="Sausage" />Sausage
<input type="radio" name="Toppings" value="Olives" />Olives
</fieldset>
<!--Addons-->
<p>
<label for="Addons">Addons</label>
<select name="Addons" multiple>
<option value="Side of Buffalo Wings">Side of Buffalo Wings</option>
<option value="Garlic Bread">Garlic Bread</option>
</select>
</p>
<div id="DisplayPrice"></div>
<!--Delivery section-->
<fieldset class="deliver">
<legend>Deliver to:</legend>
<p>
<label for="Name">Name:</label>
<input type="text" name="name" required/>
</p>
<p>
<label for="Address">Address:</label>
<textarea rows="2" cols="30" required></textarea>
<label for="Postal Code">Postal Code:</label>
<input type="text" name="Postal Code" maxlength="6" required/>
</p>
<p>
<label for="Phone Number">Phone#: </label>
<input type="tel" name="Phone#" maxlength="8" pattern="^[896]\d{7}" required/>
</p>
<p>
<label for="email">Email:</label>
<input type="email" form="email" required />
</p>
<p>
<label for=" Date">Date:</label>
<input type="date" name="Date" min="1 November 2017" max="31 December 2017" required/>
<label for="time">Time: </label>
<input type="time" value="10:00" name="Time" min="10:00" max="22:00" step="15" required/>
</p>
</fieldset>
<p>
<input type="submit" value="submit">
<input type="reset" value="reset">
</p>
</form>
<script src="pizzaScript.js"></script>
</body>
</html>

browser storage using javascript

I was trying to create a form so when the user fills out the form, everything is stored into the browser storage.
However, I'm currently wonder how 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..
The output I'm currently getting is undefined on every element.
"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();
};
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;
}
<!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>
<!DOCTYPE html>
<!--response-->
<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>

The syntax seems wrong. Try these instead
To save data/initialize a sessionStorage:
// Save data to sessionStorage
sessionStorage.setItem('key', 'value');
To fetch a saved value from a sessionStorage
// Get saved data from sessionStorage
sessionStorage.getItem('key');

According to my knowledge, what you are looking is to accept user data and display it in another HTML
You can do this by creating a JSON with form data and storing it in local storage. You can bring back that form and populate it to another page. You can use readonly attributes if you want to disallow editing. (Or simply make the fields display in a label/span/paragraph etc..)
The code goes like this:
registration.html
HTML
<body>
<main>
<h1>Reservation Request</h1>
<form action="response.html" method="post"
name="form" id="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="submit" value="SubmitReservation"><br>
</form>
</main>
</body>
jQuery (3.1.1)
You can use this in a script tag within your HTML
$.fn.serializeObject = function()
{
var jsonObj = {};
var jsonArr = this.serializeArray();
$.each(jsonArr, function() {
if (jsonObj[this.name] !== undefined) {
if (!jsonObj[this.name].push) {
jsonObj[this.name] = [jsonObj[this.name]];
}
jsonObj[this.name].push(this.value || "NA");
} else {
jsonObj[this.name] = this.value || "NA";
}
});
return jsonObj;
}
$(function() {
$('form').submit(function() {
console.log(jsonData);
var jsonData=$('form').serializeObject();
// Put the object into storage
localStorage.setItem('jsonData', JSON.stringify(jsonData));
existingEntries.push(jsonData);
return false;
});
});
response.html
HTML
<body>
<main>
<h1>Reservation Request</h1>
<form action="response.html" method="post"
name="form" id="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="submit" value="SubmitReservation"><br>
</form>
</main>
</body>
jQuery (3.1.1)
You can use this in a script tag within your HTML
$(function() {
var jsonString = JSON.parse(localStorage.getItem("jsonData"));
$.each(jsonString, function(key, value) {
var ctrl = $('[name='+key+']');
switch(ctrl.prop("type")) {
case "radio": case "checkbox":
ctrl.each(function() {
if($(this).prop('value') == value) $(this).prop("checked",value);
});
break;
case "text":
ctrl.val(value);
break;
default:
ctrl.val(value);
}
});
});
NOTE : CSS remains the same as yours for both files(reservation.css)
You can have a look at the following jsFiddle to execute the above codes:
CLICK HERE FOR registration page
CLICK HERE FOR response page
You can check out the local storage content in Google chrome by pressing
F12 -> Application tab -> local storage on the left side navBar