how to use preventDefault() for specified form fields? - javascript

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

Related

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>

Input doesn't have value to store in a var

So the input in the form has the id "fname" and when i press submit, the function values() try to store the value in a var but it doesn't.
var fname = "sss";
function values() {
fname = document.getElementById("fname").value;
}
<form action="javascript:values()" method="GET">
<fieldset>
<legend>Personal Informations</legend>
<label for="fname">First Name:</label>
<input type="text" id="fname">
</fieldset>
<input type="submit" class="formbtn">
</form>
<script src="javascript/cv_script.js"></script>
I have no idea why it's not working.
I have a proof that calling the function is working
and there is no errors like (can't store null value)
any solutions would be great
Thank you for your help!
here is the whole code↓
<!DOCTYPE html>
<html>
<head>
<title>Information Page</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/general.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
fieldset {
border: 2px solid #007bff88;
border-radius: 7px;
width: 800px;
margin-top: 10px;
padding: 8px;
}
legend {
width: auto;
margin-left: 7px;
font-size: 14px;
}
select, textarea {
background: none;
border: 1px solid #007bff;
}
.formbtn {
background: #007bff;
color: #fff;
border-radius: 5px;
margin: 8px;
}
</style>
</head>
<body>
<nav>
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Dropdown button
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
</div>
</nav>
<form action="javascript:values()" method="GET">
<fieldset>
<legend>Personal Informations</legend>
<label for="fname">First Name:</label>
<input type="text" id="fname">
<br><br>
<label for="lname">Last Name:</label>
<input type="text" id="lname">
<br><br>
<label for="address">Address:</label>
<input type="text" id="address">
<br><br>
<label for="mobile">Mobile Number:</label>
<input type="text" id="mobile">
<br><br>
<label for="birth">Birthday:</label>
<input type="date" id="birth">
<br><br>
<label for="gen">Gender:</label>
<select name="gender" id="gen">
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</fieldset>
<fieldset>
<legend>Education & Hobbies</legend>
<label for="level">Educational Level:</label>
<input type="text" id="level">
<br><br>
<label for="place">University/School Name:</label>
<input type="text" id="place">
<br><br>
<label for="sec">Section:</label>
<input type="text" id="sec">
<br><br>
<label>Hobbies & More:</label>
<br>
<textarea id="hobbies" cols="40" rows="4"></textarea>
</fieldset>
<input type="submit" class="formbtn">
<input type="reset" class="formbtn">
</form>
<script src="javascript/cv_script.js"></script>
</body>
</html>

Unable to submit the form successfully using Javascript

Here is a code for Quiz app using HTML,CSS and JavaScript. You are given with a few questions and you need to choose one of the options from each question then click submit. The total score secured should be shown in the "You have scored ____ marks". However,there is no change in score when I click submit.
Here is the code for both HTML,CSS and Javascript. Please correct the code and let me know where I did wrong.
<!DOCTYPE html>
<html>
<head>
<title>Quiz Game</title>
</head>
<body>
<style>
.header{
text-align: center;
color:red;
margin-top:100px;
font-size: 100px;
}
.main{
border: solid 1px blue;
background-color: blue;
}
/* .options{
padding-left: 10px;
} */
.options li{
list-style-type: circle;
/* padding-left: 10px; */
font-size: 20px;
}
.result1{
border:2px solid black;
margin-left: 500px;
margin-right: 500px;
background-color: grey;
font-size: 20px;
color:red;
}
.span{
font-size: 50px;
color:salmon;
border:2px solid orangered;
}
</style>
<h1 class="header">QUIZ</h1>
<br>
<div class="main">
<div class="quiz-form">
<h3 style="color:white;padding-left:50px">Question 1</h3>
<br>
<p style="color:white;padding-left: 10px;font-size: 20px;">1) First Question</p>
<br>
<input type='radio' name='Q1' id='Option-1'value='Option 1' >
<label style="color:white;" for="Option-1">Option 1</label><br>
<br>
<input type='radio' name='Q1' id='Option-2' value='Option 2'>
<label style="color:white;" for="Option-2">Option 2</label><br>
<br>
</div>
<div class="quiz-form">
<h3 style="color:white;padding-left:50px">Question 2</h3>
<br>
<p style="color:white;padding-left: 10px;font-size: 20px;">2) Second Question</p>
<br>
<input type='radio' name='Q2' id='Option-3'value='Option 1' >
<label style="color:white;" for="Option-3">Option 1</label><br>
<br>
<input type='radio' name='Q2' id='Option-4' value='Option 2'>
<label style="color:white;" for="Option-4">Option 2</label><br>
<br>
</div>
<div class="quiz-form">
<h3 style="color:white;padding-left:50px">Question 3</h3>
<br>
<p style="color:white;padding-left: 10px;font-size: 20px;">3) Third Question</p>
<br>
<input type='radio' name='Q3' id='Option-5' value='Option 1'>
<label style="color:white;" for="Option-5">Option 1</label><br>
<br>
<input type='radio' name='Q3' id='Option-6'value='Option 2'>
<label style="color:white;" for="Option-6">Option 2</label><br>
<br>
</div>
<div class="quiz-form">
<h3 style="color:white;padding-left:50px">Question 4</h3>
<br>
<p style="color:white;padding-left: 10px;font-size: 20px;">4) Fourth Question</p>
<br>
<input type='radio' name='Q4' id='Option-7' value='Option 1'>
<label style="color:white;" for="Option-7">Option 1</label><br>
<br>
<input type='radio' name='Q4' id='Option-8' value='Option 2'>
<label style="color:white;" for="Option-8">Option 2</label><br>
<br> <br><br>
</div>
<div style="text-align:center">
<input type="submit" value="Submit" style="font-size:20px;">
</div>
</div>
<div class="result" style="text-align: center;">
<h1 class="result1" >Warning!! Clicking Submit will display the Result</h1>
<p style="font-size: 40px;color:green;">You have scored <span class="span"> 0% </span></p>
</div>
<script src="Quiz.js"></script>
</body>
</html>
Javascript :-
const correctAnswers=['Option 1','Option 2','Option 2','Option 1'];
const form = document.querySelector(".quiz-form");
let score=0;
form.addEventListener('submit',()=>{
form.preventDefault();
const userAnswers=[form.Q1.value,form.Q2.value,form.Q3.value,form.Q4.value];
userAnswers.forEach((answer,index)=>{
if(answer==correctAnswers[index]){
score+=20;
}
console.log(score);
});
const result=document.querySelector(".result")
result.querySelector("span").textContent= '${score}';
});

