Hide div when clicked outside without using window and document object

Hide div when clicked outside without using window and document object - javascript

How can I hide a <div> when I click outside it using onblur? I tried with the code below, but when I click the checkbox it disappears, and when I click outside of it, it won’t disappear.
I then tried using window or document object which works, but is not supported by the platform that I’m currently using. I'm using Lightning platform
Is this otherwise possible using JavaScript and/or CSS?
var expanded = false;
function showshow() {
var show = document.getElementById("show");
if (!expanded) {
show.style.display = "block";
expanded = true;
} else {
show.style.display = "none";
expanded = false;
}
}
function hideshow() {
var show = document.getElementById("show");
if (expanded) {
show.style.display = "none";
expanded = false;
}
}
#show {
position: absolute;
width: 200px;
display: none;
border: 1px solid #000000;
background-color: #ffffff;
}
#show label {
display: block;
white-space: nowrap;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
#show label:hover {
background-color: #eff1f4;
}
<form id="input-form">
<button type="button" onclick="showshow()">Select an option</button>
<div id="show" tabindex="1" onblur="hideshow()">
<label for="OptionA">
<input type="checkbox" id="OptionA" value="Option A" />Option A</label>
<label for="OptionB">
<input type="checkbox" id="OptionB" value="Option B" />Option B</label>
<label for="OptionC">
<input type="checkbox" id="OptionC" value="Option C" />Option ABCDEFGHIJKLMNOPQRSTUVWXYZ</label>
</div>
</form>

document.getElementsByTagName("body")[0].addEventListener("click", function(){
if(event.target.parent.id !== "idOfYourDiv") {
// call hideshow() function
}
});

$(document).click(function(event) {
//if you click on anything except the modal itself or the "open modal" link, close the modal
if (!$(event.target).closest(".modal,.js-open-modal").length) {
$("body").find(".modal").removeClass("visible");
}
});

Make show focused when expanded, to hide onblur afterwords:
var expanded = false;
function showshow() {
var show = document.getElementById("show");
if (!expanded) {
show.style.display = "block";
show.focus(); // make show focused
expanded = true;
} else {
show.style.display = "none";
expanded = false;
}
}
function hideshow() {
var show = document.getElementById("show");
if (expanded) {
setTimeout(() => {
show.style.display = "none";
expanded = false;
}, 100);
}
}
#show {
position: absolute;
width: 200px;
display: none;
border: 1px solid #000000;
background-color: #ffffff;
}
#show label {
display: block;
white-space: nowrap;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
#show label:hover {
background-color: #eff1f4;
}
<form id="input-form">
<button type="button" onclick="showshow()">Select an option</button>
<div id="show" tabindex="1" onblur="hideshow()">
<label for="OptionA">
<input type="checkbox" id="OptionA" value="Option A" />Option A</label>
<label for="OptionB">
<input type="checkbox" id="OptionB" value="Option B" />Option B</label>
<label for="OptionC">
<input type="checkbox" id="OptionC" value="Option C" />Option ABCDEFGHIJKLMNOPQRSTUVWXYZ</label>
</div>
</form>

Related

Dynamically display element/label when ratio button is clicked

I'm trying to hide mailingaddress box and label, and also hide comments box and label. They will only show up when I click on the radio button "mail" (the first choice), and when I switch to another button/choice, those labels and fields will be hidden again. Same for comments - when I click on "I accepted" of Terms of Services - the comments box and label will show up, if I uncheck it, the box and the label disappear. I successfully hide them but I cannot make them appear again when I click on the mail button, neither can I make the comments box and label appear when I click on "I accept" of Terms of Services. Where did I go wrong?
var $ = function(id) { return document.getElementById(id); };
var processEntries = function() {
var isValid = true;
// get values for user entries
var email = $("email_address").value;
var phone = $("phone").value;
var country = $("country").value;
var terms = $("terms").checked; //return true or false indicates whether a check box is checked or not
//remove validity messages if there is any
$("email_address").nextElementSibling.textContent = "";
$("phone").nextElementSibling.textContent = "";
$("country").nextElementSibling.textContent = "";
$("terms").nextElementSibling.textContent = "";
// check user entries for validity
if (email === "") {
$("email_address").nextElementSibling.textContent = "This field is required.";
isValid = false;
}
if (phone === "") {
$("phone").nextElementSibling.textContent = "This field is required.";
isValid = false;
}
if (country === "") {
$("country").nextElementSibling.textContent = "Please select a country.";
isValid = false;
}
if (terms === false) {
$("terms").nextElementSibling.textContent = "This box must be checked.";
isValid = false;
}
if(isValid)
{
$("registration_form").submit(); //submit registration form
}
};
var resetForm = function() {
$("registration_form").reset();
$("email_address").nextElementSibling.textContent = "*";
$("phone").nextElementSibling.textContent = "*";
$("country").nextElementSibling.textContent = "*";
$("terms").nextElementSibling.textContent = "*";
$("email_address").focus();
};
$("register").onclick = processEntries;
$("reset_form").onclick = resetForm;
//step 1: hide mailingaddress box and label, hide comments box and label
document.getElementsByTagName("label")[4].style.display = "none";
document.getElementById("mailingaddress").style.display = "none";
document.getElementsByTagName("label")[6].style.display = "none";
document.getElementById("comments").style.display = "none";
//step 2: define event handler function and add event listener to hide or show mailing address box and label when radio buttons are clicked.
//show mailing addess box and label only when mail button is clicked, when other buttons are clicked, hide mailing address box and label
document.getElementById("mail").addEventListener("click", displayMailOption);
function displayMailOption() {
if (documenet.getElementById("mail").checked){
document.getElementsByTagName("label")[4].style.display = "block";
document.getElementById("mailingaddress").style.display = "block";
} else {
document.getElementsByTagName("label")[4].style.display = "none";
document.getElementById("comments").style.display = "none";
}
}
//step 3: define event handler functionn and add event listener to hide or show comment box and label when check box is clicked.
//show comment box and label only when check box is checked. when check box is unchecked, hide comment box and label
document.getElementById("comments").addEventListener("click", displayCommentOption);
function displayCommentOption() {
if (documenet.getElementById("comments").checked){
document.getElementsByTagName("label")[6].style.display = "block";
document.getElementById("mailingaddress").style.display = "block";
} else {
document.getElementsByTagName("label")[6].style.display = "none";
document.getElementById("comments").style.display = "none";
}
}
html { background-image: url("ginkgo.jpg");}
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
background-color: white;
width: 730px;
margin: 0 auto;
border: 3px solid blue;
padding: 0 2em 1em;
}
h1 {
font-size: 150%;
color: blue;
margin-bottom: .5em;
}
h2 {
font-size: 120%;
margin-bottom: .25em;
}
label {
float: left;
width: 9em;
}
input, select , textarea{
width: 20em;
margin-left: 1em;
margin-bottom: 1em;
}
input[type="checkbox"],[type="radio"] {
width: 1em;
}
#registration_form span {
color: red;
font-size: 80%;
}
.hide {display: none;}
input[type="button"] {
background-color: #000;
border-radius: 5px;
color: #fff;
font-size: 1.2em;
width: 100px;
margin-right: 1.4em;}
input[type="button"]:hover {
background-color: #666;
cursor: pointer;
text-shadow: 2px 2px 2px #000;
box-shadow: inset 0 2px 2px #000;}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Account Registration</title>
<link rel="stylesheet" type="text/css" href="register.css">
</head>
<body>
<main>
<h1>Register for an Account</h1>
<form action="register_account.html" method="get"
name="registration_form" id="registration_form">
<label for="email_address">E-Mail:</label>
<input type="text" name="email_address" id="email_address">
<span>*</span><br>
<label for="phone">Mobile Phone:</label>
<input type="text" name="phone" id="phone">
<span>*</span><br>
<label for="country">Country:</label>
<select name="country" id="country">
<option value="">Select an option</option>
<option>USA</option>
<option>Canada</option>
<option>Mexico</option>
</select>
<span>*</span><br>
<label>Contact me by:</label>
<input type="radio" name="contact" id="mail" value="mail">Mail
<input type="radio" name="contact" id="email" value="email">Email
<input type="radio" name="contact" id="mphone" value="mobilephone">Mobile Phone
<input type="radio" name="contact" id="none" value="none">Don't contact me
<br>
<label for="mailingaddress">Your Mailing Address:</label>
<textarea id="mailingaddress"></textarea><br>
<label>Terms of Service:</label>
<input type="checkbox" name="terms" id="terms" value="yes">I accept
<span>*</span><br>
<label for="comments">Comments:</label>
<textarea id="comments" cols='20' rows='10' ></textarea><br>
<label> </label>
<input type="button" id="register" value="Register">
<input type="button" id="reset_form" value="Reset">
</form>
</main>
<script src="register.js"> </script>
</body>
</html>

You don't have event listeners for other radio inputs, so no code will run.
Add these:
document.getElementById("email").addEventListener("click", displayMailOption);
document.getElementById("mphone").addEventListener("click", displayMailOption);
document.getElementById("none").addEventListener("click", displayMailOption);
Now on every radio input change, your displayMailOption function will run.
The displayMailOption function should look like this, after fixing the typo and selecting the correct element:
function displayMailOption() {
if (document.getElementById("mail").checked) {
document.getElementsByTagName("label")[4].style.display = "block";
document.getElementById("mailingaddress").style.display = "block";
} else {
document.getElementsByTagName("label")[4].style.display = "none";
document.getElementById("mailingaddress").style.display = "none";
}
}
Fix the comment listener ID:
document.getElementById("terms").addEventListener("click", displayCommentOption);
The displayCommentOption function should look like this:
function displayCommentOption() {
if (document.getElementById("terms").checked) {
document.getElementsByTagName("label")[6].style.display = "block";
document.getElementById("comments").style.display = "block";
} else {
document.getElementsByTagName("label")[6].style.display = "none";
document.getElementById("comments").style.display = "none";
}
}

Actually you don't need JavaScript to achieve that. You can do it in pure CSS. But to answer your question first, the problem is that you attach the click event the label and the function is called only when input is clicked. So if "email", "phone" or other labels are clicked the function is not called and therefore the elements are not hidden.
Here is an example of how to do it using only CSS:
var $ = function(id) {
return document.getElementById(id);
};
var processEntries = function() {
var isValid = true;
// get values for user entries
var email = $("email_address").value;
var phone = $("phone").value;
var country = $("country").value;
var terms = $("terms").checked; //return true or false indicates whether a check box is checked or not
//remove validity messages if there is any
$("email_address").nextElementSibling.textContent = "";
$("phone").nextElementSibling.textContent = "";
$("country").nextElementSibling.textContent = "";
$("terms").nextElementSibling.textContent = "";
// check user entries for validity
if (email === "") {
$("email_address").nextElementSibling.textContent = "This field is required.";
isValid = false;
}
if (phone === "") {
$("phone").nextElementSibling.textContent = "This field is required.";
isValid = false;
}
if (country === "") {
$("country").nextElementSibling.textContent = "Please select a country.";
isValid = false;
}
if (terms === false) {
$("terms").nextElementSibling.textContent = "This box must be checked.";
isValid = false;
}
if (isValid) {
$("registration_form").submit(); //submit registration form
}
};
var resetForm = function() {
$("registration_form").reset();
$("email_address").nextElementSibling.textContent = "*";
$("phone").nextElementSibling.textContent = "*";
$("country").nextElementSibling.textContent = "*";
$("terms").nextElementSibling.textContent = "*";
$("email_address").focus();
};
$("register").onclick = processEntries;
$("reset_form").onclick = resetForm;
//step 1: hide mailingaddress box and label, hide comments box and label
/*
document.getElementsByTagName("label")[4].style.display = "none";
document.getElementById("mailingaddress").style.display = "none";
document.getElementsByTagName("label")[6].style.display = "none";
document.getElementById("comments").style.display = "none";
*/
//step 2: define event handler function and add event listener to hide or show mailing address box and label when radio buttons are clicked.
//show mailing addess box and label only when mail button is clicked, when other buttons are clicked, hide mailing address box and label
//document.getElementById("mail").addEventListener("click", displayMailOption);
/*
function displayMailOption() {
if (document.getElementById("mail").checked) {
document.getElementsByTagName("label")[4].style.display = "block";
document.getElementById("mailingaddress").style.display = "block";
} else {
document.getElementsByTagName("label")[4].style.display = "none";
document.getElementById("comments").style.display = "none";
}
}
//step 3: define event handler functionn and add event listener to hide or show comment box and label when check box is clicked.
//show comment box and label only when check box is checked. when check box is unchecked, hide comment box and label
document.getElementById("comments").addEventListener("click", displayCommentOption);
function displayCommentOption() {
if (document.getElementById("comments").checked) {
document.getElementsByTagName("label")[6].style.display = "block";
document.getElementById("mailingaddress").style.display = "block";
} else {
document.getElementsByTagName("label")[6].style.display = "none";
document.getElementById("comments").style.display = "none";
}
}
*/
html {
background-image: url("ginkgo.jpg");
}
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
background-color: white;
width: 730px;
margin: 0 auto;
border: 3px solid blue;
padding: 0 2em 1em;
}
h1 {
font-size: 150%;
color: blue;
margin-bottom: .5em;
}
h2 {
font-size: 120%;
margin-bottom: .25em;
}
label {
float: left;
width: 9em;
}
input,
select,
textarea {
width: 20em;
margin-left: 1em;
margin-bottom: 1em;
}
input[type="checkbox"],
[type="radio"] {
width: 1em;
}
#registration_form span {
color: red;
font-size: 80%;
}
.hide {
display: none;
}
input[type="button"] {
background-color: #000;
border-radius: 5px;
color: #fff;
font-size: 1.2em;
width: 100px;
margin-right: 1.4em;
}
input[type="button"]:hover {
background-color: #666;
cursor: pointer;
text-shadow: 2px 2px 2px #000;
box-shadow: inset 0 2px 2px #000;
}
/* Hide elements on load */
#mailingaddress,
#mailadress-label,
#comments-label,
#comments {
display: none;
}
/* Show elements when #mail is checked */
#mail:checked~#mailingaddress,
#mail:checked~#mailadress-label {
display: block;
}
/* Show comments when #terms is checked */
#terms:checked~#comments-label,
#terms:checked~#comments {
display: block;
}
<main>
<h1>Register for an Account</h1>
<form action="register_account.html" method="get" name="registration_form" id="registration_form">
<label for="email_address">E-Mail:</label>
<input type="text" name="email_address" id="email_address">
<span>*</span><br>
<label for="phone">Mobile Phone:</label>
<input type="text" name="phone" id="phone">
<span>*</span><br>
<label for="country">Country:</label>
<select name="country" id="country">
<option value="">Select an option</option>
<option>USA</option>
<option>Canada</option>
<option>Mexico</option>
</select>
<span>*</span><br>
<label>Contact me by:</label>
<input type="radio" name="contact" id="mail" value="mail">Mail
<input type="radio" name="contact" id="email" value="email">Email
<input type="radio" name="contact" id="mphone" value="mobilephone">Mobile Phone
<input type="radio" name="contact" id="none" value="none">Don't contact me
<br>
<label for="mailingaddress" id='mailadress-label'>Your Mailing Address:</label>
<textarea id="mailingaddress"></textarea><br>
<label>Terms of Service:</label>
<input type="checkbox" name="terms" id="terms" value="yes">I accept
<span>*</span><br>
<label for="comments" id='comments-label'>Comments:</label>
<textarea id="comments" cols='20' rows='10'></textarea><br>
<label> </label>
<input type="button" id="register" value="Register">
<input type="button" id="reset_form" value="Reset">
</form>
</main>

