Add a linked select box to sign up form - javascript

I have a sign up form and I want to add 2 linked select box to the form, the linked select box code works find separatly but when I try to add it into the form it doesn't show up.
I tried to add the code into a div under the password block but didn't work for me
EDIT: so we figured out that the problem isn't with the code but is something that i'm doing wrong with the Angular. when I open the project (in visual studio code) that includes the html,TS,CSS the select box won't show up. when we tried to run it not as an angular project and without the TS the select box did show up. can someone help me?
This is the linked select box:
<script>
var sel1 = document.querySelector('#sel1');
var sel2 = document.querySelector('#sel2');
var options2 = sel2.querySelectorAll('option');
function giveSelection(selValue) {
sel2.innerHTML = '';
for(var i = 0; i < options2.length; i++) {
if(options2[i].dataset.option === selValue) {
sel2.appendChild(options2[i]);
}
}
}
giveSelection(sel1.value);
</script>
<select id="sel1" onchange="giveSelection(this.value)">
<option value="a">a</option>
<option value="b">b</option>
</select>
<select id="sel2">
<option data-option="a">apple</option>
<option data-option="a">airplane</option>
<option data-option="b">banana</option>
<option data-option="b">book</option>
</select>
And this is the main sign up form:
<div class="container">
<div class="row">
<div class="col s10 offset-s1" id="panel">
<div class="progress" *ngIf="showSpinner">
<div class="indeterminate"></div>
</div>
<h3 id="title">Sign Up</h3>
<div id="errorMsg" *ngIf="errorMessage">
<span>{{errorMessage}}</span>
</div>
<form class="col s12" [formGroup]="signupForm" novalidate (ngSubmit)="signupUser()">
<div class="row">
<div class="input-field col s12">
<input id="user_name" type="text" formControlName="username" autocomplete="off">
<label for="user_name">Username</label>
<span class="error" *ngIf="!signupForm.controls['username'].valid && signupForm.controls['username'].touched">
Username is required
</span>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input id="email" type="email" formControlName="email" autocomplete="off">
<label for="email">Email</label>
<span class="error" *ngIf="!signupForm.controls['email'].valid && signupForm.controls['email'].touched">
Email is required
</span>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input id="pass-word" type="password" formControlName="password">
<label for="pass-word">Password</label>
<span class="error" *ngIf="!signupForm.controls['password'].valid && signupForm.controls['password'].touched">
Password is required
</span>
</div>
</div>
<button class="btn waves-effect" id="signupbtn" [disabled]="!signupForm.valid">
Sign Up
</button>
</form>
</div>
</div>
</div>
Hope to get some help with that

I added your linked select boxes to the form under password. It works fine. What specific problem or error message age you getting?
Update: added your css. It's not causing the problem. Try disabling your TS file and see if the code works
var sel1 = document.querySelector('#sel1');
var sel2 = document.querySelector('#sel2');
var options2 = sel2.querySelectorAll('option');
function giveSelection(selValue) {
sel2.innerHTML = '';
for(var i = 0; i < options2.length; i++) {
if(options2[i].dataset.option === selValue) {
sel2.appendChild(options2[i]);
}
}
}
giveSelection(sel1.value);
#panel {
background-color: #ffffff;
}
#signupbtn {
float: right;
margin-right: 10px;
background-color: #64b5f6;
font-weight: 500;
}
#title {
background-color: #64b5f6;
color: white;
padding: 8px;
margin-top: 0px;
font-weight: 700;
text-align: center;
}
form {
padding: 0px;
border-radius: 3px;
box-sizing: border-box;
margin: 0px 20px 0px 20px;
}
.error {
color: red;
}
.indeterminate {
background-color: #64b5f6 !important;
}
.input-field {
margin-bottom: 0px !important;
padding-bottom: 0px !important;
}
#errorMsg {
background: #f6b2b5;
width: 100%;
height: 50px;
text-align: center;
}
#errorMsg span {
top: 50%;
transform: translate(-50%, -50%);
left: 50%;
position: relative;
float: left;
font-size: 15px;
}
<div class="container">
<div class="row">
<div class="col s10 offset-s1" id="panel">
<div class="progress" *ngIf="showSpinner">
<div class="indeterminate"></div>
</div>
<h3 id="title">Sign Up</h3>
<div id="errorMsg" *ngIf="errorMessage">
<span>{{errorMessage}}</span>
</div>
<form class="col s12" [formGroup]="signupForm" novalidate (ngSubmit)="signupUser()">
<div class="row">
<div class="input-field col s12">
<input id="user_name" type="text" formControlName="username" autocomplete="off">
<label for="user_name">Username</label>
<span class="error" *ngIf="!signupForm.controls['username'].valid && signupForm.controls['username'].touched">
Username is required
</span>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input id="email" type="email" formControlName="email" autocomplete="off">
<label for="email">Email</label>
<span class="error" *ngIf="!signupForm.controls['email'].valid && signupForm.controls['email'].touched">
Email is required
</span>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input id="pass-word" type="password" formControlName="password">
<label for="pass-word">Password</label>
<span class="error" *ngIf="!signupForm.controls['password'].valid && signupForm.controls['password'].touched">
Password is required
</span>
</div>
</div>
<div>
<select id="sel1" onchange="giveSelection(this.value)">
<option value="a">a</option>
<option value="b">b</option>
</select>
<select id="sel2">
<option data-option="a">apple</option>
<option data-option="a">airplane</option>
<option data-option="b">banana</option>
<option data-option="b">book</option>
</select>
</div>
<button class="btn waves-effect" id="signupbtn" [disabled]="!signupForm.valid">
Sign Up
</button>
</form>
</div>
</div>
</div>

Related

How to show user all values selected after multi-step form

