We Keep Coding

How would I toggle an object property between true and false?

let myLibrary = [
{
id: 0,
title: "The Once and Future King",
author: "White",
pages: 654,
read: false,
},
{
id: 1,
title: "The Hobbit",
author: "Tolkien",
pages: 304,
read: false,
},
];
const bookContent = document.getElementById("content");
function displayBook(book) {
const addBook = document.createElement("div");
addBook.className = "book";
addBook.id = book.id;
bookContent.appendChild(addBook);
addBook.innerHTML = `
<div class="title">
<p class="bookTitle">
<span>${book.title}</span>
</p>
</div>
<div class="body">
<p>
Author: <span>${book.author}</span>
</p>
<p>
Pages: <span>${book.pages}</span>
</p>
</div>
<div class="read">
<label class="switch" data-book="0">
<input type="checkbox" />
<span class="slider round"></span>
</label>
</div>
<div class="delete">
<button class="delete-btn">DELETE</button>
</div>`;
}
// Display your original object list
myLibrary.forEach((book) => {
displayBook(book);
});
// Handle your object creation
const form = document.getElementById("form");
form.addEventListener("submit", updateLibrary);
function updateLibrary(event) {
// Need this so it doesn't refresh page
event.preventDefault();
const title = document.getElementById("title").value;
const author = document.getElementById("author").value;
const pages = document.getElementById("pages").value;
const book = {
title: title,
author: author,
pages: parseInt(pages),
read: false,
};
// Adds object to array
myLibrary.push(book);
// Displays new book
displayBook(book);
// Reset form
resetForm();
// Close form
document.getElementById("addBookForm").style.display = "none";
console.log(myLibrary);
}
// Resets the form so user can input another book
function resetForm() {
document.getElementById("form").reset();
}
// The form is automatically set to hidden. This loads it up for the user
const openForm = function () {
document.getElementById("addBookForm").style.display = "block";
document.getElementById("title").focus();
};
// Sets the form display back to none
const closeForm = () =>
(document.getElementById("addBookForm").style.display = "none");
/* .main {
} */
.header {
display: flex;
flex-direction: column;
background-color: #c689c6;
height: 150px;
border: 1px solid #3b133b;
}
.btn {
margin: 0 auto;
margin-top: 55px;
display: block;
text-align: center;
background-color: #4649ff;
padding: 0.75rem 1.25rem;
border-radius: 10rem;
color: #fff;
cursor: pointer;
font-size: 1rem;
letter-spacing: 0.15rem;
transition: all 0.3s;
}
.btn:hover {
background-color: #3134fa;
}
.content {
display: flex;
flex-flow: row wrap;
align-content: flex-start;
justify-content: flex-start;
background-color: #fffdfa;
height: auto;
}
.book {
border: 2px solid #ffa94d;
background-color: #ffd8a8;
color: #d9480f;
width: 280px;
height: 365px;
margin: 10px;
}
.title {
border-bottom: 2px solid #ffa94d;
}
.title p {
display: flex;
align-items: center;
text-align: center;
justify-content: center;
font-size: larger;
}
.title span {
color: #3c4048;
}
.body {
border: 1px solid transparent;
height: 200px;
background-color: #fff4e6;
}
.body p {
padding-left: 20px;
}
p span {
color: #3c4048;
}
.read {
display: flex;
align-items: center;
justify-content: center;
height: 50px;
border-top: 2px solid #ffa94d;
text-align: center;
}
/* The switch - the box around the slider */
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
/* Hide default HTML checkbox */
.switch input {
opacity: 0;
width: 0;
height: 0;
}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: 0.4s;
transition: 0.4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: 0.4s;
transition: 0.4s;
}
input:checked + .slider {
background-color: #3d8361;
}
input:focus + .slider {
box-shadow: 0 0 1px #3d8361;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
.delete {
height: 50px;
border-top: 2px solid #ffa94d;
}
.delete-btn {
margin: 0 auto;
margin-top: 8px;
display: block;
text-align: center;
background-color: #e94560;
padding: 0.5rem 0.75rem;
border-radius: 10rem;
color: #fff;
cursor: pointer;
letter-spacing: 0.15rem;
transition: all 0.3s;
}
.delete-btn:hover {
background-color: #e7082d;
}
.close-btn {
color: #e7082d;
font-size: large;
background-color: #c689c6;
border: none;
float: right;
cursor: pointer;
}
/* THE FORM */
.form-content {
display: flex;
justify-content: center;
}
.form {
display: none;
position: fixed;
margin-top: 5px;
border: 2px solid #3b133b;
animation: openForm 0.5s;
z-index: 1;
}
#keyframes openForm {
from {
transform: scale(0);
}
to {
transform: scale(1);
}
}
.form h1 {
text-align: center;
}
.form-container {
background-color: #c689c6;
border: 2px solid black;
max-width: 300px;
padding: 10px;
}
.form-container h1 {
padding-left: 20px;
}
.form-container input[type="text"],
.form-container input[type="number"] {
width: 80%;
padding: 15px;
margin: 5px 0 22px 0;
border: none;
}
.form-container input[type="text"]:focus,
.form-container input[type="number"]:focus {
outline: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="styles.css" />
<title>Library</title>
</head>
<body>
<div class="main">
<div class="header">
<button class="btn" id="btn" onclick="openForm()">Add a Book</button>
</div>
<div class="form-content">
<div class="form" id="addBookForm">
<form id="form" action="" class="form-container">
<button type="button" class="close-btn" onclick="closeForm()">
x
</button>
<h1>Add a Book</h1>
<label for="title">Title</label>
<input
type="text"
placeholder="Title"
name="title"
id="title"
required
/>
<label for="author">Author</label>
<input
type="text"
placeholder="Author"
name="author"
id="author"
required
/>
<label for="pages">Pages</label>
<input
type="number"
placeholder="Pages"
name="pages"
required
id="pages"
/>
<button type="submit" id="submit-btn">Submit</button>
</form>
</div>
</div>
<div id="content" class="content"></div>
</div>
</body>
</html>
I have a form where the user inputs information from a book they are reading and upon hitting submit, the information is sent as its own object inside an array. I also have a forEach method running which loops through the array and displays each object as a div on the web page.
let myLibrary = [];
const book = {
title: title,
author: author,
pages: parseInt(pages),
read: false,
};
myLibrary.push(book)
As you can see from the code above, the three properties that the user fills out are the books title, author and page count. There's also a property that is automatically added called the read property and it is automatically set as false.
The Problem
My problem is this. I have the following code displayed at the bottom of each div.
<div class="read">
<label class="switch">
<input type="checkbox" />
<span class="slider round"></span>
</label>
</div>
This code is very simple. It's a toggle switch which I found here.
I want it so when the toggle switch is grayed out, the read status is set to false. But when the toggle switch is turned on, the read property is set to true. I am having a very difficult time figuring out how to get this done.
What I've Tried
I was able to use an onclick to select the toggle switch's parent element, and I tested it using console.log however I am unsure of where to go from there. I attempted to update the book.read to true using the ternary operator but it was out of scope and resulted in an error.
document.querySelector(".main").onclick = (ev) => {
let el = ev.target.classList.contains("switch")
? ev.target.parentElement
: ev.target.classList.contains("slider")
? ev.target
: false;
if (el) {
let toggle = el.parentElement.parentElement.parentElement;
let index = [...toggle.parentElement.children].indexOf(toggle);
myLibrary[index].read = false ? false : true;
console.log(myLibrary[index].read);
}
console.log(myLibrary);
};

Change this
function displayBook(book) {
...
<label class="switch" data-book="0">
to
function displayBook(book,bookIndex) {
...
<label class="switch" data-book="${bookIndex}">
and
myLibrary.forEach((book) => {
displayBook(book);
});
to
myLibrary.forEach((book,i) => {
displayBook(book,i);
});
lastly change
// Displays new book
displayBook(book);
to
// Displays new book
displayBook(book,myLibrary.length-1);
Here is the code inclusive a delete function
It would be slightly simpler if we had an associate array on book_id
Note I removed the numeric ID because it is not needed since the index of the array is the same
let myLibrary = [{
title: "The Once and Future King",
author: "White",
pages: 654,
read: false,
},
{
title: "The Hobbit",
author: "Tolkien",
pages: 304,
read: false,
},
];
const bookContent = document.getElementById("content");
const formDiv = document.getElementById("addBookForm");
function displayBook(book, idx) {
const addBook = document.createElement("div");
addBook.className = "book";
addBook.id = `book_${idx}`;
bookContent.appendChild(addBook);
addBook.innerHTML = `
<div class="title">
<p class="bookTitle">
<span>${book.title}</span>
</p>
</div>
<div class="body">
<p>
Author: <span>${book.author}</span>
</p>
<p>
Pages: <span>${book.pages}</span>
</p>
</div>
<div class="read">
<label class="switch" data-book="${idx}">
<input type="checkbox" />
<span class="slider round"></span>
</label>
</div>
<div class="delete">
<button class="delete-btn">DELETE</button>
</div>`;
}
// Display your original object list
myLibrary.forEach((book, i) => {
displayBook(book, i);
});
const deleteBook = (e) => {
const parent = e.target.closest("div.book");
const idx = parent.querySelector(".switch").dataset.book;
parent.remove();
console.log(idx);
myLibrary.splice(idx, 1);
console.log(myLibrary);
content.querySelectorAll("div.book").forEach((book, i) => { // reset the hard way
book.id = `book_${i}`;
book.querySelector("label.switch").dataset.book = i;
})
};
content.addEventListener("click", function(e) {
const tgt = e.target;
if (!tgt.matches(".delete-btn")) return; // not the delete
deleteBook(e); // pass the event to the delete
})
// Handle your object creation
const form = document.getElementById("form");
form.addEventListener("submit", updateLibrary);
function updateLibrary(event) {
// Need this so it doesn't refresh page
event.preventDefault();
const title = document.getElementById("title").value;
const author = document.getElementById("author").value;
const pages = document.getElementById("pages").value;
const book = {
title: title,
author: author,
pages: parseInt(pages),
read: false,
};
// Adds object to array
myLibrary.push(book);
// Displays new book
displayBook(book);
// Reset form
resetForm();
// Close form
formDiv.style.display = "none";
console.log(myLibrary);
}
// Resets the form so user can input another book
function resetForm() {
document.getElementById("form").reset();
}
// The form is automatically set to hidden. This loads it up for the user
const openForm = function() {
formDiv.style.display = "block";
document.getElementById("title").focus();
};
// Sets the form display back to none
const closeForm = () => formDiv.style.display = "none";
/* .main {
} */
.header {
display: flex;
flex-direction: column;
background-color: #c689c6;
height: 150px;
border: 1px solid #3b133b;
}
.btn {
margin: 0 auto;
margin-top: 55px;
display: block;
text-align: center;
background-color: #4649ff;
padding: 0.75rem 1.25rem;
border-radius: 10rem;
color: #fff;
cursor: pointer;
font-size: 1rem;
letter-spacing: 0.15rem;
transition: all 0.3s;
}
.btn:hover {
background-color: #3134fa;
}
.content {
display: flex;
flex-flow: row wrap;
align-content: flex-start;
justify-content: flex-start;
background-color: #fffdfa;
height: auto;
}
.book {
border: 2px solid #ffa94d;
background-color: #ffd8a8;
color: #d9480f;
width: 280px;
height: 365px;
margin: 10px;
}
.title {
border-bottom: 2px solid #ffa94d;
}
.title p {
display: flex;
align-items: center;
text-align: center;
justify-content: center;
font-size: larger;
}
.title span {
color: #3c4048;
}
.body {
border: 1px solid transparent;
height: 200px;
background-color: #fff4e6;
}
.body p {
padding-left: 20px;
}
p span {
color: #3c4048;
}
.read {
display: flex;
align-items: center;
justify-content: center;
height: 50px;
border-top: 2px solid #ffa94d;
text-align: center;
}
/* The switch - the box around the slider */
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
/* Hide default HTML checkbox */
.switch input {
opacity: 0;
width: 0;
height: 0;
}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: 0.4s;
transition: 0.4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: 0.4s;
transition: 0.4s;
}
input:checked+.slider {
background-color: #3d8361;
}
input:focus+.slider {
box-shadow: 0 0 1px #3d8361;
}
input:checked+.slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
.delete {
height: 50px;
border-top: 2px solid #ffa94d;
}
.delete-btn {
margin: 0 auto;
margin-top: 8px;
display: block;
text-align: center;
background-color: #e94560;
padding: 0.5rem 0.75rem;
border-radius: 10rem;
color: #fff;
cursor: pointer;
letter-spacing: 0.15rem;
transition: all 0.3s;
}
.delete-btn:hover {
background-color: #e7082d;
}
.close-btn {
color: #e7082d;
font-size: large;
background-color: #c689c6;
border: none;
float: right;
cursor: pointer;
}
/* THE FORM */
.form-content {
display: flex;
justify-content: center;
}
.form {
display: none;
position: fixed;
margin-top: 5px;
border: 2px solid #3b133b;
animation: openForm 0.5s;
z-index: 1;
}
#keyframes openForm {
from {
transform: scale(0);
}
to {
transform: scale(1);
}
}
.form h1 {
text-align: center;
}
.form-container {
background-color: #c689c6;
border: 2px solid black;
max-width: 300px;
padding: 10px;
}
.form-container h1 {
padding-left: 20px;
}
.form-container input[type="text"],
.form-container input[type="number"] {
width: 80%;
padding: 15px;
margin: 5px 0 22px 0;
border: none;
}
.form-container input[type="text"]:focus,
.form-container input[type="number"]:focus {
outline: none;
}
<div class="main">
<div class="header">
<button class="btn" id="btn" onclick="openForm()">Add a Book</button>
</div>
<div class="form-content">
<div class="form" id="addBookForm">
<form id="form" action="" class="form-container">
<button type="button" class="close-btn" onclick="closeForm()">
x
</button>
<h1>Add a Book</h1>
<label for="title">Title</label>
<input type="text" placeholder="Title" name="title" id="title" required />
<label for="author">Author</label>
<input type="text" placeholder="Author" name="author" id="author" required />
<label for="pages">Pages</label>
<input type="number" placeholder="Pages" name="pages" required id="pages" />
<button type="submit" id="submit-btn">Submit</button>
</form>
</div>
</div>
<div id="content" class="content"></div>
</div>

Modal pop-up won't pop up

I was trying to make a pop-up modal. It shows up if opacity set to 1, but it won't appear when button is clicked.
The show has opacity 1, but it won't work.
I'd appreciate any sort of help, thanks!
I'd appreciate any sort of help, thanks!
I'd appreciate any sort of help, thanks!
const donateOpen = document.getElementById('donateOpen');
const modal_container = document.getElementById('modal_container');
const donateClose = document.getElementById('donateClose');
donateOpen.addEventListener('click', () => {
console.log('clicks');
modal_container.classList.add('show');
});
donateClose.addEventListener('click', () => {
modal_container.classList.remove('show');
});
.modal-container {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
background-color: rbga(0,0,0,0.3);
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
opacity: 0;
pointer-events: none;
}
.modal-container .show {
opacity: 1;
pointer-events: auto;
}
.modal {
padding: 30px 50px;
max-width: 100%;
border-radius: 5px;
width: 350px;
height: 350px;
background-color: white;
text-align: center;
}
<button id='donateOpen'>DONATE NOW</button>
<div class='modal-container' id='modal_container'>
<div class='modal'>
<h2>Donate Now</h2>
<form action="">
<input type="text" placeholder='Name' class='input' id='name'>
<input type="email" placeholder='E-Mail' class='input'>
<button class='submit' id='donateClose'>Submit</button>
</form>
</div>
</div>

You are defining the .show class as a child of the modal because you put a space between. So instead of
.modal-container .show {
opacity: 1;
pointer-events: auto;
}
it should be without the space in between like:
.modal-container.show {
opacity: 1;
pointer-events: auto;
}
Full Example:
const donateOpen = document.getElementById('donateOpen');
const modal_container = document.getElementById('modal_container');
const donateClose = document.getElementById('donateClose');
donateOpen.addEventListener('click', () => {
console.log('clicks');
modal_container.classList.add('show');
});
donateClose.addEventListener('click', () => {
modal_container.classList.remove('show');
});
.modal-container {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
background-color: rbga(0,0,0,0.3);
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
opacity: 0;
pointer-events: none;
}
.modal-container.show {
opacity: 1;
pointer-events: auto;
}
.modal {
padding: 30px 50px;
max-width: 100%;
border-radius: 5px;
width: 350px;
height: 350px;
background-color: white;
text-align: center;
}
.input {
width: 80%;
display: block;
margin: 15px auto;
padding: 12px 20px;
}
.input:focus {
background-color: lightblue;
}
<button id='donateOpen'>DONATE NOW</button>
<div class='modal-container' id='modal_container'>
<div class='modal'>
<h2>Donate Now</h2>
<form action="">
<input type="text" placeholder='Name' class='input' id='name'>
<input type="email" placeholder='E-Mail' class='input'>
<input type="text" placeholder='Donation Amount' class='input'>
<button class="close" id='donateClose'>Cancel</button>
<button class='submit' id='donateClose'>Submit</button>
</form>
</div>
</div>

You have to define the .show class autonomously in the CSS file.
.show {
opacity: 1;
pointer-events: auto;
}
const donateOpen = document.getElementById('donateOpen');
const modal_container = document.getElementById('modal_container');
const donateClose = document.getElementById('donateClose');
donateOpen.addEventListener('click', () => {
donateOpen.classList.add('hide');
modal_container.classList.add('show');
});
donateClose.addEventListener('click', () => {
modal_container.classList.remove('show');
});
.modal-container {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
background-color: rbga(0,0,0,0.3);
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
opacity: 0;
pointer-events: none;
}
/* You have to define the show class autonomously in the CSS file. */
.show {
opacity: 1;
pointer-events: auto;
}
.hide {
opacity: 0;
}
.modal {
padding: 30px 50px;
max-width: 100%;
border-radius: 5px;
width: 350px;
height: 350px;
background-color: white;
text-align: center;
}
.input {
width: 80%;
display: block;
margin: 15px auto;
padding: 12px 20px;
}
.input:focus {
background-color: lightblue;
}
<button id='donateOpen'>DONATE NOW</button>
<div class='modal-container' id='modal_container'>
<div class='modal'>
<h2>Donate Now</h2>
<form action="">
<input type="text" placeholder='Name' class='input' id='name'>
<input type="email" placeholder='E-Mail' class='input'>
<input type="text" placeholder='Donation Amount' class='input'>
<button class="close" id='donateClose'>Cancel</button>
<button class='submit' id='donateClose'>Submit</button>
</form>
</div>
</div>

How to get text label in input type radio?

I made a custom radio input like this.
When selected, How do I get the value of the text label in the radio type input and bring it into the Syntax hyperlinks "Order Link"?
let result = document.querySelector('#result');
document.body.addEventListener('change', function (e) {
let target = e.target;
let message;
switch (target.id) {
case '30day':
message = 'selected 30d package';
break;
case '6month':
message = 'selected 6m package';
break;
case '1year':
message = 'selected 1y package';
break;
}
result.textContent = message;
});
body {
background:#2d2d2d;
display:block;
justify-content: center;
align-items:center;
flex-wrap:wrap;
padding:0;
margin:20;
height:100vh;
width:100vw;
font-family: sans-serif;
color:#FFF;
}
.select {
display: flex;
flex-direction: column;
position: relative;
min-width: 50%;
height: 40px;
}
.option {
padding: 0 30px 0 10px;
min-height: 40px;
display: flex;
align-items: center;
background: #333;
border-top: #222 solid 1px;
position: absolute;
top: 0;
width: 100%;
pointer-events: none;
order: 2;
z-index: 1;
transition: background .4s ease-in-out;
box-sizing: border-box;
overflow: hidden;
white-space: nowrap;
}
.option:hover {
background: #666;
}
.select:focus .option {
position: relative;
pointer-events: all;
}
input {
opacity: 0;
position: absolute;
left: -99999px;
}
input:checked+label {
order: 1;
z-index: 2;
background: #666;
border-top: none;
position: relative;
}
input:checked+label:after {
content: '';
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid white;
position: absolute;
right: 10px;
top: calc(50% - 2.5px);
pointer-events: none;
z-index: 3;
}
input:checked+label:before {
position: absolute;
right: 0;
height: 40px;
width: 40px;
content: '';
background: #666;
}
<!-- custom radio selected -->
<div class="select" style="margin:20px;" tabindex="1">
<input class="selectopt" name="package" type="radio" id="" checked>
<label for="" class="option">Select package</label>
<input class="selectopt" name="package" type="radio" id="30day">
<label for="30day" class="option">30 d package</label>
<input class="selectopt" name="package" type="radio" id="6month">
<label for="6month" class="option">6 m package</label>
<input class="selectopt" name="package" type="radio" id="1year">
<label for="1year" class="option">1 y package</label>
</div>
<br/>
<!-- selected text result -->
<p id="result" style="color:#fff;"></p>
<!-- Order Link -->
<a href="https://api.whatsapp.com/send?phone=123456789&text=Hello%20I%20want%20to%20order%20(this is the package label value text)
" target="_blank">order link</a>
In additional to, how do I create a variable for multiple phone numbers in javascript that works to be a random number every time a web page is opened or refreshed the phone number in the "Order Link" hyperlinks section "send?phone=123456789" will change randomly.
What I mean by random phone numbers are pre-defined ones, for example there are 5 choices of phone numbers to be randomized every time web page is opened or refreshed for eg random number is: "123456789,1987654321,122334455,112233445,165456781"
and it seems better with the warning text shown on
<p id="result" style="color:#fff;"></p>
if "order link" clicked but custom selected not selected before.

Yes, You can get the label of the radio by getting its for attribute which equals the id of the radio.
Also, I add a function to generate random numbers with specific length to generate the phone number.
I used encodeURIComponent to encode the text query parameter because there are spaces in it.
const getRandomPhoneNumber = () => {
const phoneNumbers = ["123456789", "1987654321", "122334455", "112233445", "165456781"]
const randomIndex = Math.floor(Math.random() * (phoneNumbers.length))
return phoneNumbers[randomIndex]
}
const phoneNumber = getRandomPhoneNumber()
let result = document.querySelector('#result');
const link = document.querySelector('#link');
const warning = document.querySelector('#warning');
const url = "https://api.whatsapp.com/send";
let changed = false;
const updateLink = (message) => {
let newUrl = url;
result.textContent = message;
newUrl += `?phone=${phoneNumber}`
newUrl += `?text=${encodeURIComponent(`Hello I want to order ${message}`)}`
link.href = newUrl
}
updateLink('')
document.getElementById('select').addEventListener('change', function (e) {
changed = true;
warning.innerText = '';
let target = e.target;
const label = document.querySelector(`[for='${target.id}']`)
let message = label.innerText;
updateLink(message)
});
link.addEventListener('click', () => {
if (!changed) {
warning.innerText = 'You need to select a package.'
return;
}
})
body {
background:#2d2d2d;
display:block;
justify-content: center;
align-items:center;
flex-wrap:wrap;
padding:0;
margin:20;
height:100vh;
width:100vw;
font-family: sans-serif;
color:#FFF;
}
.select {
display: flex;
flex-direction: column;
position: relative;
min-width: 50%;
height: 40px;
}
.option {
padding: 0 30px 0 10px;
min-height: 40px;
display: flex;
align-items: center;
background: #333;
border-top: #222 solid 1px;
position: absolute;
top: 0;
width: 100%;
pointer-events: none;
order: 2;
z-index: 1;
transition: background .4s ease-in-out;
box-sizing: border-box;
overflow: hidden;
white-space: nowrap;
}
.option:hover {
background: #666;
}
.select:focus .option {
position: relative;
pointer-events: all;
}
input {
opacity: 0;
position: absolute;
left: -99999px;
}
input:checked+label {
order: 1;
z-index: 2;
background: #666;
border-top: none;
position: relative;
}
input:checked+label:after {
content: '';
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid white;
position: absolute;
right: 10px;
top: calc(50% - 2.5px);
pointer-events: none;
z-index: 3;
}
input:checked+label:before {
position: absolute;
right: 0;
height: 40px;
width: 40px;
content: '';
background: #666;
}
<!-- custom radio selected -->
<div class="select" id="select" style="margin:20px;" tabindex="1">
<input class="selectopt" name="package" type="radio" id="" checked>
<label for="" class="option">Select package</label>
<input class="selectopt" name="package" type="radio" id="30day">
<label for="30day" class="option">30 d package</label>
<input class="selectopt" name="package" type="radio" id="6month">
<label for="6month" class="option">6 m package</label>
<input class="selectopt" name="package" type="radio" id="1year">
<label for="1year" class="option">1 y package</label>
</div>
<br/>
<!-- selected text result -->
<p id="result" style="color:#fff;"></p>
<p id="warning" style="color:#FFA500;"></p>
<!-- Order Link -->
<a id="link" href="" target="_blank">order link</a>

Form is not taking values ​from querySelector

I have a "piggy bank" project that saves and withdraws an amount of money passed through two different forms (Each modal is for one type of transaction), but when trying to withdraw, the values ​​are empty as in the example:
{date: "", amount: "", type: "Retirada"}
When saving the values ​​normally:
{date: "2021-02-27", amount: "1", type: "Depósito"}
I'm not able to find the error of not taking the values
Snipped Code:
const Modals = {
modalType: "",
openModals(type){
if(type == "Depósito") {
this.modalType = type;
document.querySelector('.modal1-overlay').classList.add('active')
} else {
document.querySelector('.modal2-overlay').classList.add('active')
this.modalType = type;
}
},
closeModals(type) {
if(type == "Depósito") {
document.querySelector('.modal1-overlay').classList.remove('active')
this.modalType = "";
} else {
document.querySelector('.modal2-overlay').classList.remove('active')
this.modalType = "";
}
},
openErrorModal(message) {
document.querySelector('.modalError-overlay').classList.add('active')
document.getElementById('errorMessage').innerHTML = message
},
closeErrorModal() {
document.querySelector('.modalError-overlay').classList.remove('active')
}
}
const Transaction = {
all: [],
add(transaction) {
Transaction.all.push(transaction)
App.reload()
},
totalBalance() {
let total = 0;
Transaction.all.forEach(transaction => {
if (transaction.type == "Retirada") {
total -= transaction.amount;
} else {
total += transaction.amount;
}
})
return total;
},
}
const DOM = {
transactionsContainer: document.querySelector('#data-table tbody'),
addTransaction(transaction, index) {
const tr = document.createElement('tr');
tr.innerHTML = this.innerHTMLTransaction(transaction);
this.transactionsContainer.appendChild(tr)
},
innerHTMLTransaction(transaction) {
const CSSclass = transaction.type === 'Retirada' ? "withdraw" : "income"
const amount = Utils.formatCurrency(transaction.amount, transaction.type)
const html = `
<tr>
<td class="${CSSclass}">${transaction.type}</td>
<td class="price-transaction">${amount}</td>
<td class="date">${transaction.date}</td>
<td></td>
</tr>
`;
return html;
},
updateBalance() {
document
.getElementById("totalCurrency")
.innerHTML = Utils.formatCurrency(Transaction.totalBalance())
},
clearTransactions() {
DOM.transactionsContainer.innerHTML = "";
}
}
const Utils = {
formatAmount(value) {
value = Number(value)*100
return value;
},
formatDate(date){
const splittedDate = date.split("-")
return `${splittedDate[2]}/${splittedDate[1]}/${splittedDate[0]}`
},
formatCurrency(value, type) {
if (type == "Retirada") {
value = String(value).replace(/\D/g, "");
value = Number(value) / 100
value = value.toLocaleString("pt-BR", {style: "currency", currency: "BRL"})
return "- " + value;
} else {
const signal = "";
value = String(value).replace(/\D/g, "");
value = Number(value) / 100
value = value.toLocaleString("pt-BR", {style: "currency", currency: "BRL"})
return value
}
}
}
const Form = {
amount: Modals.modalType == "Retirada" ? document.querySelector('input#amount2') : document.querySelector('input#amount'),
date: Modals.modalType == "Retirada" ? document.querySelector('input#date2') : document.querySelector('input#date'),
getValues() {
return {
date: this.date.value,
amount: this.amount.value,
type: Modals.modalType
}
},
validateField() {
const {date, amount, type} = Form.getValues()
if(date.trim() === "" || amount.trim() === "" || type.trim() === "") {
throw new Error("Por favor, preencha todos os campos!")
}
},
formatValues() {
let { date, amount, type} = Form.getValues()
amount = Utils.formatAmount(amount)
date = Utils.formatDate(date)
return {date, amount, type}
},
clearFieldsForm(){
Form.amount.value = "";
Form.date.value = "";
Modals.modalType = "";
},
submit(event) {
event.preventDefault()
try {
console.log(this.getValues())
// Form.validateField()
const transaction = Form.formatValues()
Transaction.add(transaction)
Modals.closeModals(Modals.modalType)
Form.clearFieldsForm();
} catch (error) {
Modals.openErrorModal(error.message)
}
}
}
const App = {
init() {
Transaction.all.forEach(transaction => {
DOM.addTransaction(transaction)
});
DOM.updateBalance()
},
reload() {
DOM.clearTransactions()
App.init()
}
}
App.init()
/* Global CSS */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Ubuntu', sans-serif;
}
:root {
--darkblue: #363f5f;
--green: rgb(0, 172, 0);
}
body {
background-color: rgb(241, 241, 241);
}
.sr-only {
position: absolute;
margin: 0;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border-width: 0;
}
.container {
width: min(90vw, 800px);
margin: auto;
}
/* Header */
header {
background-color: green;
padding: 2rem 2rem 5rem 2rem;
text-align: center;
color: white;
}
/* Modal CSS */
.modal1-overlay {
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
position: fixed;
top: 0;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
}
.modal1-overlay.active {
opacity: 1;
visibility: visible;
}
.modal1 {
background:snow;
padding: 2.4rem;
position: relative;
display: flex;
flex-direction: column;
}
.modal2-overlay {
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
position: fixed;
top: 0;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
}
.modal2-overlay.active {
opacity: 1;
visibility: visible;
}
.modal2 {
background:snow;
border-radius: 2px;
padding: 2.4rem;
position: relative;
}
#form {
max-width: 500px;
}
#form h2 {
margin-top: 0;
}
.modalError-overlay {
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
position: fixed;
top: 0;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
}
.modalError-overlay.active {
opacity: 1;
transition: opacity .25s ease-in;
visibility: visible;
}
.modalErrorContainer {
background-color: white;
border-radius: 2px;
width: 70vh;
height: 16vh;
padding: 10px;
}
.modalErrorContainer h3 {
margin-bottom: 1.5rem;
}
input {
border: 1px solid rgba(0, 0, 0, 0.192);
border-radius: 0.2rem;
padding: 0.8rem;
width: 100%;
}
.input-group {
margin-top: 0.8rem;
}
.input-group small {
opacity: 0.4;
margin-left: 5px;
font-size: 10px;
}
.input-group.actions {
display: flex;
justify-content: space-between;
align-items: center;
}
.input-group.actions .button,
.input-group.actions button {
width: 48%;
margin: 0;
}
/* Main CSS */
#logo {
width: 40vh;
margin-left: -2vh;
}
#balance {
margin-top: -3rem;
color: white;
display: flex;
flex-wrap: wrap;
}
h2 {
font-weight: 400;
user-select: none;
padding-top: 10px;
padding-bottom: 6px;
}
h3 {
color: black;
}
.card {
display: flex;
flex-direction: column;
width: 100%;
background-color: white;
border-radius: 3px;
margin-right: 0;
padding: 5px 10px;
margin-bottom: 1.5rem;
box-shadow: 0px 1px 1px 0px rgba(59, 59, 59, 0.527);
}
.card h3 {
margin: 0;
margin-top: 5px;
font-size: 16px;
font-weight: 400;
user-select: none;
}
.card p {
margin-left: 1.5vw;
color: var(--darkblue);
margin-top: 0.5rem;
font-weight: 600;
font-size: 24px;
}
.card.total {
background: rgb(0, 190, 0);
margin-right: 0;
margin-left: 0;
}
.card.total p {
color: white;
}
.card.total h3 {
color: white;
}
.containerButtons {
display: flex;
justify-content: center;
}
.button {
text-decoration: none;
margin: 15px;
border: 1px solid;
padding: 1.5vh;
border-radius: 5px;
}
.button.save {
color: var(--green);
}
.button.withdraw {
color: red;
}
.button.ok {
color: white;
background-color: var(--green);
margin-left: 85%;
}
button {
width: 100%;
height: 50px;
background-color: var(--green);
color: white;
border: 0;
border-radius: 5px;
cursor: pointer;
font-weight: 400;
font-size: 16px;
}
button:hover {
box-shadow: 0px 0px 2px 1px green;
}
.button.cancel {
color: red;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
font-weight: 400;
}
#data-table {
border-spacing: 0 0.5rem;
color: black;
}
#data-table th {
background: white;
color: #646464;
width: 50%;
font-weight: normal;
padding: 1rem 2rem;
user-select: none;
text-align: left;
}
#data-table tbody tr{
opacity: 0.7;
}
#data-table tbody tr:hover{
opacity: 1;
}
#data-table td {
background-color: white;
padding: 1rem 2rem;
}
td.price-transaction {
color: var(--darkblue);
}
td.withdraw {
color: red;
}
td.income {
color: green;
}
td.date {
color: var(--darkblue);
}
td.moneyatbank {
color: var(--darkblue);
}
/* Responsive */
#media screen and (min-width: 800px) {
#balance {
flex-wrap: nowrap;
}
.card {
margin-right: 2.5vh;
}
.card.total {
margin-left: 2.5vh;
}
}
#media screen and (max-width: 800px) {
#data-table {
display: block;
width: 100%;
border-spacing: 0 0.5rem;
color: black;
overflow: scroll;
}
}
<header>
<img src="assets/logo.svg" alt="Logo BiggyBank" id="logo">
</header>
<main class="container">
<section id="balance">
<h2 class="sr-only">Balanço</h2>
<div class="card">
<h3>Meta</h3>
<p>R$ 2000,00</p>
</div>
<div class="card total">
<h3>Total</h3>
<p id="totalCurrency"></p>
</div>
</section>
<section id="transaction">
<h2 class="sr-only">Transações</h2>
<div class="containerButtons">
+ Guardar
- Retirar
</div>
<table id="data-table">
<thead>
<tr>
<th>Tipo</th>
<th>Valor</th>
<th>Data</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</section>
</main>
<footer>
<img src="assets/darkmode.svg" alt="Icone DarkMode">
<img src="assets/lightmode.svg" alt="Icone DarkMode">
</footer>
<div class="modal1-overlay">
<div class="modal1">
<div id="form">
<h2>Guardar Dinheiro</h2>
<form action="" onsubmit="Form.submit(event)" id="form1">
<div class="input-group">
<label class="sr-only" for="amount">Valor à ser guardado</label>
<input id="amount" name="amount" type="number" step="0.01" placeholder="Valor à ser guardado" />
<small class="helpText">Use a vírgula (,) para casas decimais</small>
</div>
<div class="input-group">
<label class="sr-only" for="date">Valor à ser guardado</label>
<input id="date" name="date" type="date" />
</div>
<div class="input-group actions">
Cancelar
<button>Guardar</button>
</div>
</form>
</div>
</div>
</div>
<div class="modal2-overlay">
<div class="modal2">
<div id="form">
<h2>Retirar Dinheiro</h2>
<form action="" onsubmit="Form.submit(event)" id="form2">
<div class="input-group">
<label class="sr-only" for="amount2">Valor à ser guardado</label>
<input id="amount2" name="amount2" type="number" step="0.01" placeholder="Valor à ser guardado" />
<small class="helpText">Use a vírgula (,) para casas decimais</small>
</div>
<div class="input-group">
<label class="sr-only" for="date2">Valor à ser guardado</label>
<input id="date2" name="date2" type="date" />
</div>
<div class="input-group actions">
Cancelar
<button>Retirar</button>
</div>
</form>
</div>
</div>
</div>
<div class="modalError-overlay">
<div class="modalErrorContainer">
<h3 id="errorMessage"></h3>
OK
</div>
</div>