jQuery('input[type=radio]').change(function(){
if (document.getElementById("mail").checked){
document.getElementsByTagName("label")[4].style.display = "block";
document.getElementById("mailingaddress").style.display = "block";
} else {
document.getElementsByTagName("label")[4].style.display = "none";
document.getElementById("mailingaddress").style.display = "none";
}
})
document.getElementById("terms").addEventListener("click", displayCommentOption);
function displayCommentOption() {
if (document.getElementById("terms").checked){
document.getElementsByTagName("label")[6].style.display = "block";
document.getElementById("comments").style.display = "block";
} else {
document.getElementsByTagName("label")[6].style.display = "none";
document.getElementById("comments").style.display = "none";
}
}

Notification show as input textbox click with jquery patterns

I don't know that I will explain my question well or not because I'm new on stack overflow. I've read the T&C and have tried my best to explain what I want to accomplish. I hope you understand what I'm asking.
I would like to create a system using javascript or jQuery that will display a popup box on the top or bottom of a browser window with custom text and colors defined in my css styles. The "notification" would tell users to about what they need to do in the text box like "Write your email" etc.
This is the code that will show you what I'd like them to look like:
<div class="warning"id="notification"><span>This is default message show first time</span></div>
<div class="information" id="notification"><span>Enter your registered Email ID</span></div>
<div class="error" id="notification"><span>Email ID is incorrect</span></div>
<div class="error" id="notification"><span>Email is correct - good : show me for 5 sec only after I will hide automatically if I am in green else show until cursor inside textbox.</span></div>
<input type="text" name="email" id="username"/>
<input type="text" name="mobile" id="phone"/>
<input type="submit" id="ok" name="done"/>
<style>#notification {
position:fixed;
width: 100%;
text-align: center;
z-index:99;
overflow:hidden;
}
#notification h2{
font-size:16px;
font-weight:400
}
/*#notification.showNote{
width:50%;
left:230px
}*/
/*error, info, notice, alert*/
.success,.warning,.error,.information{display: block; position: relative; padding:5px 20px}
.information{background-color:#3bafda}
.success{background-color:#8cc152}
.warning{background-color:#f6bb42}
.error{background-color:#e9573f}
.notify h2{color:#fff}</style>

Some tips:
ids are unique in each page. You can not define multiple elements with just one id. Instead, You should use class attribute`.
To do something after some seconds, You should use setTimeout function
You must know about jQuery selectors and some of its functions. Read available tutorials on the web.
To validate a value, You must know Regex
A simple working example of your question is this. Hope it helps
let time2Hide = 5000;
function f(selector) {
$(selector).show();
setTimeout(() => {
$(selector).hide();
}, time2Hide);
}
f("#warning");
function validateEmail(email) {
var re = /^(([^<>()\[\]\\.,;:\s#"]+(\.[^<>()\[\]\\.,;:\s#"]+)*)|(".+"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(String(email).toLowerCase());
}
function onSubmit() {
let email = $("#email").text()
if(!email) {
f("#information" )
}
else if(validateEmail(email)) {
f("#success");
}
else {
f("#error")
}
}
/**********************************************/
/* notification styles */
.notification {
position: fixed;
width: 100%;
text-align: center;
z-index: 99;
overflow: hidden;
}
.notification h2 {
font-size: 16px;
font-weight: 400
}
/*#notification.showNote{
width:50%;
left:230px
}*/
/*error, info, notice, alert*/
#success,
#warning,
#error,
#information {
display: none;
position: relative;
padding: 5px 20px
}
#information {
background-color: #3bafda
}
#success {
background-color: #8cc152
}
#warning {
background-color: #f6bb42
}
#error {
background-color: #e9573f
}
.notify h2 {
color: #fff
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="warning" class="notification">
<span>This is default message show first time</span>
</div>
<div id="information" class="notification">
<span>Enter your registered Email ID</span>
</div>
<div id="error" class="notification">
<span>Email ID is incorrect</span>
</div>
<div id="success" class="notification">
<span>Email is correct - good : show me for 5 sec only after I will hide automatically if I am in green else show until cursor inside textbox.</span>
</div>
<hr><br><br><br>
<input type="email" name="email" id="username" />
<input type="phone" name="mobile" id="phone" />
<input type="submit" id="ok" name="done" onclick="onSubmit()"/>
let time2Hide = 5000;
function hideAll() {
$("#error").hide();
$("#warning").hide();
$("#success").hide();
$("#information").hide();
}
function show(selector) {
hideAll();
$(selector).show();
}
function showNHide(selector) {
hideAll();
$(selector).show();
setTimeout(() => {
$(selector).hide(); show("#warning");
}, time2Hide);
}
$("#username")
.on("input click", () => {
show("#information");
})
.on("input", () => {
let email = $("#username").val();
if (!email) {
show("#information");
} else if (validateEmail(email)) {
showNHide("#success");
} else {
show("#error");
}
})
.on('focusout', () => {
show("#warning");
});
function validateEmail(email) {
var re = /^(([^<>()\[\]\\.,;:\s#"]+(\.[^<>()\[\]\\.,;:\s#"]+)*)|(".+"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(String(email).toLowerCase());
}
function onSubmit() {
let email = $("#username").val();
if (!email) {
show("#information");
} else if (validateEmail(email)) {
showNHide("#success");
} else {
show("#error");
}
}
show("#warning");
/**********************************************/
/* notification styles */
.notification {
position: fixed;
width: 100%;
text-align: center;
z-index: 99;
overflow: hidden;
}
.notification h2 {
font-size: 16px;
font-weight: 400
}
/*#notification.showNote{
width:50%;
left:230px
}*/
/*error, info, notice, alert*/
#success,
#warning,
#error,
#information {
display: none;
position: relative;
padding: 5px 20px
}
#information {
background-color: #3bafda
}
#success {
background-color: #8cc152
}
#warning {
background-color: #f6bb42
}
#error {
background-color: #e9573f
}
.notify h2 {
color: #fff
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="warning" class="notification">
<span>This is default message show first time</span>
</div>
<div id="information" class="notification">
<span>Enter your registered Email ID</span>
</div>
<div id="error" class="notification">
<span>Email ID is incorrect</span>
</div>
<div id="success" class="notification">
<span>Email is correct - good : show me for 5 sec only after I will hide automatically if I am in green else show until cursor inside textbox.</span>
</div>
<hr><br><br><br>
<input type="email" name="email" id="username" />
<input type="phone" name="mobile" id="phone" />
<input type="submit" id="ok" name="done" onclick="onSubmit()" />

hide option and remove value if siblings' value is larger than goal, and restore the removed tag if siblings' value is smaller than goal

We have a goal number that the option tag's values must be greater than. I am using jQuery to keep the option tags hidden. They only appear if the previous siblings' values are not greater than the goal number (in this case 450).
Here is the jQuery to hide or show the select tags with their options
if ($('#maxTPH1').val() < $('#tphNeeded').val()) {
$('#selectedSourceMaterial2, #materialInput2').fadeIn(800).css("display", "inline-block");
$('#sourceMaterialDivImage').css('margin-bottom', "17%");
} else {
$('#selectedSourceMaterial2, #materialInput2').css("display", "none");
$('#sourceMaterialDivImage').css('margin-bottom', "13%");
}
This works and the select elements fade in or hide according to if their siblings' value is less than or greater than the goal number ('#tphNeeded')
The first challenge is, once I select an option (say the 3rd select tag) and it gains a value, if I change any of it's previous sibling's (the first two select tags) values to make them greater than the goal number, the third select tag is hidden, but it's value remains part of the total forms value.
Ex: If
maxTPH1 = 200:
maxTPH2 = 200:
maxTPH3 = 200:
My total value is 600. The select tags keep appearing as long as my total value is less than, in this case 450. If I go back and change select 2 to 300 my total value for the first two select tags is 500 so select 3 is hidden because their value is greater than the goal of 450, however my select tag 3's value will not go to 0 unless I set it to 0 with
if (maxTPH1 + maxTPH2 >= $('#tphNeeded').val() ) {
maxTPH3 = 0;
maxTPH4 = 0;
}
We have a limit of four select tags.
I can set the tags back to 0.
If I was two change the first two tags back to 200 again though and the third tag appeared again, the value of 200 still shows up, but now it's calculated as 0. Even though the number says 200. I believe it has something to do with the scope, or order of operations.
This is the code snippet
var maxTPH1 = 0;
var maxTPH2 = 0;
var maxTPH3 = 0;
var maxTPH4 = 0;
var tphAdditonalNeededValue;
$(document).ready(function() {
jQuery.selectValidator = function selectValidator() {
// If value of #maxTPH1 is less than #tphNeeded add a second bin, if they change option one re-evaluate
if ($('#maxTPH1').val() < $('#tphNeeded').val()) {
$('#selectedSourceMaterial2, #materialInput2').fadeIn(800).css("display", "inline-block");
$('#sourceMaterialDivImage').css('margin-bottom', "17%");
} else {
$('#selectedSourceMaterial2, #materialInput2').css("display", "none");
$('#sourceMaterialDivImage').css('margin-bottom', "13%");
}
// If value of #maxTPH1 + #maxTPH2 is less than #tphNeeded add a third bin
if ((parseInt($('#maxTPH1').val()) + parseInt($('#maxTPH2').val())) < parseInt($('#tphNeeded').val())) {
$('#selectedSourceMaterial3, #materialInput3').fadeIn(800).css("display", "inline-block");
} else {
$('#selectedSourceMaterial3, #materialInput3').css("display", "none");
$('#selectedSourceMaterial4, #materialInput4').css("display", "none");
}
// If value of #maxTPH1 + #maxTPH2 + #maxTPH3 is less than #tphNeeded add a fourth bin
if ((parseInt($('#maxTPH1').val()) + parseInt($('#maxTPH2').val()) + parseInt($('#maxTPH3').val())) < parseInt($('#tphNeeded').val())) {
$('#selectedSourceMaterial4, #materialInput4').fadeIn(800).css("display", "inline-block");
} else {
$('#selectedSourceMaterial4, #materialInput4').css("display", "none");
}
var tphAdditonalNeededValue = parseInt($('#tphNeeded').val()) -
(parseInt(maxTPH1) + parseInt(maxTPH2) + parseInt(maxTPH3) + parseInt(maxTPH4));
$('#tphAdditionalNeeded').val(tphAdditonalNeededValue);
// Puts 0 in #tphAdditionalNeeded as soon as the value becomes less than 1
// if (tphAdditonalNeededValue < 1) {
// $('#tphAdditionalNeeded').val(0);
// }
// Calculations when aggregates are selected
// Reset select options values
// if ( $('#maxTPH4').is(':hidden') ) {
// maxTPH4 = 0;
// }
// Your changes have been reverted
} // end of select Validator
// When select tag changes, take value of selected option and make it #maxTPH1 value
$('#selectedSourceMaterial1').on("change", function() {
$('#maxTPH1').val($('#selectedSourceMaterial1 option:selected').val());
if ($('#maxTPH1').val() != null) {
maxTPH1 = $('#maxTPH1').val();
}
$.selectValidator();
// $.tphAdjustment();
});
// When select tag changes, take value of selected option and make it #maxTPH2 value
$('#selectedSourceMaterial2').on("change", function() {
$('#maxTPH2').val($('#selectedSourceMaterial2 option:selected').val());
if ($('#maxTPH2').val() != null) {
maxTPH2 = $('#maxTPH2').val();
}
$.selectValidator();
});
// When select tag changes, take value of selected option and make it #maxTPH3 value
$('#selectedSourceMaterial3').on("change", function() {
$('#maxTPH3').val($('#selectedSourceMaterial3 option:selected').val());
if ($('#maxTPH3').val() != null) {
maxTPH3 = $('#maxTPH3').val();
}
$.selectValidator();
});
// When select tag changes, take value of selected option and make it #maxTPH4 value
$('#selectedSourceMaterial4').on("change", function() {
$('#maxTPH4').val($('#selectedSourceMaterial4 option:selected').val());
if ($('#maxTPH4').val() != null) {
maxTPH4 = $('#maxTPH4').val();
}
$.selectValidator();
if ((parseInt($('#maxTPH1').val()) + parseInt($('#maxTPH2').val()) + parseInt($('#maxTPH3').val()) + parseInt($('#maxTPH4').val())) < parseInt($('#tphNeeded').val())) {
alert("You do not have enough material to calibrate with the target tons desired!");
}
});
//Removes default select tags after each select is changed
$('#selectedSourceMaterial1').on("change", function() {
$('#defaultSelect1').remove(); // Removes default select tag after person selects option
});
$('#selectedSourceMaterial2').on("change", function() {
$('#defaultSelect2').remove(); // Removes default select tag after person selects option2
});
$('#selectedSourceMaterial3').on("change", function() {
$('#defaultSelect3').remove(); // Removes default select tag after person selects option2
});
$('#selectedSourceMaterial4').on("change", function() {
$('#defaultSelect4').remove(); // Removes default select tag after person selects option2
});
// Opens Calibration LightBox and Overlay
$('.calibrationButton').click(function() {
$("#calibration").css("width", "100%");
$('#sourceMaterialDiv, #sourceMaterialForm').fadeIn(1000);
$('.overlay').css("background-color", "rgba(230,230,0,0.6)"); //Gets noticeCalibrationDiv color
});
// Closes noticeCalibration div and fades in inspect reminder prompt
$('.noticeCalibration').click(function() {
$('#noticeCalibrationDiv').hide();
$('#calibrationInspectDiv').fadeIn(1000);
$('.overlay').css("background-color", "rgba(204,0,0,0.6)"); // Gets calibration Inspect color
});
// Closes calibratioInspect div and fades in configure prompt
$('.calibrationInspect').click(function() {
$('#calibrationInspectDiv').hide();
$('#targetTonsDiv, #targetTonsForm').fadeIn(1000);
$('.overlay').css("background-color", "rgba(0,179,0,0.6)"); // Gets targetTons div's color
});
// Closes calibratioInspect div and fades in configure prompt
$('.targetTons').click(function() {
$('#targetTonsDiv').hide();
$('#sourceMaterialDiv, #sourceMaterialForm').fadeIn(1000);
$('.overlay').css("background-color", "rgba(0,179,0,0.6)"); // Gets sourceMaterial div's color
});
$('.sourceMaterial').click(function() {
$('#sourceMaterialDiv').hide();
$('#adjustedTPH, #adjustedTPHFormDiv').fadeIn(1000);
$('.overlay').css("background-color", "rgba(0,0,204,0.4)"); // Gets adjustedTPH div's color
});
// Cancels calibration and closes overlay
$('.cancelCalibration').click(function() {
$("#calibration").css("width", "0");
$('.calibrationList li div').css("display", "none");
});
$('.testForError').click(function() {
$("body").css("background-color", "green");
});
// Adds class to selected radio button and removes class from sibling radio buttons for enable/disable feature
$('#ttRadioForm input').click(function() {
$(this).addClass('ttRadioSelected').siblings().removeClass('ttRadioSelected');
//Adds and removes classes and disable/enabled on input fields if related radio button is checked or unchecked
if ($('#radioHigh').hasClass('ttRadioSelected')) {
$('#inputHigh').addClass('ttInputEnabled').prop('disabled', false).siblings().removeClass('ttInputEnabled').prop('disabled', true);
}
if ($('#radioMid').hasClass('ttRadioSelected')) {
$('#inputMid').addClass('ttInputEnabled').prop('disabled', false).siblings().removeClass('ttInputEnabled').prop('disabled', true);
}
if ($('#radioLow').hasClass('ttRadioSelected')) {
$('#inputLow').addClass('ttInputEnabled').prop('disabled', false).siblings().removeClass('ttInputEnabled').prop('disabled', true);
}
});
//attach keypress to input
$('#ttInputForm input, #targetTestTons').keydown(function(event) {
// Allow special chars + arrows
if (event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 ||
(event.keyCode == 190 && event.shiftKey !== true) ||
event.keyCode == 27 || event.keyCode == 13 ||
(event.keyCode == 65 && event.ctrlKey === true) ||
(event.keyCode >= 35 && event.keyCode <= 39)) {
return;
} else {
// If it's not a number stop the keypress
if (event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105)) {
event.preventDefault();
}
}
});
}); // End of Document.ready
/*#font-face {
font-family: 'Droid-Serif';
src: url(../fonts/Droid_Serif/DroidSerif.ttf);
}*/
body {
background-image: url("../images/scalesbackground.png");
background-size: 100% 100%;
background-repeat: no-repeat;
background-color: black;
}
/* The Overlay (background) */
.overlay {
/* Height & width depends on how you want to reveal the overlay (see JS below) */
height: 100%;
width: 0;
position: fixed;
/* Stay in place */
z-index: 100;
/* Sit on top */
left: 0;
top: 0;
background-color: rgb(0, 0, 0);
/* Black fallback color */
background-color: rgba(0, 0, 0, 0.6);
/* Black w/opacity */
overflow-x: hidden;
/* Disable horizontal scroll */
/*transition: 0.1s;*/
/* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}
/* Position the content inside the overlay */
.overlay-content {
position: relative;
top: 25%;
/* 25% from the top */
width: 100%;
/* 100% width */
text-align: center;
/* Centered text/links */
}
.calibrationList {
width: 90%;
margin-top: 15%;
background-color: white;
list-style: none;
margin-left: auto;
margin-right: auto;
padding: 5px;
border: black solid 1px;
}
.calibrationList li div {
/* Stops calibration divs from displaying until jQuery shows them */
display: none;
font-family: "Arial";
font-weight: bold;
}
.calibrationList form {
margin-bottom: .8em;
}
.calibrationList li p {
display: inline-block;
margin: 0px 0px 16px 20px;
width: 75%;
font-size: 12pt;
line-height: 22px;
}
.calibrateDivImage {
display: inline-block;
width: 13%;
padding: 6px;
}
#targetTonsDiv img,
#calibrationInspectDiv img {
margin-bottom: 16%;
}
#sourceMaterialDivImage {
width: 13%;
margin-bottom: 13%;
}
#adjustedTPH img {
width: 11%;
padding: 0px;
}
.buttonDiv {
margin-left: 50%;
}
.buttonDiv button {
background-color: gray;
padding: 5px 23px 5px 23px;
font-size: 16px;
border-radius: 30px;
outline: none;
}
#targetTonsHeader,
#sourceMaterialHeader,
#adjustedTPHHeader {
text-align: center;
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 1%;
}
#targetTonsForm {
width: 70%;
display: inline-block;
margin: 5px 0px 15px 15px;
padding: 10px 5px 5px 5px;
}
#targetTonsForm p {
text-align: center;
margin-bottom: 0;
}
#targetTonsForm form {
border: 2px solid black;
display: inline-block;
}
#ttRadioForm {
width: 30%;
line-height: 23px;
margin-right: 0px;
margin-left: 5%;
}
#ttInputForm {
margin-left: -5px;
}
#targetTestTonsForm {
border: none !important;
width: 100%;
margin-left: -7%;
margin-top: 5%;
}
#ttInputForm input {
height: 23px;
border-top: 0px;
border-right: 0px;
border-left: 0px;
border-bottom: 2px solid black;
padding-left: 5px;
outline: none;
font-size: 16px;
}
#targetTestTonsForm input {
height: 23px;
font-size: 16px;
outline: none;
margin-left: -3%;
width: 49%;
border: 2px solid black;
}
#targetTestTonsForm p {
width: 45%;
margin: 0;
padding: 0;
}
.ttTextBottomInput {
border-bottom: 0px !important;
}
#ttInputForm input:disabled {
background-color: gray;
}
#sourceMaterialForm,
#adjustedTPHFormDiv {
width: 85%;
display: inline-block;
margin-left: 1%;
}
#sourceMaterialForm select,
#adjustedTPH select {
width: 51%;
height: 23px;
font-size: 16px;
}
#selectedSourceMaterial2,
#materialInput2,
#selectedSourceMaterial3,
#materialInput3,
#selectedSourceMaterial4,
#materialInput4 {
display: none;
}
.sourceMaterialSelectInputForm,
.adjustedTPHInputForm {
display: inline-block;
width: 47%;
}
.sourceMaterialSelectInputForm input,
.adjustedTPHInputForm input {
width: 48%;
outline: none;
height: 23px;
font-size: 16px;
border: 2px solid black;
}
.maxTPH {
margin-right: -3%;
}
#tphNeededSourceMaterialP,
#tphAdditionalNeededSourceMaterialP {
width: 69%;
text-align: right;
display: inline-block;
}
.tphNeeded {
width: 22%;
display: inline-block;
}
.tphNeeded input {
width: 100%;
border: 2px solid black;
height: 23px;
font-size: 16px;
}
.maxTPHLabel {
margin-left: 8%;
}
.adjTPHLabel {
margin-left: 11%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<html>
<head>
<title>Test Modal</title>
<!-- Stylesheets -->
<link rel="stylesheet" type="text/css" href="css/style.css">
<!-- Scripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="js/main.js"></script>
<script src="js/sourceMaterial.js"></script>
</head>
<body>
<div id="calibration" class="overlay">
<!-- Overlay content -->
<ul class="calibrationList">
<li>
<div id="sourceMaterialDiv" class="overlayContent">
<p id="sourceMaterialHeader">Please select the source material</p>
<img id="sourceMaterialDivImage" src="images/questionicon.png">
<div id="sourceMaterialForm">
<select id="selectedSourceMaterial1" name="selectedSourceMaterial1">
<option id="defaultSelect1" value="0" selected>--SELECT--</option>
<option class="selectedOption" value="100">stone</option>
<option class="selectedOption" value="200">gold</option>
<option class="selectedOption" value="300">rainbows</option>
</select>
<form id="materialInput1" class="sourceMaterialSelectInputForm">
<label class="maxTPHLabel">Max TPH</label> <label class="adjTPHLabel">Adj. TPH</label> </br>
<input class="maxTPH" type="text" id="maxTPH1" name="maxTPH1" maxlength="7" disabled>
<input class="adjTPH" type="text" id="adjTPH1" name="adjTPH1" maxlength="7" placeholder=" " disabled>
</form>
<!--Second select and form appear if additional TPH is needed -->
<select id="selectedSourceMaterial2" name="selectedSourceMaterial2">
<option id="defaultSelect2" value="0" selected>--SELECT--</option>
<option class="selectedOption" value="100">stone</option>
<option class="selectedOption" value="200">gold</option>
<option class="selectedOption" value="300">rainbows</option>
</select>
<form id="materialInput2" class="sourceMaterialSelectInputForm">
<input class="maxTPH" type="text" id="maxTPH2" name="maxTPH2" maxlength="7" placeholder=" " disabled>
<input class="adjTPH" type="text" id="adjTPH2" name="adjTPH2" maxlength="7" placeholder=" " disabled>
</form>
<!--Third select and form appear if additional TPH is needed -->
<select id="selectedSourceMaterial3" name="selectedSourceMaterial3">
<option id="defaultSelect3" value="0" selected>--SELECT--</option>
<option class="selectedOption" value="100">stone</option>
<option class="selectedOption" value="200">gold</option>
<option class="selectedOption" value="300">rainbows</option>
</select>
<form id="materialInput3" class="sourceMaterialSelectInputForm">
<input class="maxTPH" type="text" id="maxTPH3" name="maxTPH3" maxlength="7" placeholder=" " disabled>
<input class="adjTPH" type="text" id="adjTPH3" name="adjTPH3" maxlength="7" placeholder=" " disabled>
</form>
<!--Fourth select and form appear if additional TPH is needed -->
<select id="selectedSourceMaterial4" name="selectedSourceMaterial4">
<option id="defaultSelect4" value="0" selected>--SELECT--</option>
<option class="selectedOption" value="100">stone</option>
<option class="selectedOption" value="200">gold</option>
<option class="selectedOption" value="300">rainbows</option>
</select>
<form id="materialInput4" class="sourceMaterialSelectInputForm">
<input class="maxTPH" type="text" id="maxTPH4" name="maxTPH4" maxlength="7" placeholder=" " disabled>
<input class="adjTPH" type="text" id="adjTPH4" name="adjTPH4" maxlength="7" placeholder=" " disabled>
</form>
</br>
<p id="tphNeededSourceMaterialP">TPH Needed</p>
<form class="tphNeeded">
<input type="text" id="tphNeeded" name="tphNeeded" maxlength="7" value="450" disabled>
</form>
</br>
<p id="tphAdditionalNeededSourceMaterialP">Additional TPH Needed</p>
<form class="tphNeeded">
<input type="text" id="tphAdditionalNeeded" name="tphAdditionalNeeded" maxlength="7" placeholder=" " disabled>
</form>
</div>
<!--End of sourceMaterialForm -->
<div class="buttonDiv">
<button class="cancelCalibration">Cancel</button>
<button type="submit" class="sourceMaterial">Ok</button>
</div>
<!--End of buttonDiv -->
</div>
</li>
<li>
<div id="adjustedTPH" class="overlayContent">
<p id="adjustedTPHHeader">The materials were redistributed as shown</p>
<img id="infoIcon" class="calibrateDivImage" src="images/infoicon.png">
<div id="adjustedTPHFormDiv">
<select id="adjustedSourceMaterial1" name="selectedSourceMaterial1">
<?php require 'selectoptions.php'; ?>
</select>
<form id="adjustedTPH1" class="adjustedTPHInputForm">
<label class="maxTPHLabel">Max TPH</label> <label class="adjTPHLabel">Adj. TPH</label> </br>
<input class="maxTPH" type="text" id="adjustedMax1" name="maxTPH1" maxlength="7" disabled>
<input class="adjTPH" type="text" id="adjustedAdj1" name="adjTPH1" maxlength="7" placeholder=" " disabled>
</form>
</br>
<p id="tphNeededSourceMaterialP">TPH Needed</p>
<form class="tphNeeded">
<input type="text" id="tphNeeded" name="tphNeeded" maxlength="7" value="450" disabled>
</form>
</br>
<p id="tphAdditionalNeededSourceMaterialP">Additional TPH Needed</p>
<form class="tphNeeded">
<input type="text" id="tphAdditionalNeeded" name="tphAdditionalNeeded" maxlength="7" placeholder=" " disabled>
</form>
</div>
<!--End of adjustedTPHFormDiv -->
<div class="buttonDiv">
<button class="cancelCalibration">Cancel</button>
<button class="adjustedTPHButton">Ok</button>
</div>
<!--End of buttonDiv -->
</div>
<!--End of adjustedTPH Div -->
</li>
</ul>
</div>
<!--End of #calibration .overlay -->
<!-- Use any element to open/show the overlay navigation menu -->
<button class="calibrationButton"><span>Calibrate</span></button>
</body>
</html>
Let me know if you need me to explain something. This could be a useful trick that a lot of us could use if we figure it out!

You could get the total of the :visible selects...
I used a total variable below... And looped through all the visible selects.
The setTimeout() is needed because of the animation delays of hide/show the selects.
setTimeout(function(){
console.clear();
var total=0;
$("[id^='selectedSourceMaterial']:visible").each(function(){
console.log($(this).val());
total += parseInt($(this).val());
});
console.log(total);
//var tphAdditonalNeededValue = parseInt($('#tphNeeded').val()) - (parseInt(maxTPH1) + parseInt(maxTPH2) + parseInt(maxTPH3) + parseInt(maxTPH4));
var tphAdditonalNeededValue = parseInt($('#tphNeeded').val()) - total;
$('#tphAdditionalNeeded').val(tphAdditonalNeededValue);
},1000);
You can try the below snippet.
var maxTPH1 = 0;
var maxTPH2 = 0;
var maxTPH3 = 0;
var maxTPH4 = 0;
var tphAdditonalNeededValue;
$(document).ready(function() {
jQuery.selectValidator = function selectValidator() {
// If value of #maxTPH1 is less than #tphNeeded add a second bin, if they change option one re-evaluate
if ($('#maxTPH1').val() < $('#tphNeeded').val()) {
$('#selectedSourceMaterial2, #materialInput2').fadeIn(800).css("display", "inline-block");
$('#sourceMaterialDivImage').css('margin-bottom', "17%");
} else {
$('#selectedSourceMaterial2, #materialInput2').css("display", "none");
$('#sourceMaterialDivImage').css('margin-bottom', "13%");
}
// If value of #maxTPH1 + #maxTPH2 is less than #tphNeeded add a third bin
if ((parseInt($('#maxTPH1').val()) + parseInt($('#maxTPH2').val())) < parseInt($('#tphNeeded').val())) {
$('#selectedSourceMaterial3, #materialInput3').fadeIn(800).css("display", "inline-block");
} else {
$('#selectedSourceMaterial3, #materialInput3').css("display", "none");
$('#selectedSourceMaterial4, #materialInput4').css("display", "none");
}
// If value of #maxTPH1 + #maxTPH2 + #maxTPH3 is less than #tphNeeded add a fourth bin
if ((parseInt($('#maxTPH1').val()) + parseInt($('#maxTPH2').val()) + parseInt($('#maxTPH3').val())) < parseInt($('#tphNeeded').val())) {
$('#selectedSourceMaterial4, #materialInput4').fadeIn(800).css("display", "inline-block");
} else {
$('#selectedSourceMaterial4, #materialInput4').css("display", "none");
}
setTimeout(function(){
console.clear();
var total=0;
$("[id^='selectedSourceMaterial']:visible").each(function(){
console.log($(this).val());
total += parseInt($(this).val());
});
console.log(total);
//var tphAdditonalNeededValue = parseInt($('#tphNeeded').val()) - (parseInt(maxTPH1) + parseInt(maxTPH2) + parseInt(maxTPH3) + parseInt(maxTPH4));
var tphAdditonalNeededValue = parseInt($('#tphNeeded').val()) - total;
$('#tphAdditionalNeeded').val(tphAdditonalNeededValue);
},1000);
} // end of select Validator
// When select tag changes, take value of selected option and make it #maxTPH1 value
$('#selectedSourceMaterial1').on("change", function() {
$('#maxTPH1').val($('#selectedSourceMaterial1 option:selected').val());
if ($('#maxTPH1').val() != null) {
maxTPH1 = $('#maxTPH1').val();
}
$.selectValidator();
// $.tphAdjustment();
});
// When select tag changes, take value of selected option and make it #maxTPH2 value
$('#selectedSourceMaterial2').on("change", function() {
$('#maxTPH2').val($('#selectedSourceMaterial2 option:selected').val());
if ($('#maxTPH2').val() != null) {
maxTPH2 = $('#maxTPH2').val();
}
$.selectValidator();
});
// When select tag changes, take value of selected option and make it #maxTPH3 value
$('#selectedSourceMaterial3').on("change", function() {
$('#maxTPH3').val($('#selectedSourceMaterial3 option:selected').val());
if ($('#maxTPH3').val() != null) {
maxTPH3 = $('#maxTPH3').val();
}
$.selectValidator();
});
// When select tag changes, take value of selected option and make it #maxTPH4 value
$('#selectedSourceMaterial4').on("change", function() {
$('#maxTPH4').val($('#selectedSourceMaterial4 option:selected').val());
if ($('#maxTPH4').val() != null) {
maxTPH4 = $('#maxTPH4').val();
}
$.selectValidator();
if ((parseInt($('#maxTPH1').val()) + parseInt($('#maxTPH2').val()) + parseInt($('#maxTPH3').val()) + parseInt($('#maxTPH4').val())) < parseInt($('#tphNeeded').val())) {
alert("You do not have enough material to calibrate with the target tons desired!");
}
});
//Removes default select tags after each select is changed
$('#selectedSourceMaterial1').on("change", function() {
$('#defaultSelect1').remove(); // Removes default select tag after person selects option
});
$('#selectedSourceMaterial2').on("change", function() {
$('#defaultSelect2').remove(); // Removes default select tag after person selects option2
});
$('#selectedSourceMaterial3').on("change", function() {
$('#defaultSelect3').remove(); // Removes default select tag after person selects option2
});
$('#selectedSourceMaterial4').on("change", function() {
$('#defaultSelect4').remove(); // Removes default select tag after person selects option2
});
// Opens Calibration LightBox and Overlay
$('.calibrationButton').click(function() {
$("#calibration").css("width", "100%");
$('#sourceMaterialDiv, #sourceMaterialForm').fadeIn(1000);
$('.overlay').css("background-color", "rgba(230,230,0,0.6)"); //Gets noticeCalibrationDiv color
});
// Closes noticeCalibration div and fades in inspect reminder prompt
$('.noticeCalibration').click(function() {
$('#noticeCalibrationDiv').hide();
$('#calibrationInspectDiv').fadeIn(1000);
$('.overlay').css("background-color", "rgba(204,0,0,0.6)"); // Gets calibration Inspect color
});
// Closes calibratioInspect div and fades in configure prompt
$('.calibrationInspect').click(function() {
$('#calibrationInspectDiv').hide();
$('#targetTonsDiv, #targetTonsForm').fadeIn(1000);
$('.overlay').css("background-color", "rgba(0,179,0,0.6)"); // Gets targetTons div's color
});
// Closes calibratioInspect div and fades in configure prompt
$('.targetTons').click(function() {
$('#targetTonsDiv').hide();
$('#sourceMaterialDiv, #sourceMaterialForm').fadeIn(1000);
$('.overlay').css("background-color", "rgba(0,179,0,0.6)"); // Gets sourceMaterial div's color
});
$('.sourceMaterial').click(function() {
$('#sourceMaterialDiv').hide();
$('#adjustedTPH, #adjustedTPHFormDiv').fadeIn(1000);
$('.overlay').css("background-color", "rgba(0,0,204,0.4)"); // Gets adjustedTPH div's color
});
// Cancels calibration and closes overlay
$('.cancelCalibration').click(function() {
$("#calibration").css("width", "0");
$('.calibrationList li div').css("display", "none");
});
$('.testForError').click(function() {
$("body").css("background-color", "green");
});
// Adds class to selected radio button and removes class from sibling radio buttons for enable/disable feature
$('#ttRadioForm input').click(function() {
$(this).addClass('ttRadioSelected').siblings().removeClass('ttRadioSelected');
//Adds and removes classes and disable/enabled on input fields if related radio button is checked or unchecked
if ($('#radioHigh').hasClass('ttRadioSelected')) {
$('#inputHigh').addClass('ttInputEnabled').prop('disabled', false).siblings().removeClass('ttInputEnabled').prop('disabled', true);
}
if ($('#radioMid').hasClass('ttRadioSelected')) {
$('#inputMid').addClass('ttInputEnabled').prop('disabled', false).siblings().removeClass('ttInputEnabled').prop('disabled', true);
}
if ($('#radioLow').hasClass('ttRadioSelected')) {
$('#inputLow').addClass('ttInputEnabled').prop('disabled', false).siblings().removeClass('ttInputEnabled').prop('disabled', true);
}
});
//attach keypress to input
$('#ttInputForm input, #targetTestTons').keydown(function(event) {
// Allow special chars + arrows
if (event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 ||
(event.keyCode == 190 && event.shiftKey !== true) ||
event.keyCode == 27 || event.keyCode == 13 ||
(event.keyCode == 65 && event.ctrlKey === true) ||
(event.keyCode >= 35 && event.keyCode <= 39)) {
return;
} else {
// If it's not a number stop the keypress
if (event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105)) {
event.preventDefault();
}
}
});
}); // End of Document.ready
/*#font-face {
font-family: 'Droid-Serif';
src: url(../fonts/Droid_Serif/DroidSerif.ttf);
}*/
body {
background-image: url("../images/scalesbackground.png");
background-size: 100% 100%;
background-repeat: no-repeat;
background-color: black;
}
/* The Overlay (background) */
.overlay {
/* Height & width depends on how you want to reveal the overlay (see JS below) */
height: 100%;
width: 0;
position: fixed;
/* Stay in place */
z-index: 100;
/* Sit on top */
left: 0;
top: 0;
background-color: rgb(0, 0, 0);
/* Black fallback color */
background-color: rgba(0, 0, 0, 0.6);
/* Black w/opacity */
overflow-x: hidden;
/* Disable horizontal scroll */
/*transition: 0.1s;*/
/* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}
/* Position the content inside the overlay */
.overlay-content {
position: relative;
top: 25%;
/* 25% from the top */
width: 100%;
/* 100% width */
text-align: center;
/* Centered text/links */
}
.calibrationList {
width: 90%;
margin-top: 15%;
background-color: white;
list-style: none;
margin-left: auto;
margin-right: auto;
padding: 5px;
border: black solid 1px;
}
.calibrationList li div {
/* Stops calibration divs from displaying until jQuery shows them */
display: none;
font-family: "Arial";
font-weight: bold;
}
.calibrationList form {
margin-bottom: .8em;
}
.calibrationList li p {
display: inline-block;
margin: 0px 0px 16px 20px;
width: 75%;
font-size: 12pt;
line-height: 22px;
}
.calibrateDivImage {
display: inline-block;
width: 13%;
padding: 6px;
}
#targetTonsDiv img,
#calibrationInspectDiv img {
margin-bottom: 16%;
}
#sourceMaterialDivImage {
width: 13%;
margin-bottom: 13%;
}
#adjustedTPH img {
width: 11%;
padding: 0px;
}
.buttonDiv {
margin-left: 50%;
}
.buttonDiv button {
background-color: gray;
padding: 5px 23px 5px 23px;
font-size: 16px;
border-radius: 30px;
outline: none;
}
#targetTonsHeader,
#sourceMaterialHeader,
#adjustedTPHHeader {
text-align: center;
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 1%;
}
#targetTonsForm {
width: 70%;
display: inline-block;
margin: 5px 0px 15px 15px;
padding: 10px 5px 5px 5px;
}
#targetTonsForm p {
text-align: center;
margin-bottom: 0;
}
#targetTonsForm form {
border: 2px solid black;
display: inline-block;
}
#ttRadioForm {
width: 30%;
line-height: 23px;
margin-right: 0px;
margin-left: 5%;
}
#ttInputForm {
margin-left: -5px;
}
#targetTestTonsForm {
border: none !important;
width: 100%;
margin-left: -7%;
margin-top: 5%;
}
#ttInputForm input {
height: 23px;
border-top: 0px;
border-right: 0px;
border-left: 0px;
border-bottom: 2px solid black;
padding-left: 5px;
outline: none;
font-size: 16px;
}
#targetTestTonsForm input {
height: 23px;
font-size: 16px;
outline: none;
margin-left: -3%;
width: 49%;
border: 2px solid black;
}
#targetTestTonsForm p {
width: 45%;
margin: 0;
padding: 0;
}
.ttTextBottomInput {
border-bottom: 0px !important;
}
#ttInputForm input:disabled {
background-color: gray;
}
#sourceMaterialForm,
#adjustedTPHFormDiv {
width: 85%;
display: inline-block;
margin-left: 1%;
}
#sourceMaterialForm select,
#adjustedTPH select {
width: 51%;
height: 23px;
font-size: 16px;
}
#selectedSourceMaterial2,
#materialInput2,
#selectedSourceMaterial3,
#materialInput3,
#selectedSourceMaterial4,
#materialInput4 {
display: none;
}
.sourceMaterialSelectInputForm,
.adjustedTPHInputForm {
display: inline-block;
width: 47%;
}
.sourceMaterialSelectInputForm input,
.adjustedTPHInputForm input {
width: 48%;
outline: none;
height: 23px;
font-size: 16px;
border: 2px solid black;
}
.maxTPH {
margin-right: -3%;
}
#tphNeededSourceMaterialP,
#tphAdditionalNeededSourceMaterialP {
width: 69%;
text-align: right;
display: inline-block;
}
.tphNeeded {
width: 22%;
display: inline-block;
}
.tphNeeded input {
width: 100%;
border: 2px solid black;
height: 23px;
font-size: 16px;
}
.maxTPHLabel {
margin-left: 8%;
}
.adjTPHLabel {
margin-left: 11%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<html>
<head>
<title>Test Modal</title>
<!-- Stylesheets -->
<link rel="stylesheet" type="text/css" href="css/style.css">
<!-- Scripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="js/main.js"></script>
<script src="js/sourceMaterial.js"></script>
</head>
<body>
<div id="calibration" class="overlay">
<!-- Overlay content -->
<ul class="calibrationList">
<li>
<div id="sourceMaterialDiv" class="overlayContent">
<p id="sourceMaterialHeader">Please select the source material</p>
<img id="sourceMaterialDivImage" src="images/questionicon.png">
<div id="sourceMaterialForm">
<select id="selectedSourceMaterial1" name="selectedSourceMaterial1">
<option id="defaultSelect1" value="0" selected>--SELECT--</option>
<option class="selectedOption" value="100">stone</option>
<option class="selectedOption" value="200">gold</option>
<option class="selectedOption" value="300">rainbows</option>
</select>
<form id="materialInput1" class="sourceMaterialSelectInputForm">
<label class="maxTPHLabel">Max TPH</label> <label class="adjTPHLabel">Adj. TPH</label> </br>
<input class="maxTPH" type="text" id="maxTPH1" name="maxTPH1" maxlength="7" disabled>
<input class="adjTPH" type="text" id="adjTPH1" name="adjTPH1" maxlength="7" placeholder=" " disabled>
</form>
<!--Second select and form appear if additional TPH is needed -->
<select id="selectedSourceMaterial2" name="selectedSourceMaterial2">
<option id="defaultSelect2" value="0" selected>--SELECT--</option>
<option class="selectedOption" value="100">stone</option>
<option class="selectedOption" value="200">gold</option>
<option class="selectedOption" value="300">rainbows</option>
</select>
<form id="materialInput2" class="sourceMaterialSelectInputForm">
<input class="maxTPH" type="text" id="maxTPH2" name="maxTPH2" maxlength="7" placeholder=" " disabled>
<input class="adjTPH" type="text" id="adjTPH2" name="adjTPH2" maxlength="7" placeholder=" " disabled>
</form>
<!--Third select and form appear if additional TPH is needed -->
<select id="selectedSourceMaterial3" name="selectedSourceMaterial3">
<option id="defaultSelect3" value="0" selected>--SELECT--</option>
<option class="selectedOption" value="100">stone</option>
<option class="selectedOption" value="200">gold</option>
<option class="selectedOption" value="300">rainbows</option>
</select>
<form id="materialInput3" class="sourceMaterialSelectInputForm">
<input class="maxTPH" type="text" id="maxTPH3" name="maxTPH3" maxlength="7" placeholder=" " disabled>
<input class="adjTPH" type="text" id="adjTPH3" name="adjTPH3" maxlength="7" placeholder=" " disabled>
</form>
<!--Fourth select and form appear if additional TPH is needed -->
<select id="selectedSourceMaterial4" name="selectedSourceMaterial4">
<option id="defaultSelect4" value="0" selected>--SELECT--</option>
<option class="selectedOption" value="100">stone</option>
<option class="selectedOption" value="200">gold</option>
<option class="selectedOption" value="300">rainbows</option>
</select>
<form id="materialInput4" class="sourceMaterialSelectInputForm">
<input class="maxTPH" type="text" id="maxTPH4" name="maxTPH4" maxlength="7" placeholder=" " disabled>
<input class="adjTPH" type="text" id="adjTPH4" name="adjTPH4" maxlength="7" placeholder=" " disabled>
</form>
</br>
<p id="tphNeededSourceMaterialP">TPH Needed</p>
<form class="tphNeeded">
<input type="text" id="tphNeeded" name="tphNeeded" maxlength="7" value="450" disabled>
</form>
</br>
<p id="tphAdditionalNeededSourceMaterialP">Additional TPH Needed</p>
<form class="tphNeeded">
<input type="text" id="tphAdditionalNeeded" name="tphAdditionalNeeded" maxlength="7" placeholder=" " disabled>
</form>
</div>
<!--End of sourceMaterialForm -->
<div class="buttonDiv">
<button class="cancelCalibration">Cancel</button>
<button type="submit" class="sourceMaterial">Ok</button>
</div>
<!--End of buttonDiv -->
</div>
</li>
<li>
<div id="adjustedTPH" class="overlayContent">
<p id="adjustedTPHHeader">The materials were redistributed as shown</p>
<img id="infoIcon" class="calibrateDivImage" src="images/infoicon.png">
<div id="adjustedTPHFormDiv">
<select id="adjustedSourceMaterial1" name="selectedSourceMaterial1">
<?php require 'selectoptions.php'; ?>
</select>
<form id="adjustedTPH1" class="adjustedTPHInputForm">
<label class="maxTPHLabel">Max TPH</label> <label class="adjTPHLabel">Adj. TPH</label> </br>
<input class="maxTPH" type="text" id="adjustedMax1" name="maxTPH1" maxlength="7" disabled>
<input class="adjTPH" type="text" id="adjustedAdj1" name="adjTPH1" maxlength="7" placeholder=" " disabled>
</form>
</br>
<p id="tphNeededSourceMaterialP">TPH Needed</p>
<form class="tphNeeded">
<input type="text" id="tphNeeded" name="tphNeeded" maxlength="7" value="450" disabled>
</form>
</br>
<p id="tphAdditionalNeededSourceMaterialP">Additional TPH Needed</p>
<form class="tphNeeded">
<input type="text" id="tphAdditionalNeeded" name="tphAdditionalNeeded" maxlength="7" placeholder=" " disabled>
</form>
</div>
<!--End of adjustedTPHFormDiv -->
<div class="buttonDiv">
<button class="cancelCalibration">Cancel</button>
<button class="adjustedTPHButton">Ok</button>
</div>
<!--End of buttonDiv -->
</div>
<!--End of adjustedTPH Div -->
</li>
</ul>
</div>
<!--End of #calibration .overlay -->
<!-- Use any element to open/show the overlay navigation menu -->
<button class="calibrationButton"><span>Calibrate</span></button>
</body>
</html>

Toggle Checkbox upon clicking on Span

I'm working on an assignment that needs to, upon the click of a span element's text in an input div, output the same text in an output div. That part I've done successfully, but to the left of each span element within the input div is a checkbox that needs to also be checked upon the click of said span element.
I am not allowed to target each individual checkbox with its own unique ID because I will be adding in newer checkboxes and span elements later with the press of a button and prompt. This is an assignment on event delegation.
I will then need to be able to uncheck the checkbox and remove the appended output, but first things first, I cannot figure out how to target the checkboxes. The only thing I can think of is to somehow say that whatever index number of said span element was clicked would be the index number of said checkbox is clicked, but I'm unsure if that is the best method as well as how to go about doing that.
Also, this assignment should not have any JQuery involved. My next project is actually to redo this assignment in JQuery. Any help would be appreciated!
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Canvas Document Object Model Exercise</title>
<link rel="stylesheet" href="canvas_stylesheet.css">
</head>
<body>
<div id="input">
<form>
<input class="checkbox" type="checkbox"><span class="values">Apple</span></br></br>
<input class="checkbox" type="checkbox"><span class="values">Mango</span></br></br>
<input class="checkbox" type="checkbox"><span class="values">Grape</span></br></br>
<input class="checkbox" type="checkbox"><span class="values">Strawberry</span></br></br>
<input class="checkbox" type="checkbox"><span class="values">Cherry</span>
</form>
</div>
<div id="output"></div>
CSS:
#input {
width: 250px;
height: 300px;
float: left;
padding: 20px 0 30px 15px;
border-style: solid;
border-color: black;
border-width: 1px;
}
.values {
display: inline;
}
/*
#input form input {
padding: 20px 20px 20px 20px;
}
*/
#output {
width: 225px;
height: 326px;
float: left;
border-top: 1px solid black;
border-right: 1px solid black;
border-bottom: 1px solid black;
padding: 4px 20px 20px;
}
JS:
window.onload = UncheckAll;
function UncheckAll() {
var w = document.getElementsByTagName('input');
for (var i = 0; i < w.length; i++) {
if (w[i].type == 'checkbox') {
w[i].checked = false;
}
}
}
document.getElementById("input").addEventListener("click", function(e){
if (e.target.nodeName === "SPAN") {
var node = document.createElement("P");
var textnode = document.createTextNode(e.target.innerHTML);
node.appendChild(textnode);
document.getElementById("output").appendChild(node);
node.setAttribute("class", "outputItem")
}
});

Just surround your checkboxes elements with label, like I did here.
Ps: plese never write a br element like this </br>, its <br> with no slash at all
window.onload = UncheckAll;
function UncheckAll() {
var w = document.getElementsByTagName('input');
for (var i = 0; i < w.length; i++) {
if (w[i].type == 'checkbox') {
w[i].checked = false;
}
}
}
document.getElementById("input").addEventListener("click", function(e){
if (e.target.nodeName === "SPAN") {
var node = document.createElement("P");
var textnode = document.createTextNode(e.target.innerHTML);
node.appendChild(textnode);
document.getElementById("output").appendChild(node);
node.setAttribute("class", "outputItem")
}
});
#input {
width: 250px;
height: 300px;
float: left;
padding: 20px 0 30px 15px;
border-style: solid;
border-color: black;
border-width: 1px;
}
.values {
display: inline;
}
/*
#input form input {
padding: 20px 20px 20px 20px;
}
*/
#output {
width: 225px;
height: 326px;
float: left;
border-top: 1px solid black;
border-right: 1px solid black;
border-bottom: 1px solid black;
padding: 4px 20px 20px;
}
<!DOCTYPE html>
<html>
<head>
<title>Canvas Document Object Model Exercise</title>
<link rel="stylesheet" href="canvas_stylesheet.css">
</head>
<body>
<div id="input">
<form>
<label>
<input class="checkbox" type="checkbox"><span class="values">Apple</span>
</label>
<br><br>
<label>
<input class="checkbox" type="checkbox"><span class="values">Mango</span>
</label>
<br><br>
<label>
<input class="checkbox" type="checkbox"><span class="values">Grape</span>
</label>
<br><br>
<label>
<input class="checkbox" type="checkbox"><span class="values">Strawberry</span>
</label>
<br><br>
<label>
<input class="checkbox" type="checkbox"><span class="values">Cherry</span>
</label>
</form>
</div>
<div id="output"></div>
</body>
</html>

I realized the answer was to use .previousSibling and .nextSibling after posting the question, so I went ahead and finished all the code for the input/output part of the assignment. Then, I realized someone else mentioned .previousSibling in response to the first answer attempt. Thanks everyone!
window.onload = UncheckAll;
function UncheckAll() {
var w = document.getElementsByTagName('input');
for (var i = 0; i < w.length; i++) {
if (w[i].type == 'checkbox') {
w[i].checked = false;
}
}
}
document.getElementById("input").addEventListener("click", function(e){
//Click Input Text - Box Checks and Output Text Appears
if (e.target.nodeName === "SPAN") {
if (e.target.previousSibling.checked === false) {
var node = document.createElement("P");
var textnode = document.createTextNode(e.target.innerHTML);
node.appendChild(textnode);
document.getElementById("output").appendChild(node);
node.setAttribute("class", "outputItem")
e.target.previousSibling.checked = true;
return;
}
}
//Click Input Text - Box Unchecks and Output Text Disappears
if (e.target.nodeName === "SPAN") {
if (e.target.previousSibling.checked === true) {
for (i = 0; i < document.getElementsByClassName("outputItem").length; i++) {
if (e.target.innerHTML === document.getElementsByClassName("outputItem")[i].innerHTML) {
document.getElementsByClassName("outputItem")[i].remove();
e.target.previousSibling.checked = false;
return;
}
}
}
}
//Check Box - Output Text Appears
if (e.target.type === "checkbox") {
if (e.target.checked === true) {
var node = document.createElement("P");
var textnode = document.createTextNode(e.target.nextSibling.innerHTML);
node.appendChild(textnode);
document.getElementById("output").appendChild(node);
node.setAttribute("class", "outputItem")
return;
}
}
//Uncheck Box - Output Text Disappears
if (e.target.type === "checkbox") {
if (e.target.checked === false) {
for (i = 0; i < document.getElementsByClassName("outputItem").length; i++) {
if (e.target.nextSibling.innerHTML === document.getElementsByClassName("outputItem")[i].innerHTML) {
document.getElementsByClassName("outputItem")[i].remove();
return;
}
}
}
}
});

Does anyone know why my multi-phase form won't work?

I am making a multi-phase form but it is not acting normal
I have written a lot of diffrent code for it but don't know why it is not working the way I want it
It has been two days working with it I am feeling stupid now
here is the code
HTML:
<div id="form-container">
<div id="phase-1">
<h3>Phase 01</h3>
<form>
<input id="fname" type="text" placeholder="First name">
<input id="lname" type="text" placeholder="Last name">
<input id="email" type="text" placeholder="Email">
<button id="phase-1-btn">Next</button>
</form>
</div>
<div id="phase-2">
<h3>Phase 02</h3>
<form>
<input id="pass" type="text" placeholder="Password">
<input id="cpass" type="text" placeholder="Confirm Password">
<button id="phase-2-btn">Next</button>
</form>
</div>
<div id="phase-3">
<h2>Thank You for Testing my pen</h2>
</div>
</div>
CSS :
#form-container{
height: 350px;
width: 300px;
margin-top: 80px;
margin-left: auto;
margin-right: auto;
background-color: #95a5a6;
font-family: "Slabo 27px";
position: relative;
box-shadow: 1px 1px 2px,
-1px -1px 2px;
}
#phase-1, #phase-2{
height: 100%;
width: 100%;
border-top: 3px solid #f39c12;
display: block;
}
#phase-1 h3, #phase-2 h3{
height: 10%;
width: 60%;
margin-left: auto;
margin-right: auto;
text-align: center;
font-size: 23px;
color: #fff;
}
#phase-1 form, #phase-2 form{
display: block;
height: 75%;
padding: 0;
padding-top: 15px;
margin: 0;
}
input{
display: block;
width: 80%;
margin-top: 10px;
margin-left: auto;
margin-right: auto;
padding: 10px 20px;
border: none;
border-radius: 5px;
}
button {
display: block;
width: 60%;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
padding: 10px 5px;
background-color: #f39c12;
color: #fff;
font-weight: 600;
border: none;
border-radius: 6px;
}
#phase-2{
display: none;
}
#phase-3{
display: none;
height: 0;
width: 100%;
color: #000;
position: absolute;
top: 0;
left: 0;
background: #f39c12
}
#phase-3 h2{
width: 200px;
height: 60px;
margin-left: auto;
margin-right: auto;
margin-top: 135px;
text-align: center;
}
JS :
var fname, lname, email, pass, cpass;
function id( id ) {
return document.getElementById(id);
}
function phase1 () {
fname = id("fname").value;
lname = id("lname").value;
email = id("email").value;
if ( fname.length > 2 && lname.length > 2 && email.length > 2 ) {
id("phase-1").style.display = "none";
id("phase-2").style.display = "block";
// end of if
} else {
alert("Please fill the Form");
}
} // end of phase1 function
// add the event to the phase-1-btn
id("phase-1-btn").addEventListener("click", phase1());
/* phase 02 */
function phase2 () {
pass = id("pass").value;
cpass = id("cpass").value;
if ( pass.length > 2 && cpass.length > 2 ) {
id("phase-2").style.display = "none";
id("phase-3").style.display = "block";
id("phase-3").style.height = "100%";
// end of if
} else {
alert("Please fill the Form");
}
} // end of phase2 function
id("phase-2-btn").addEventListener("click", phase2());

Let's try this one. Then tell me what you see in the console.
<script>
function phase1()
{
window.console.log('phase1 function called');
var fname_val = document.getElementById('fname').value;
var lname_val = document.getElementById('lname').value;
var email_val = document.getElementById('email').value;
// verify values
window.console.log('fname_val='+fname_val + ' lname_val='+lname_val + ' email_val='+email_val);
if( fname_val.length > 2 && lname_val.length > 2 && email_val.length > 2 )
{
window.console.log('validation!! :)');
document.getElementById("phase-1").style.display = "none";
document.getElementById("phase-2").style.display = "block";
}
else
{
alert("Please fill the Form");
}
}
function phase2()
{
window.console.log('phase2 function called');
}
document.addEventListener("DOMContentLoaded", function(event) {
window.console.log("DOM fully loaded and parsed");
document.getElementById("phase-1-btn").addEventListener("click", phase1);
document.getElementById("phase-2-btn").addEventListener("click", phase2);
});
</script>
<div id="phase-1">
<h3>Phase 01</h3>
<input id="fname" type="text" placeholder="First name" />
<input id="lname" type="text" placeholder="Last name" />
<input id="email" type="text" placeholder="Email" />
<input type="button" id="phase-1-btn" value="Next" />
</div>
<div id="phase-2">
<h3>Phase 02</h3>
<input id="pass" type="text" placeholder="Password" />
<input id="cpass" type="text" placeholder="Confirm Password" />
<input type="button" id="phase-2-btn" value="Next" />
</div>
<div id="phase-3">
<h2>Thank You for Testing my pen</h2>
</div>

To submit a form you want to use a submit button (not classic button).
Have all of your inputs within the form tags.
Add the appropriate form tag attributes such as (action & method)
Use one form tag that wraps around everything with the submit button on the inside.
CSS will have no effect so no need to share that part.
Last but not least - Dont call yourself stupid. Stupid people never ask for help. Reaching out for help is how you improve your skillset.
If you insist on using Javascript to submit the form that is fine, but you want to make sure the form works with classic HTML first.
To make this a multi-step process you should try doing 1 form per page. You will need to understand session handling. You can display portions of the form at a time with Javascript which gives an impression of doing steps but still using 1 form.
<form action="" method="POST">
<script>
function toggleSection(x){
document.getElementById('sec'+x).style.display = "block";
}
</script>
<div id="sec1">
section 1 stuff
<input type="button" value="Continue" onclick="toggleSection(2);" />
</div>
<div id="sec2" style="display:none;">
section 2 stuff
<input type="button" value="Continue" onclick="toggleSection(3);" />
</div>
<div id="sec3" style="display:none;">
section 3 stuff
<input type="submit" value="Submit" />
</div>
</form>

here it is with the changes you ordered
var fname, lname, email, pass, cpass;
function el( id ) {
return document.getElementById(id);
}
function phase1 () {
fname = el("fname").value;
lname = el("lname").value;
email = el("email").value;
if ( fname.length > 2 && lname.length > 2 && email.length > 2 ) {
el("phase-1").style.display = "none";
el("phase-2").style.display = "block";
// end of if
} else {
alert("Please fill the Form");
}
} // end of phase1 function
// add the event to the phase-1-btn
el("phase-1-btn").addEventListener("click", phase1);
/* phase 02 */
function phase2 () {
pass = el("pass").value;
cpass = el("cpass").value;
if ( pass.length > 2 && cpass.length > 2 ) {
el("phase-2").style.display = "none";
el("phase-3").style.display = "block";
el("phase-3").style.height = "100%";
// end of if
} else {
alert("Please fill the Form");
}
} // end of phase2 function
el("phase-2-btn").addEventListener("click", phase2);

Develop Reference

JavaScript is the programming language of the Web.

Hide div when clicked outside without using window and document object - javascript

document.getElementsByTagName("body")[0].addEventListener("click", function(){ if(event.target.parent.id !== "idOfYourDiv") { // call hideshow() function } });

$(document).click(function(event) { //if you click on anything except the modal itself or the "open modal" link, close the modal if (!$(event.target).closest(".modal,.js-open-modal").length) { $("body").find(".modal").removeClass("visible"); } });

Related

Dynamically display element/label when ratio button is clicked

Notification show as input textbox click with jquery patterns

hide option and remove value if siblings' value is larger than goal, and restore the removed tag if siblings' value is smaller than goal

Toggle Checkbox upon clicking on Span

Does anyone know why my multi-phase form won't work?

Categories

Resources