I am making a multistep form for a user to book a reservation. This form will let the user choose a few options at a time before submitting the form values to the database. I currently have the multistep form working through JS. I want to show all the values selected to the user one final time in the last ".input-group" Div labeled "Registration Confirm", and at this location they can submit the reservation after reviewing it is all correct. I am stuck on getting the final values to all show up in the last section however. I am aware the form is not done to be submitted to the database, I am trying to figure out how to show all the values before I go any further and do not mind if it is JS or Jquery.
I have tried saving the values to sessionStorage using this method for each option however it will not work. Dev tools is also telling me that no issues are arrising when I used this method so I am a bit stuck as nothing is showing up in the final div.
const destination = document.getElementById('result-destination').value;
sessionStorage.setItem("DESTINATION", destination);
const destinationChoice = sessionStorage.getItem('DESTINATION');
document.getElementById('choiceDestination').innerHTML = destinationChoice;
form.html
<form action="" class="registerForm" name="bookform">
<h1 id="registrationTitle">
Book Your Stay!
</h1>
<!-- Progress bar -->
<div class="progressbar">
<div class="progress" id="progress"></div>
<div class="progress-step progress-step-active" data-title="Room"></div>
<div class="progress-step" data-title="Contact"></div>
<div class="progress-step" data-title="Extras"></div>
<div class="progress-step" data-title="Confirm"></div>
</div>
<div class="form-step form-step-active">
<div class="input-group">
<select class="destination-choice select" id="result-destination" name="result-destination">
<option value="Choose Destination" disabled selected hidden>Choose Destination</option>
<option value="LasVegas">LasVegas</option>
<option value="Seattle">Seattle</option>
</select>
</div>
<div class="input-group">
<select class="room-choice select" id="result-room" name="result-room">
<option value="Choose Your Room" disabled selected hidden>Choose Your Room</option>
<option value="Double Full Beds">Double Full Beds</option>
<option value="Double Queen Beds">Double Queen Beds</option>
<option value="Queen Bed">Queen Bed</option>
<option value="King Bed">King Bed</option>
</select>
</div>
<div class="input-group">
<input type="date" id="result-checkin" />
<input type="date" id="result-checkout" />
</div>
<div class="">
<a class="btn btn-next width-50 ml-auto" >Next</a>
</div>
</div>
<div class="form-step">
<div class="input-group">
<label for="name">Name</label>
<input type="text" name="name" id="name" />
</div>
<div class="input-group">
<label for="phone">Phone</label>
<input type="text" name="phone" id="phone" />
</div>
<div class="input-group">
<label for="email">Email</label>
<input type="text" name="email" id="email" />
</div>
<div class="btns-group">
<a class="btn btn-prev">Previous</a>
<a class="btn btn-next" >Next</a>
</div>
</div>
<div class="form-step">
<div class="input-group">
<label for="guestNumber">Number Of Guests</label>
<select class="guestNumber select" id="guestNumber" name="guestNumber">
<option value="0" disabled selected hidden>How Many Guests Are There?</option>
<option value="1">1-2</option>
<option value="2">3-5</option>
</select>
</div>
<div class="input-group">
<label for="amenities">Amenities</label>
<input type="number" name="amenities" id="amenities" />
</div>
<div class="btns-group">
<a class="btn btn-prev">Previous</a>
<a class="btn btn-next" >Next</a>
</div>
</div>
<div class="form-step">
<div class="input-group">
<label for="confirmRegistration">Registration Confirm</label>
<p id="choiceDestination"></p>
<p id="choiceRoom"></p>
<p id="choiceCheckin"></p>
<p id="choiceCheckout"></p>
<p id="choiceName"></p>
<p id="choicePhone"></p>
<p id="choiceEmail"></p>
<p id="choiceGuests"></p>
<p id="choiceAmenities"></p>
</div>
<div class="btns-group">
<a class="btn btn-prev">Previous</a>
<input type="submit" value="Submit" class="btn" />
</div>
</div>
</form>
form.js
const prevBtns = document.querySelectorAll(".btn-prev");
const nextBtns = document.querySelectorAll(".btn-next");
const progress = document.getElementById("progress");
const formSteps = document.querySelectorAll(".form-step");
const progressSteps = document.querySelectorAll(".progress-step");
let formStepsNum = 0;
nextBtns.forEach((btn) => {
btn.addEventListener("click", () => {
formStepsNum++;
updateFormSteps();
updateProgressbar();
});
});
prevBtns.forEach((btn) => {
btn.addEventListener("click", () => {
formStepsNum--;
updateFormSteps();
updateProgressbar();
});
});
function updateFormSteps() {
formSteps.forEach((formStep) => {
formStep.classList.contains("form-step-active") &&
formStep.classList.remove("form-step-active");
});
formSteps[formStepsNum].classList.add("form-step-active");
}
function updateProgressbar() {
progressSteps.forEach((progressStep, idx) => {
if (idx < formStepsNum + 1) {
progressStep.classList.add("progress-step-active");
} else {
progressStep.classList.remove("progress-step-active");
}
});
const progressActive = document.querySelectorAll(".progress-step-active");
progress.style.width =
((progressActive.length - 1) / (progressSteps.length - 1)) * 100 + "%";
}
form.css
/* Progress Bar Start */
.progressbar {
position: relative;
display: flex;
justify-content: space-around;
counter-reset: step;
margin: 0.5rem 0rem 0.5rem;
width: 50%;
}
.progressbar::before,
.progress {
content: "";
position: absolute;
top: 50%;
transform: translateY(-50%);
height: 20px;
width: 100%;
background-color: #dcdcdc;
z-index: -1;
}
.progress {
background-color: var(--primary-color);
width: 0%;
transition: 0.3s;
}
.progress-step {
width: 2.5rem;
height: 2.5rem;
background-color: #dcdcdc;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.progress-step::before {
counter-increment: step;
content: counter(step);
}
.progress-step::after {
content: attr(data-title);
position: absolute;
top: calc(100% + 0.5rem);
font-size: 0.85rem;
color: #666;
}
.progress-step-active {
background-color: var(--highlight-yellow);
color: #f3f3f3;
}
/* Progress Bar End */
/* Form Start */
.form-step {
display: none;
transform-origin: top;
animation: animate .5s;
}
label {
color: var(--wei);
}
.form-step-active {
display: block;
}
.input-group {
margin: 2rem 0;
}
#keyframes animate {
from {
transform: scale(1, 0);
opacity: 0;
}
to {
transform: scale(1, 1);
opacity: 1;
}
}
/* Form End */
.registerForm {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
#registrationTitle {
margin-top: 10px;
font-size: var(--font-size-24);
display: flex;
align-items: center;
justify-content: center;
color: var(--highlight-yellow);
font-family: var(--font-family-ubuntu);
font-weight: 400;
}
/* Buttons Start */
.btns-group {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
.btn {
font-size: var(--font-size-20);
padding: 0.75rem;
display: block;
text-decoration: none;
background-color: var(--background-grey);
color: var(--background-blue);
text-align: center;
border-radius: 0.25rem;
border-color: var(--text-color);
border-style: solid;
cursor: pointer;
transition: 0.3s;
}
.btn:hover {
box-shadow: 0 0 0 2px var(--highlight-yellow), 0 0 0 2px var(--highlight-yellow);
border-color: var(--background-blue);
color: var(--background-blue);
-webkit-text-stroke: .5px var(--highlight-yellow);
}
/* Buttons End */
Any help is appreciated. Thank you!
Here you go :
HTML :
<form action="" class="registerForm" name="bookform">
<h1 id="registrationTitle">
Book Your Stay!
</h1>
<!-- Progress bar -->
<div class="progressbar">
<div class="progress" id="progress"></div>
<div class="progress-step progress-step-active" data-title="Room"></div>
<div class="progress-step" data-title="Contact"></div>
<div class="progress-step" data-title="Extras"></div>
<div class="progress-step" data-title="Confirm"></div>
</div>
<div class="form-step form-step-active">
<div class="input-group">
<select class="user_change destination-choice select" data-name="choiceDestination" id="result-destination" name="result-destination">
<option value="Choose Destination" disabled selected hidden>Choose Destination</option>
<option value="LasVegas">LasVegas</option>
<option value="Seattle">Seattle</option>
</select>
</div>
<div class="input-group">
<select class="user_change room-choice select" data-name="choiceRoom" id="result-room" name="result-room">
<option value="Choose Your Room" disabled selected hidden>Choose Your Room</option>
<option value="Double Full Beds">Double Full Beds</option>
<option value="Double Queen Beds">Double Queen Beds</option>
<option value="Queen Bed">Queen Bed</option>
<option value="King Bed">King Bed</option>
</select>
</div>
<div class="input-group">
<input type="date" class="user_change" data-name="choiceCheckin" id="result-checkin" />
<input type="date" class="user_change" data-name="choiceCheckout" id="result-checkout" />
</div>
<div class="">
<a class="btn btn-next width-50 ml-auto" >Next</a>
</div>
</div>
<div class="form-step">
<div class="input-group">
<label for="name">Name</label>
<input type="text" class="user_change" data-name="choiceName" name="name" id="name" />
</div>
<div class="input-group">
<label for="phone">Phone</label>
<input type="text" class="user_change" data-name="choicePhone" name="phone" id="phone" />
</div>
<div class="input-group">
<label for="email">Email</label>
<input type="text" class="user_change" data-name="choiceEmail" name="email" id="email" />
</div>
<div class="btns-group">
<a class="btn btn-prev">Previous</a>
<a class="btn btn-next" >Next</a>
</div>
</div>
<div class="form-step">
<div class="input-group">
<label for="guestNumber">Number Of Guests</label>
<select class="user_change guestNumber select" id="guestNumber" data-name="choiceGuests" name="guestNumber">
<option value="0" disabled selected hidden>How Many Guests Are There?</option>
<option value="1">1-2</option>
<option value="2">3-5</option>
</select>
</div>
<div class="input-group">
<label for="amenities">Amenities</label>
<input type="number" class="user_change" data-name="choiceAmenities" name="amenities" id="amenities" />
</div>
<div class="btns-group">
<a class="btn btn-prev">Previous</a>
<a class="btn btn-next" >Next</a>
</div>
</div>
<div class="form-step">
<div class="input-group">
<label for="confirmRegistration">Registration Confirm</label>
<p id="choiceDestination"></p>
<p id="choiceRoom"></p>
<p id="choiceCheckin"></p>
<p id="choiceCheckout"></p>
<p id="choiceName"></p>
<p id="choicePhone"></p>
<p id="choiceEmail"></p>
<p id="choiceGuests"></p>
<p id="choiceAmenities"></p>
</div>
<div class="btns-group">
<a class="btn btn-prev">Previous</a>
<input type="submit" value="Submit" class="btn" />
</div>
</div>
</form>
Additional JS to Your JS :
// My Stuff
// Create an Empty Object
var the_data_obj = {};
// On change of input elements to update the object
$(".user_change").change(function(){
var changed_field = $(this).attr("data-name");
var changed_field_val = $(this).val();
the_data_obj[changed_field] = changed_field_val;
// Finally view the added stuff
$("#"+changed_field).text(changed_field_val);
console.log(the_data_obj);
});
What did i do..?
Added a new class user_change to every input you have there..
Added a new data attribute data-name to every input you have there..
Created a new Object.
On change of every input by user parsing the input field key by data-name and input field value by parsed data atrr.
Updated the same in new created Obj.
Printing the same value in the final div.
Here's the working JSFiddle for the same :
Ping me if you come across any issue.

Function changing id only once. [Javascript]

What I am trying to do: I am adding new entries whenever I submit a form and that entry should have an animation (fadeIn effect). I am adding new entries whenever I submit a form. Every entry is being added using javascript template literal in which I am adding using divisions with classes and ids. Every entry has an Id and when I use that ID to add animation, all entries get the animation as they have same ids (I know IDs should not be same that is why I am trying to change it).
What I am trying to do: I am trying to change ID of previously added entry or div.
Program is changing ID only once.
My javascript code:
var enrolledStudents = [];
let form = document.getElementById("student-enrollment-form");
const getStudentDetails = (event) => {
event.preventDefault();
// This is the important part, test if form is valid
if (form.checkValidity() === false){
// This is the magic function that displays the validation errors to the user
form.reportValidity();
return;
}
var skillsList = [];
var name = document.getElementById("name-input").value;
var email = document.getElementById("email-input").value;
var website = document.getElementById("website-input").value;
var imgLink = document.getElementById("imglink-input").value;
var gender = document.querySelector('input[name="genderRadio"]:checked').value;
var skills = document.querySelectorAll('input[type="checkbox"]');
skills.forEach(item => {
if (item.checked){
skillsList.push(item.value);
}
})
var student = {
'name': name,
'email': email,
'website': website,
'imageLink' : imgLink,
'gender': gender,
'skills': skillsList,
}
enrolledStudents.push(student)
console.log(enrolledStudents);
const studentList = document.getElementById('student-list');
studentList.innerHTML = `${
enrolledStudents.map(student => {
var passport = student.imgLink;
return `
<div class="row" id="student-id-details" style="border: 2px solid black; border-top: none; height: 120px;">
<div class="col" style="padding-top: 10px; padding-bottom: 5px; height: 100px;">
<h6 class="card-title">${student.name}</h6>
<p class="card-text">${student.gender}<br />${student.email}<br />${student.website}<br />${student.skills}</p>
</div>
</div>
`;
}).join("")
}`
const studentImages = document.getElementById("student-images");
console.log(enrolledStudents)
studentImages.innerHTML = `${
enrolledStudents.map(student => {
return `
<div class="row" id="student-id-image" style="border: 2px solid black; border-top: none; border-left: none; height: 120px">
<div class="col" style="padding-top: 10px; padding-bottom: 6px; height: 120px; align-items: centre;">
<img src=${student.imageLink}></img>
</div>
</div>
`
}).join("")
}`
setTimeout(changeIds, 3000);
}
const changeIds = () => {
var oldId = document.getElementById("student-id-details");
oldId.id = "no-animation";
console.log(document.querySelectorAll("#student-id-details"));
console.log(document.querySelectorAll("#no-animation"));
}
I cannot use any library or framework for doing this task.
In changeIds function, I am changing the ID. When I keep adding new entries there is only 1 node in no-animation NodeList (the first entry) and after that no ID change is taking effect.
What can be the problem here?
My html code for reference -
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Student Enrollment</title>
<link href="style.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<nav class="navbar text-center" style="background-color: #59CE8F;">
<div class="container-fluid text-center">
<span class="navbar-brand mb-0 h1 text-center" style="color: white;">Student Enrollment Form</span>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col" style="height: 35px;"></div>
</div>
<div class="row">
<div class="col" style="border-right: 3px solid #59CE8F;">
<form id="student-enrollment-form">
<div class="row mb-3">
<label for="name-input" class="col-sm-2 col-form-label">Name</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="name-input"/>
</div>
</div>
<div class="row mb-3">
<label for="email-input" class="col-sm-2 col-form-label">E-Mail</label>
<div class="col-sm-5">
<input type="email" class="form-control" id="email-input" required/>
</div>
</div>
<div class="row mb-3">
<label for="website-input" class="col-sm-2 col-form-label">Website</label>
<div class="col-sm-5">
<input type="url" class="form-control" id="website-input" required/>
</div>
</div>
<div class="row mb-3">
<label for="imglink-input" class="col-sm-2 col-form-label">Img Link</label>
<div class="col-sm-5">
<input type="url" class="form-control" id="imglink-input" required/>
</div>
</div>
<fieldset class="row mb-3">
<legend class="col-form-label col-sm-2 pt-0">Gender</legend>
<div class="col-sm-10">
<div class="form-check">
<input class="form-check-input" type="radio" name="genderRadio" id="gridRadios1" value="male" id="male-input" checked>
<label class="form-check-label" for="gridRadios1">
Male
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="genderRadio" id="gridRadios2" value="female" id="female-input">
<label class="form-check-label" for="gridRadios2">
Female
</label>
</div>
</div>
</fieldset>
<div class="row mb-3">
<label for="skills" class="col-sm-2 col-form-control">Skills</label>
<div class="col-sm-2">
<input class="form-check-input" type="checkbox" id="java-gridCheck" value="Java">
<label class="form-check-label" for="gridCheck">
JAVA
</label>
</div>
<div class="col-sm-2">
<input class="form-check-input" type="checkbox" id="html-gridCheck" value="HTML">
<label class="form-check-label" for="gridCheck">
HTML
</label>
</div>
<div class="col-sm-2">
<input class="form-check-input" type="checkbox" id="css-gridCheck" value="CSS">
<label class="form-check-label" for="gridCheck">
CSS
</label>
</div>
</div>
<div class="row mb-3">
<div class="col-4">
<button type="button" class="btn btn-primary" onclick="getStudentDetails(event)">Enroll Student</button>
</div>
<div class="col-2" style="margin-left: -30px;">
<button type="clear" class="btn btn-danger">Clear</button>
</div>
</div>
</div>
</form>
<div class="col" id="student-ids">
<h3 id="right-col-header">Enrolled Students</h3>
<div class="row mb-4"></div>
<div class="row">
<div class="col-2"></div>
<div class="col-5" style="text-align: left;">
<div class="row" style="border: 2px solid black;">
<div class="col">
Description
</div>
</div>
<div class="student-list-division" id="student-list">
</div>
</div>
<div class="col-3" style="align-items: centre;">
<div class="row" style="border: 2px solid black; border-left: none;">
<div class="col">
Image
</div>
</div>
<div class="student-list-images" id="student-images">
</div>
</div>
<div class="col-2"></div>
</div>
</div>
</div>
</div>
<script src="script_js.js"></script>
</body>
</html>
My css code for animation -
#right-col-header{
text-align: center;
}
ul{
padding-left: 0;
list-style-type: none;
}
p{
font-size: 13px;
}
img{
height: 6em;
width: 6em;
}
#student-ids{
height: 90%;
overflow-x: auto;
}
#student-id-image{
animation: fadeIn 2s;
-webkit-animation: fadeIn 2s;
}
#keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
#student-id-details{
animation: fadeIn 2s;
-webkit-animation: fadeIn 2s;
}
I would appreciate different solutions for achieving animations in new entries only too.
You have to apply fade-in-animation class to new entry, current logic apply animation class to all list.
I just update your code with minor changes, i hope it'll help you out. Thank You
var enrolledStudents = [];
let form = document.getElementById("student-enrollment-form");
const getStudentDetails = (event) => {
event.preventDefault();
// This is the important part, test if form is valid
if (form.checkValidity() === false){
// This is the magic function that displays the validation errors to the user
form.reportValidity();
return;
}
var skillsList = [];
var name = document.getElementById("name-input").value;
var email = document.getElementById("email-input").value;
var website = document.getElementById("website-input").value;
var imgLink = document.getElementById("imglink-input").value;
var gender = document.querySelector('input[name="genderRadio"]:checked').value;
var skills = document.querySelectorAll('input[type="checkbox"]');
skills.forEach(item => {
if (item.checked){
skillsList.push(item.value);
}
})
var student = {
'name': name,
'email': email,
'website': website,
'imageLink' : imgLink,
'gender': gender,
'skills': skillsList,
}
enrolledStudents.push(student)
console.log(enrolledStudents);
const studentList = document.getElementById('student-list');
studentList.innerHTML = `${
enrolledStudents.map((student, index) => {
var passport = student.imgLink;
return `
<div class="row ${enrolledStudents.length === (index + 1) ? 'fade-in-animation' : ''}" style="border: 2px solid black; border-top: none; height: 120px;">
<div class="col" style="padding-top: 10px; padding-bottom: 5px; height: 100px;">
<h6 class="card-title">${student.name}</h6>
<p class="card-text">${student.gender}<br />${student.email}<br />${student.website}<br />${student.skills} ${index}</p>
</div>
</div>
`;
}).join("")
}`
const studentImages = document.getElementById("student-images");
console.log(enrolledStudents)
studentImages.innerHTML = `${
enrolledStudents.map((student, index) => {
return `
<div class="row ${enrolledStudents.length === (index + 1) ? 'fade-in-animation' : ''}" style="border: 2px solid black; border-top: none; border-left: none; height: 120px">
<div class="col" style="padding-top: 10px; padding-bottom: 6px; height: 120px; align-items: centre;">
<img src=${student.imageLink}></img>
</div>
</div>
`
}).join("")
}`
}
#right-col-header{
text-align: center;
}
ul{
padding-left: 0;
list-style-type: none;
}
p{
font-size: 13px;
}
img{
height: 6em;
width: 6em;
}
#student-ids{
height: 90%;
overflow-x: auto;
}
#keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
.fade-in-animation{
animation: fadeIn 2s;
-webkit-animation: fadeIn 2s;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Student Enrollment</title>
<link href="style.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<nav class="navbar text-center" style="background-color: #59CE8F;">
<div class="container-fluid text-center">
<span class="navbar-brand mb-0 h1 text-center" style="color: white;">Student Enrollment Form</span>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col" style="height: 35px;"></div>
</div>
<div class="row">
<div class="col" style="border-right: 3px solid #59CE8F;">
<form id="student-enrollment-form">
<div class="row mb-3">
<label for="name-input" class="col-sm-2 col-form-label">Name</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="name-input"/>
</div>
</div>
<div class="row mb-3">
<label for="email-input" class="col-sm-2 col-form-label">E-Mail</label>
<div class="col-sm-5">
<input type="email" class="form-control" id="email-input" required/>
</div>
</div>
<div class="row mb-3">
<label for="website-input" class="col-sm-2 col-form-label">Website</label>
<div class="col-sm-5">
<input type="url" class="form-control" id="website-input" required/>
</div>
</div>
<div class="row mb-3">
<label for="imglink-input" class="col-sm-2 col-form-label">Img Link</label>
<div class="col-sm-5">
<input type="url" class="form-control" id="imglink-input" required/>
</div>
</div>
<fieldset class="row mb-3">
<legend class="col-form-label col-sm-2 pt-0">Gender</legend>
<div class="col-sm-10">
<div class="form-check">
<input class="form-check-input" type="radio" name="genderRadio" id="gridRadios1" value="male" id="male-input" checked>
<label class="form-check-label" for="gridRadios1">
Male
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="genderRadio" id="gridRadios2" value="female" id="female-input">
<label class="form-check-label" for="gridRadios2">
Female
</label>
</div>
</div>
</fieldset>
<div class="row mb-3">
<label for="skills" class="col-sm-2 col-form-control">Skills</label>
<div class="col-sm-2">
<input class="form-check-input" type="checkbox" id="java-gridCheck" value="Java">
<label class="form-check-label" for="gridCheck">
JAVA
</label>
</div>
<div class="col-sm-2">
<input class="form-check-input" type="checkbox" id="html-gridCheck" value="HTML">
<label class="form-check-label" for="gridCheck">
HTML
</label>
</div>
<div class="col-sm-2">
<input class="form-check-input" type="checkbox" id="css-gridCheck" value="CSS">
<label class="form-check-label" for="gridCheck">
CSS
</label>
</div>
</div>
<div class="row mb-3">
<div class="col-4">
<button type="button" class="btn btn-primary" onclick="getStudentDetails(event)">Enroll Student</button>
</div>
<div class="col-2" style="margin-left: -30px;">
<button type="clear" class="btn btn-danger">Clear</button>
</div>
</div>
</div>
</form>
<div class="col" id="student-ids">
<h3 id="right-col-header">Enrolled Students</h3>
<div class="row mb-4"></div>
<div class="row">
<div class="col-2"></div>
<div class="col-5" style="text-align: left;">
<div class="row" style="border: 2px solid black;">
<div class="col">
Description
</div>
</div>
<div class="student-list-division" id="student-list">
</div>
</div>
<div class="col-3" style="align-items: centre;">
<div class="row" style="border: 2px solid black; border-left: none;">
<div class="col">
Image
</div>
</div>
<div class="student-list-images" id="student-images">
</div>
</div>
<div class="col-2"></div>
</div>
</div>
</div>
</div>
</body>
</html>

How to enable invisible ReCAPTCHA on checkbox onclick

I am struggling with an recaptcha issue on my local. I am trying to build a register form. All examples about recaptcha are about buttons. What I want is to pop-up recaptcha modal to user when he/she clicks on checkbox which says ' I have read and accept terms and conditions.' When he/she solves recaptcha then checkbox would be checked. Here what I am trying
It did not work, after that I tried this onClick method did not work because it writes Script Error on console.
<html>
<head>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<script>
function controlFunction() {
grecaptcha.render()
}
</script>
</head>
<body>
<div id='checkbox-form' action="?" method="POST">
<input onclick="controlFunction()" type="checkbox" class="g-recaptcha" data-sitekey="MY_LOCAL_KEY" data-callback='onClick' id="termsConditions" class="termsOkay">
<label for="termsConditions" generated="true">I have read and accepted <a target="_blank" href="/sales-terms-and-conditions/">Terms and Conditions</a> </label>
<br/>
</div>
</body>
</html>
I know code is a mess because I tried so many different thing and this is what I got. I am really confused. All I want is if user checks the checkbox let captcha popup. When solved, checkbox is checked. How can I do it? I tried to use handleChange but could not make it either.
Here is my whole code:
<?php
// Google reCaptcha secret key
$secretKey = "REMOVEDCONTENTBYME";
$statusMsg = '';
if(isset($_POST['submit'])){
if(isset($_POST['captcha-response']) && !empty($_POST['captcha-response'])){
// Get verify response data
$verifyResponse = file_get_contents('https://www.google.com/recaptcha/api/siteverify?secret='.$secretKey.'&response='.$_POST['captcha-response']);
$responseData = json_decode($verifyResponse);
if($responseData->success){
//Contact form submission code goes here ...
$statusMsg = 'Your contact request have submitted successfully.';
}else{
$statusMsg = 'Robot verification failed, please try again.';
}
}else{
$statusMsg = 'Robot verification failed, please try again.';
}
}
?>
<?php $businessTypes = [
'Full Service',
'Quick Service',
'Bars and Clubs',
]; ?>
<!doctype html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="https://gmpg.org/xfn/11">
<link rel="stylesheet" href="https://use.typekit.net/fom8rbw.css">
<link rel="stylesheet" href="/wp-content/themes/thegem/css/main.css">
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback" async defer></script>
<script>
var onloadCallback = function() {
grecaptcha.execute();
};
function setResponse(response) {
document.getElementById('captcha-response').value = response;
}
</script>
<?php wp_head(); ?>
<style>
html, body, .site-content {
padding: 0 !important;
margin: 0 !important;
background-color:#fff;
}
.textwidget a {
font-family: 'proxima-nova',sans-serif !important;
}
.d-none {
display: none !important;
}
.section{
background-color: #ffffff;
}
.demo-form input, .demo-form select, .demo-form textarea {
border: 1px solid #e31d93;
}
.demo-form input {
text-indent: 12px;
}
.form-control {
display: block;
width: 100%;
height: calc(1.5em + 1.3rem + 2px);
font-size: 1.6rem;
font-weight: 400;
line-height: 1.5;
color: #495057;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
border-radius: .40rem;
}
.row-m-t{
margin-top : 0px
}
</style>
<div id="page" class="site">
<div id="content" class="site-content">
<div id="primary" class="content-area demo-form">
<main id="main" class="site-main">
<div class="section blog-content">
<div class="container">
<div class="text-center"><h1 style="padding-bottom: 10rem;">Request FOrm</h1></div>
<div class="row justify-content-md-center">
<div class="col-md-6">
<form class="demo-form" method="post" onsubmit="return false" style=" position: relative; bottom: 35px; ">
<div class="row">
<div class="col-md-6 border-danger form-group">
<input type="text" class="form-control validate" data-validate="validateText" name="firstName" placeholder="First name" style=" background-color: #fff;">
</div>
<div class="col-md-6 form-group">
<input type="text" class="form-control validate" data-validate="validateText" name="lastName" placeholder="Last name"style=" background-color: #fff;">
</div>
</div>
<div class="row row-m-t">
<div class="col-md-6 form-group">
<input type="text" class="form-control validate" data-validate="validateText" name="companyName" placeholder="Group name"style=" background-color: #fff;">
</div>
<div class="col-md-6 form-group">
<input type="text" class="form-control validate" data-validate="validatePhone" name="phoneNumber" placeholder="Phone number"style=" background-color: #fff;">
</div>
</div>
<div class="row row-m-t">
<div class="col-md-12 form-group">
<input type="text" class="form-control validate" data-validate="validateEmail" name="emailAddress" placeholder="email"style=" background-color: #fff;">
</div>
</div>
<div class="row row-m-t">
<div class="col-md-12 form-group">
<select name="businessType" id="businessType" class="form-control validate" data-validate="validateText">
<option value=""><?php _e('Select Your Business Type...', 'myfirm'); ?></option>
<?php foreach ($businessTypes as $type): ?>
<option><?php _e($type, 'myfirm'); ?></option>
<?php endforeach ;?>
</select>
</div>
</div>
<div class="row radio">
<div class="col-md-6">
<p style="font-size:13px;"><?php _e('Validate by', 'myfirm'); ?>:</p>
</div>
</div>
<div class="row radio" style="font-size:13px;">
<div class="col-md-8">
<div class="custom-control custom-radio custom-control-inline col-md-6">
<input type="radio" id="validateByPhone" checked value="phoneNumber" name="validateBy" class="custom-control-input">
<label style="font-size:12px; transform: scale(1.2);
position: relative;
left: 1rem;" class="custom-control-label" for="validateByPhone"><?php _e('Phone Number', 'myfirm'); ?></label>
</div>
<div class="custom-control custom-radio custom-control-inline col-md-6">
<input type="radio" id="validateByEmailAddess" value="emailAddress" name="validateBy" class="custom-control-input">
<label style="font-size:12px; transform: scale(1.2);
position: relative;
left: 1rem; top:5px;" class="custom-control-label" for="validateByEmailAddess"><?php _e('Email Address', 'myfirm'); ?></label>
</div>
</div>
</div>
<br>
<div class="row radio">
<div class="col-md-12" style="position: relative;right: 13px;">
<div class="custom-radio custom-control-inline col-md-12">
<div class="g-recaptcha" data-sitekey="REMOVEDCONTENTBYME" data-badge="inline" data-size="invisible" data-callback="setResponse"></div>
<input type="hidden" id="captcha-response" name="captcha-response" />
<input type="checkbox" id="captcha-response" class="termsOkay" style=" background-color: #fff;">
<label for="captcha-response" class="error" generated="true" style="position: relative;bottom: 5px;"> I have read and accepted <a target="_blank" href="/sales-terms-and-conditions/">Terms and Conditions</a> </label>
</div>
</div>
</div>
<div class="verification-code d-none">
<div class="col">
<label for="verification-code"><?php _e('A verification code has been sent to your phone number!', 'myfirm') ?></label>
<input type="text" class="form-control" name="code" placeholder="<?php _e('Verification code', 'myfirm');?>">
</div>
</div>
<div class="row row-m-t">
<div class="col">
<button class="btn btn-myfirm send-verification-code" disabled="disabled" style="width: 100% !important;height: 125% !important;font-size: 15px;"><?php _e('Request a Demo', 'myfirm'); ?></button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</main>
</div>
</main>
</div>
</div>
</div>
</body>
<script>
function admSelectCheck(obj)
{
var nameSelect = obj.value;
console.log(nameSelect);
if(nameSelect){
admOptionValue = 'United States of America|+1';
if(admOptionValue == nameSelect){
document.getElementById("admDivCheck").style.display = "block";
}
else{
document.getElementById("admDivCheck").style.display = "none";
}
}
else{
document.getElementById("admDivCheck").style.display = "block";
}
}
</script>
<script>
jQuery(function() {
jQuery('input.termsOkay').change(function() {
if (!jQuery('input.termsOkay').is(':checked')) {
jQuery('.send-verification-code').prop('disabled', true)
} else{
jQuery('.send-verification-code').prop('disabled', false)
}
})
})
</script>
</html>
The part I am trying to make it work
<div class="row radio">
<div class="col-md-12" style="position: relative;right: 13px;">
<div class="custom-radio custom-control-inline col-md-12">
<div class="g-recaptcha" data-sitekey="REMOVEDCONTENTBYME" data-badge="inline" data-size="invisible" data-callback="setResponse"></div>
<input type="hidden" id="captcha-response" name="captcha-response" />
<input type="checkbox" id="captcha-response" class="termsOkay" style=" background-color: #fff;">
<label for="captcha-response" class="error" generated="true" style="position: relative;bottom: 5px;"> I have read and accepted <a target="_blank" href="/sales-terms-and-conditions/">Terms and Conditions</a> </label>
</div>
</div>
</div>

jQuery clone() is appending to multiple elements instead of just one

I want to make clonable form fields that get wrapped in to the div. I am able to clone the element but the problem is if I have multiple groups of similar fields, it is adding fields to all other groups regardless instead of only to the group for the button I clicked.
How can I clone fields only for the current $(this) element and not for others?
let cloneInput = $('.clonedInput');
let btnAdd = $('.btnAdd');
let btnDel = $('.btnDel');
btnAdd.on('click', function(event) {
$(this).parent().siblings('.gs-customer-form-group').children().last().clone().appendTo('.gs-customer-form-group');
});
.gs-customer-field-box {
background-color: #fff;
width: 300px;
margin: auto;
font-family: sans-serif
}
.gs-customer-btn-group {
margin: 20px 0;
display: flex;
justify-content: space-between;
}
.btnDel {
color: red;
cursor: pointer;
}
.btnAdd {
color: green;
cursor: pointer;
}
.active {
background-color: yellow;
padding: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="gs-customer-field-box product-singular">
<h6>Add Customer Details</h6>
<div class="gs-customer-form-group" id="gs-customer-form-group">
<div id="entry1" class="clonedInput gs-customer-fields">
<input class="gs-field customer-name" type="text" name="name[]" placeholder="Name">
<input class="gs-field customer-email" type="email" name="email[]" placeholder="Email">
</div>
</div>
<div class="gs-customer-btn-group">
<span class="gs-customer-delete btnDel" id="btnDel1" disabled="disabled">delete</span>
<span class="gs-customer-add btnAdd" id="btnAdd1">add</span>
</div>
</div>
<hr/>
<div class="gs-customer-field-box product-singular">
<h6>Add Customer Details</h6>
<div class="gs-customer-form-group" id="gs-customer-form-group">
<div id="entry2" class="clonedInput gs-customer-fields">
<input class="gs-field customer-name" type="text" name="name[]" placeholder="Name">
<input class="gs-field customer-email" type="email" name="email[]" placeholder="Email">
</div>
</div>
<div class="gs-customer-btn-group">
<span class="gs-customer-delete btnDel" id="btnDel2" disabled="disabled">delete</span>
<span class="gs-customer-add btnAdd" id="btnAdd2">add</span>
</div>
</div>
The issue is due to the .appendTo('.gs-customer-form-group') call. This appends the cloned content in to every .gs-customer-form-group element. You need to only append to the one related to the clicked span. You already have a reference to that element from siblings(), so you can put it in a variable for use later:
let cloneInput = $('.clonedInput');
let btnAdd = $('.btnAdd');
let btnDel = $('.btnDel');
btnAdd.on('click', function(event) {
let $group = $(this).parent().siblings('.gs-customer-form-group');
$group.children().last().clone().appendTo($group);
});
.gs-customer-field-box {
background-color: #fff;
width: 300px;
margin: auto;
font-family: sans-serif
}
.gs-customer-btn-group {
margin: 20px 0;
display: flex;
justify-content: space-between;
}
.btnDel {
color: red;
cursor: pointer;
}
.btnAdd {
color: green;
cursor: pointer;
}
.active {
background-color: yellow;
padding: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="gs-customer-field-box product-singular">
<h6>Add Customer Details</h6>
<div class="gs-customer-form-group" id="gs-customer-form-group">
<div id="entry1" class="clonedInput gs-customer-fields">
<input class="gs-field customer-name" type="text" name="name[]" placeholder="Name">
<input class="gs-field customer-email" type="email" name="email[]" placeholder="Email">
</div>
</div>
<div class="gs-customer-btn-group">
<span class="gs-customer-delete btnDel" id="btnDel1" disabled="disabled">delete</span>
<span class="gs-customer-add btnAdd" id="btnAdd1">add</span>
</div>
</div>
<hr/>
<div class="gs-customer-field-box product-singular">
<h6>Add Customer Details</h6>
<div class="gs-customer-form-group" id="gs-customer-form-group">
<div id="entry2" class="clonedInput gs-customer-fields">
<input class="gs-field customer-name" type="text" name="name[]" placeholder="Name">
<input class="gs-field customer-email" type="email" name="email[]" placeholder="Email">
</div>
</div>
<div class="gs-customer-btn-group">
<span class="gs-customer-delete btnDel" id="btnDel2" disabled="disabled">delete</span>
<span class="gs-customer-add btnAdd" id="btnAdd2">add</span>
</div>
</div>
You can do it like this:
let cloneInput = $('.clonedInput');
let btnAdd = $('.btnAdd');
let btnDel = $('.btnDel');
btnAdd.on('click', function(event){
$(this).parent().siblings('.gs-customer-form-group').children().last().clone().appendTo($(this).parent().siblings('.gs-customer-form-group'));
});
.gs-customer-field-box{
background-color: #fff;
width: 300px;
margin: auto;
font-family: sans-serif
}
.gs-customer-btn-group{
margin: 20px 0;
display: flex;
justify-content: space-between;
}
.btnDel{
color: red;
cursor: pointer;
}
.btnAdd{
color: green;
cursor: pointer;
}
.active{
background-color: yellow;
padding: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="gs-customer-field-box product-singular">
<h6>Add Customer Details</h6>
<div class="gs-customer-form-group" id="gs-customer-form-group">
<div id="entry1" class="clonedInput gs-customer-fields">
<input class="gs-field customer-name" type="text" name="name[]" placeholder="Name">
<input class="gs-field customer-email" type="email" name="email[]" placeholder="Email">
</div>
</div>
<div class="gs-customer-btn-group">
<span class="gs-customer-delete btnDel" id="btnDel1" disabled="disabled">delete</span>
<span class="gs-customer-add btnAdd" id="btnAdd1">add</span>
</div>
</div>
<hr />
<div class="gs-customer-field-box product-singular">
<h6>Add Customer Details</h6>
<div class="gs-customer-form-group" id="gs-customer-form-group">
<div id="entry2" class="clonedInput gs-customer-fields">
<input class="gs-field customer-name" type="text" name="name[]" placeholder="Name">
<input class="gs-field customer-email" type="email" name="email[]" placeholder="Email">
</div>
</div>
<div class="gs-customer-btn-group">
<span class="gs-customer-delete btnDel" id="btnDel2" disabled="disabled">delete</span>
<span class="gs-customer-add btnAdd" id="btnAdd2">add</span>
</div>
</div>

Overlay in sidebar but only for one section?

right now I am having a problem. I have created a calculater by myself. Check it out here: https://radlvoo.de/typ/mtb-fully/ (Last element in the sidebar).
If you select some values and click on the button, the overlay shows up but wrong.. the overlay is going over all the sidebar content. But I just want to have to overlay over the last element, the calculator. How can I do this?
This is my form code so far:
<form class="filterform" id="sidebarRahmenhoehenrechner">
<div class="form-group"><label class="control-label">FAHRRADTYP</label>
<select id="fahrradtypHöhenrechner" class="form-control" name="typ">
<option value="">Bitte wählen…</option>
<option value="trekkingrad">TREKKINGRAD</option>
<option value="cityrad">CITYRAD</option>
<option value="mountainbike hardtail">MOUNTAINBIKE HARDTAIL</option>
<option value="mointainbike fully">MOUNTAINBIKE FULLY</option>
<option value="crossrad">CROSSRAD</option>
<option value="rennrad">RENNRAD</option>
</select>
<div class="clearfix"></div>
</div>
<div class="form-group"><label class="control-label">GESCHLECHT</label>
<select id="geschlechtHöhenrechner" class="form-control" name="geschlecht">
<option value="">Bitte wählen…</option>
<option value="damen">DAMEN</option>
<option value="herren">HERREN</option>
</select>
<div class="clearfix"></div>
</div>
<div class="form-group"><label class="control-label">FAHRSTYLE</label>
<input name="fahrstyle" type="radio" value="sportlich" /> Sportlich orientiert
<input name="fahrstyle" type="radio" value="touren" /> Touren orientiert
<div class="clearfix"></div>
</div>
<div class="form-group"><label class="control-label">SCHRITTHÖHE</label>
<input id="schritthöheInput" min="0" name="schritthöhe" type="number" />
<div class="clearfix"></div>
</div>
<div class="form-group form-group-block" style="margin-top: 20px;"><button id="rahmenhöhenRechnerButton" onclick="rahmenhöhenRechnerMain();" type="button">Rahmenhöhe berechnen</button></div>
<div class="clearfix"></div>
<div id="rahmenhöhenRechnerOverlay" style="position: absolute; display: none; z-index: 500; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.75); overflow: auto;"><div onclick="disableOverlay();" id="closeButtonOverlay">✖</div><div><p id="rahmenhöheAnzeigen"></p></div></div>
<div></div>
</div>
</form>
And this is the overlay code doing:
function disableOverlay(){
document.getElementById("rahmenhöhenRechnerOverlay").style.display = "none";
}
function enableOverlay(){
document.getElementById("rahmenhöhenRechnerOverlay").style.display = "block";
}
Kind regards

Categories