You need a form element, just wrap the whole quiz in one.
Problem #2, preventDefault() is an event function not a element one, something like this:
form.addEventListener('submit', e => {
e.preventDefault();
// more things .....
});
Finally, you're not interpolating score correctly, use back-ticks, i.e.:
result.querySelector('span').textContent = `${score}`;
Here's a working example with the changes I suggested:
<html>
<head>
<title>Quiz Game</title>
</head>
<body>
<style>
.header {
text-align: center;
color: red;
margin-top: 100px;
font-size: 100px;
}
.main {
border: solid 1px blue;
background-color: blue;
}
/* .options{
padding-left: 10px;
} */
.options li {
list-style-type: circle;
/* padding-left: 10px; */
font-size: 20px;
}
.result1 {
border: 2px solid black;
margin-left: 500px;
margin-right: 500px;
background-color: grey;
font-size: 20px;
color: red;
}
.span {
font-size: 50px;
color: salmon;
border: 2px solid orangered;
}
</style>
<h1 class="header">QUIZ</h1>
<br />
<div class="main">
<form>
<div class="quiz-form">
<h3 style="color:white;padding-left:50px">Question 1</h3>
<br />
<p style="color:white;padding-left: 10px;font-size: 20px;">1) First Question</p>
<br />
<input type="radio" name="Q1" id="Option-1" value="Option 1" />
<label style="color:white;" for="Option-1">Option 1</label><br />
<br />
<input type="radio" name="Q1" id="Option-2" value="Option 2" />
<label style="color:white;" for="Option-2">Option 2</label><br />
<br />
</div>
<div class="quiz-form">
<h3 style="color:white;padding-left:50px">Question 2</h3>
<br />
<p style="color:white;padding-left: 10px;font-size: 20px;">2) Second Question</p>
<br />
<input type="radio" name="Q2" id="Option-3" value="Option 1" />
<label style="color:white;" for="Option-3">Option 1</label><br />
<br />
<input type="radio" name="Q2" id="Option-4" value="Option 2" />
<label style="color:white;" for="Option-4">Option 2</label><br />
<br />
</div>
<div class="quiz-form">
<h3 style="color:white;padding-left:50px">Question 3</h3>
<br />
<p style="color:white;padding-left: 10px;font-size: 20px;">3) Third Question</p>
<br />
<input type="radio" name="Q3" id="Option-5" value="Option 1" />
<label style="color:white;" for="Option-5">Option 1</label><br />
<br />
<input type="radio" name="Q3" id="Option-6" value="Option 2" />
<label style="color:white;" for="Option-6">Option 2</label><br />
<br />
</div>
<div class="quiz-form">
<h3 style="color:white;padding-left:50px">Question 4</h3>
<br />
<p style="color:white;padding-left: 10px;font-size: 20px;">4) Fourth Question</p>
<br />
<input type="radio" name="Q4" id="Option-7" value="Option 1" />
<label style="color:white;" for="Option-7">Option 1</label><br />
<br />
<input type="radio" name="Q4" id="Option-8" value="Option 2" />
<label style="color:white;" for="Option-8">Option 2</label><br />
<br />
<br /><br />
</div>
<div style="text-align:center">
<input type="submit" value="Submit" style="font-size:20px;" id="submit_button" />
</div>
</form>
</div>
<div class="result" style="text-align: center;">
<h1 class="result1">Warning!! Clicking Submit will display the Result</h1>
<p style="font-size: 40px;color:green;">You have scored <span class="span"> 0% </span></p>
</div>
<script>
const correctAnswers = ['Option 1', 'Option 2', 'Option 2', 'Option 1'];
const form = document.querySelector('form');
let score = 0;
form.addEventListener('submit', e => {
e.preventDefault();
const userAnswers = [form.Q1.value, form.Q2.value, form.Q3.value, form.Q4.value];
userAnswers.forEach((answer, index) => {
if (answer == correctAnswers[index]) {
score += 20;
}
console.log(score);
});
const result = document.querySelector('.result');
result.querySelector('span').textContent = `${score}`;
});
</script>
</body>
</html>

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 pt.2

in this program I'm trying to create a from for people to fill out. However, everything is supposed to be stored into the browser storage.
The problem I keep running into is the arrival date keeps printing out "undefined" and the if "smoking" out keeps printing yes.. even if you dont check the box.
"use strict";
var $ = function(id) { return document.getElementById(id); };
var saveReservation = function() {
var name = document.getElementById("name").value;
sessionStorage.setItem("name", name);
var phone = document.getElementById("phone").value;
sessionStorage.setItem("phone", phone);
var email = document.getElementById("email").value;
sessionStorage.setItem("email", email);
var arrival_date = document.getElementById("arrival_date").value;
sessionStorage.setItem("arrival_date", arrival_date);
var nights = document.getElementById("nights").value;
sessionStorage.setItem("nights", nights);
var adults = document.getElementById("adults").value;
sessionStorage.setItem("adults", adults);
var children = document.getElementById("children").value;
sessionStorage.setItem("children", children);
var standard = document.getElementById("standard").value;
sessionStorage.setItem("roomType", standard);
var king = document.getElementById("king").value;
sessionStorage.setItem("bedType", king);
var smoking = document.getElementById("smoking").value;
sessionStorage.setItem("smoking", smoking);
// 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>

Categories

Resources