PHP User side Server Side Input Validation error

I am trying to do both server side and user side input validation, however, when I click my submit button it's not bringing me to my thank you page.
My guessing is that when I use the below function it causes the problem.
function test_input($data) {
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}
Please let me know what the problem is.
index.php
<!DOCTYPE html>
<html lang="en">
<head>
<title>Contact Us</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/contact_form.css">
<script type='text/javascript'>
function validateForm() {
var err = 0;
var fields = document.getElementsByClassName("required");
for (i=0;i<fields.length;i++){
if (fields[i].value === ""){
err += 1;
fields[i].style.backgroundColor = "#ebdded";
}
else{
fields[i].style.backgroundColor = "";
}
}
if(err > 0){
alert("Please Fill the Required Fields");
}
return false;
}
</script>
</head>
<body>
<div class="container">
<div class="form-wrap">
<div class="contact-title">
<div id="circle-container">
<div id="circle-effect">
<div class="circle" id="fifthLayer"></div>
<div class="circle" id="fourthLayer"></div>
<div class="circle" id="thirdLayer"></div>
<div class="circle" id="secondLayer"></div>
<div class="circle" id="firstLayer">Contact Me!</div>
</div>
</div>
</div>
<form name = "_contact_form" class="contact-form" onsubmit="return validateForm()" action="contactform.php" method="POST">
<div class="div-input-form">
<label class="input-label">First Name*: </label>
<input id="fname" class="user-input required" type="text" name="firstName" placeholder="First Name">
</div>
<div class="div-input-form">
<label class="input-label">Last Name*: </label>
<input id = "lname" class="user-input required" type="text" name="lastName" placeholder="Last Name">
</div>
<div class="div-input-form">
<label class="input-label">Email*:</label>
<input id = "email" class="user-input required" type="text" name="email" placeholder="Enter email addess">
</div>
<div class="div-input-form">
<label class="input-label">Phone:</label>
<input class="user-input" type="text" name="phone" placeholder="Enter phone number">
</div>
<div class="div-input-form">
<label class="input-label">Gender:</label>
<input type="radio" class="radio-radio" name = "gender" value="Male"> Male </br>
<input type="radio" class="radio-radio" name = "gender" value="Female"> Female </br>
<input type="radio" class="radio-radio" name = "gender" value="Other"> Other </br> </br>
</div>
<div class="div-input-form">
<label class="input-label">Occupation:</label>
<select name = "dropdown" class="select-occ">
<option value="Student">Student</option>
<option value="Teacher">Teacher</option>
</select>
</div>
<div class="div-input-form">
<label class="input-label">Age:</label>
<input type="radio" class="radio-radio" name = "age" value="18orBelow"> 15 or Below </br>
<input type="radio" class="radio-radio" name = "age" value="19to21"> 16 to 20 </br>
<input type="radio" class="radio-radio" name = "age" value="21orAbove"> 21 or above </br> </br>
</div>
<div class="div-input-form">
</br>
<label class="input-label">How Did You Hear About Us:</label>
<input type="checkbox" class="checkbox" name="hearaboutus"> Internet Search<br>
<input type="checkbox" class="checkbox" name="hearaboutus"> Friends or Family<br>
<input type="checkbox" class="checkbox" name="hearaboutus"> Other<br> </br>
</div>
<div class="div-input-form">
<label class="input-label">Message*:</label>
<textarea id="input_message" class="user-input required" name="message" placeholder="Your Comment..."></textarea>
</div>
<div class="div-submit-button" >
<button id ='submit' name = 'submit-button' class="submit-button">Submit</button>
</div>
</form>
</div>
</div>
</body>
</html>
contactform.php
<?php
session_start();
if(isset($_POST['submit-button'])){
if(empty($_POST["firstName"])) {
$fnameErr = "First Name is required";
}else {
$firstName = strval(test_input($_POST['firstName']));
}
if (empty($_POST["lastName"])) {
$lnameErr = "Last Name is required";
}else {
$lastName = strval(test_input($_POST['lastName']));
}
if (empty($_POST["email"])) {
$emailErr = "Last Name is required";
}else {
$emailFrom = strval(test_input($_POST['email']));
if (!filter_var($emailFrom, FILTER_VALIDATE_EMAIL)) {
$emailErr = "Invalid email format";
}
}
if (empty($_POST["message"])) {
$mesErr = "Last Name is required";
}else {
$message = strval(test_input($_POST['message']));
}
$phone = strval(test_input($_POST['phone']));
$occupation = strval(test_input($_POST['dropdown']));
$age = strval(test_input($_POST['age']));
$hearaboutus = strval(test_input($_POST['hearaboutus']));
$_SESSION['firstname'] = $firstName;
$_SESSION['lastName'] = $lastName;
$_SESSION['emailFrom'] = $emailFrom;
$_SESSION['phone'] = $firstNaphoneme;
$_SESSION['message'] = $message;
$_SESSION['occupation'] = $occupation;
$_SESSION['age'] = $age;
$_SESSION['hearaboutus'] = $hearaboutus;
$mailTo = "gansaikhanshur#gmail.com";
$subjectLine = "E-Mail From: ".$emailFrom."; www.gansaikhanshur.com";
$emailBody = "You have received an email from ".$firstName."\n\n".$message."\n\n\n";
mail($mailTo, $subjectLine, $emailBody);
header("Location: thankupage.php");
}
function test_input($data) {
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}
?>
thankupage.php
<?php session_start(); ?>
<!DOCTYPE html>
<html>
<head>
<title>Thank You Page!</title>
<link rel="stylesheet" type="text/css" href="css/support.css">
</head>
<body>
<div class="center">
<p>Thank You <?php
include 'contactform.php';
echo $_SESSION['firstname'];
session_destroy();
?></p>
Go Back
</div>
</body>
</html>
css
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body, html {
background: #DCD8D7;
height: 100%;
font-family: Helvetica, sans-serif;
}
p {
font-family: Helvetica;
font-size: 14px;
line-height: 1.7;
color: #616060;
margin: 0px;
}
input {
outline: none;
border: none;
}
textarea {
outline: none;
border: none;
}
.container {
width: 100%;
min-height: 100vh;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
padding: 10px;
background: transparent;
position: relative;
}
.form-wrap {
width: 770px;
background: #fff;
border-radius: 10px;
overflow: hidden;
position: relative;
}
.contact-title {
width: 100%;
position: relative;
z-index: 1;
display: flex;
flex-wrap: wrap;
flex-direction: column;
align-items: center;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
padding: 64px 15px 64px 15px;
}
.contact-title::before {
content: "";
display: block;
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: rgba(54,84,99,0.7);
}
.contact-form {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 43px 88px 57px 190px;
}
.div-input-form {
width: 100%;
position: relative;
border-bottom: 1px solid #b2b2b2;
margin-bottom: 26px;
}
.input-label {
font-family: Helvetica;
font-size: 15px;
color: #808080;
line-height: 1.2;
text-align: right;
position: absolute;
top: 14px;
left: -105px;
width: 80px;
}
.user-input {
font-family: Helvetica;
font-size: 15px;
color: #525050;
line-height: 1.4;
display: block;
width: 100%;
background: transparent;
padding: 0 5px;
}
input.user-input {
height: 45px;
}
textarea.user-input {
min-height: 115px;
padding-top: 14px;
padding-bottom: 13px;
}
.div-submit-button {
width: 100%;
display: flex;
flex-wrap: wrap;
padding-top: 8px;
}
.submit-button {
display: flex;
justify-content: center;
align-items: center;
padding: 0 20px;
min-width: 160px;
width: 100%;
height: 50px;
background-color: #3b88bb;
border-radius: 25px;
font-family: Helvetica;
font-size: 16px;
color: white;
line-height: 1.2;
}
.radio-radio
{
-webkit-appearance: none;
appearance: none;
display: inline-block;
position: relative;
background-color: #f1f1f1;
color: rgb(92, 91, 91);
top: 10px;
height: 25px;
width: 25px;
border: 0;
border-radius: 40px;
cursor: pointer;
margin-right: 7px;
outline: none;
}
.radio-radio:checked::before
{
position: absolute;
font: 13px/1 'Open Sans', sans-serif;
left: 8px;
top: 5px;
content: '\02143';
transform: rotate(40deg);
}
.checkbox
{
border-radius: 5px;
display: inline-block;
margin-right: 7px;
height: 10px;
width: 10px;
}
.select-occ {
display: block;
font-size: 14px;
font-family: sans-serif;
font-weight: 700;
color: rgb(53, 51, 51);
line-height: 1.5;
padding: 7px;
width: 100%;
max-width: 100%;
box-sizing: border-box;
margin: 0;
border: 1px solid #aaa;
box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
border-radius: 10px;
-moz-appearance: none;
-webkit-appearance: none;
background-color: #fff;
background-repeat: no-repeat, repeat;
background-position: right .7em top 50%, 0 0;
background-size: .65em auto, 100%;
}
#circle-container {
display: flex;
align-items: center;
justify-content: center;
width: 35vw;
height: 35vh;
position:relative;
}
.circle {
width: 30vh;
height: 30vh;
position: absolute;
border-radius: 50%;
}
#firstLayer {
font-size: 23px;
font-family: "Oswald", sans-serif;
letter-spacing: 1.5px;
display: flex;
justify-content: center;
align-items: center;
color: white;
font-weight: bold;
transition: 1s;
}
#secondLayer {
background-color: #CCCCFF ;
transition: 1s;
opacity: 0.5;
}
#thirdLayer {
background-color: black;
transition: 1s;
opacity: 0.5;
}
#fourthLayer {
background-color: cornflowerblue;
transition: 1s;
opacity: 0.5;
}
#fifthLayer {
background-color: #FFFF99;
transition: 1s;
opacity: 0.5;
}
#circle-effect {
position:relative;
width: 30vh;
height: 30vh;
border-radius: 50%;
overflow: hidden;
}
#circle-effect:hover #secondLayer {
transform: translate(0px, 75px);
}
#circle-effect:hover #thirdLayer {
transform: translate(0px, -75px);
}
#circle-effect:hover #fourthLayer {
transform: translate(75px, 0px);
}
#circle-effect:hover #fifthLayer {
transform: translate(-75px, 0px);
}

Try to do the below change in your contactform.php
Wrong --> $_SESSION['phone'] = $firstNaphoneme;
Right --> $_SESSION['phone'] = $phone;
Also add ob_start() at the beginning of your code
<?php
ob_start();
/*
Your code
*/
?>

Hey Good Evening Jaona,
Please write your javascript validation like this
if(err > 0){
alert("Please Fill the Required Fields");
return false;
}
and then try it definitely work fine with all validation and redirect.
Thanks have a good evening

header("location: thankupage.php");
Thank you
Soumyanjan