This is strange?
I'm using basic HTML CSS and JavaScript my code transpires as the following:
Code:
HTML:
<section class="newsletter-wrapper" id="newsletter">
<div class="content-newsletter">
<div class="newsletter-header">
<h1>Register Yourself to the Club Below</h1>
</div>
<div class="footer-newsletter">
<form id="submit-to-google-sheet">
<div id="step1">
<input type="email" name="Email" value="name@email.com" placeholder="Enter Email Here" required />
<button class="newsletter-button next-button" role="button">Next</button>
</div>
<div id="step2" style="display:none;">
<input type="text" name="First_Name" placeholder="Enter First Name" required />
<button class="newsletter-button next-button" role="button">Next</button>
</div>
<div id="step3" style="display:none;">
<input type="text" name="Last_Name" placeholder="Enter Last Name" required />
<button class="newsletter-button next-button" role="button">Next</button>
</div>
<div id="step4" style="display:none;">
<input type="text" name="Interested_Day_Of_Registration" placeholder="Enter interested day to signup" required/>
<button class="newsletter-button next-button" role="button">Next</button>
</div>
<div id="step5" style="display:none;">
<input type="text" name="Year_Of_Birth" placeholder="Enter Date of Birth" required />
<button class="newsletter-button next-button" role="button">Next</button>
</div>
<div id="step6" style="display:none;">
<input type="text" name="Parents_Name" placeholder="Enter Parent's Name" />
<button class="newsletter-button next-button" role="button">Next</button>
</div>
<div id="step7" style="display:none;">
<input type="tel" name="Phone_NO." placeholder="Enter Phone Number" required />
<button class="newsletter-button next-button" role="button">Next</button>
</div>
<div id="step8" style="display:none;">
<input type="text" name="CFC_ID" placeholder="Enter CFC ID" />
<button class="newsletter-button next-button" role="button">Next</button>
</div>
<div id="step9" style="display:none;">
<input type="text" name="Existing_Other_Family_Member" rows="4" placeholder="Enter exsisting Siblings (optional)"/>
<button class="newsletter-button" role="button">Subscribe <i class="fa-solid fa-paper-plane"></i> </button>
</div>
</form>
<span id="msg"></span>
</div>
</div>
</section>
CSS:
.newsletter-wrapper{
width: 100%;
height: 100%;
display: flex;
justify-content:center;
align-items:center;
margin-top: 20px;
}
.content-newsletter{
background: #b37b3c;
padding: 40px;
width: 100%;
max-width: 500px;
min-width: 200px;
border-radius: 10px;
text-align: center;
}
.content-newsletter .newsletter-header h1{
font-size: 230%;
margin-top: 0;
color: #fff;
}
.footer-newsletter{
padding: 15px;
}
input{
border: unset;
background-color: var(--input-background);
padding: 15px;
font-size: 14px;
border-radius: 50px;
width: 250px;
}
.newsletter-button{
background-color: var(--button-background);
color: #fff;
border: unset;
width: 155px;
padding: 15px;
border-radius: 50px;
margin-top: 10px;
cursor: pointer;
transition: 0.3s ease
}
.newsletter-button:hover{
background-color: #ff5500;
transform: scale(1.1);
}
input:focus,
.footer-newsletter:focus{
outline: none;
}
span{
color: #fff;
margin-top: 30px;
display: block;
font-size: 14px;
position: absolute;
border-radius: 0.31em;
}
span:hover{
border: 2px solid red;
background-color: black;
}
button{
text-wrap: nowrap
}
input[type="email"],
input[type="text"],
input[type="date"],
input[type="tel"],
textarea {
border: unset;
background-color: var(--input-background);
padding: 15px;
font-size: 14px;
border-radius: 50px;
width: 250px;
}
.next-button {
background-color: var(--button-background);
color: #fff;
border: unset;
width: 155px;
padding: 15px;
border-radius: 50px;
margin-top: 10px;
cursor: pointer;
transition: 0.3s ease;
}
.next-button:hover {
background-color: #ff5500;
transform: scale(1.1);
}
textarea {
width: 250px;
resize: none;
}
input:focus,
.footer-newsletter:focus,
textarea:focus
{
outline: none;
}
const form = document.forms['submit-to-google-sheet'];
const msg = document.getElementById('msg');
const newsletter = document.getElementById('newsletter');
const submissionDate = localStorage.getItem('submissionDate');
form.addEventListener('submit', (e) => {
e.preventDefault();
// Get the current date and time
const currentDate = new Date().getTime();
// Get the date and time of the most recent submission from localStorage
const lastSubmissionDate = localStorage.getItem('submissionDate');
if (!lastSubmissionDate || (currentDate - lastSubmissionDate) >= (10)) {
// If there is no previous submission date or if 24 hours have passed since the last submission,
// submit the form and store the current date in localStorage
form.reset();
fetch(scriptURL, { method: 'POST', body: new FormData(e.target)})
.then(response => {
form.style.display = "none";
msg.textContent = "You have signed up, we limit devices to one submission per day.";
console.log('Message Sent Successfully');
localStorage.setItem('submissionDate', currentDate);
})
.catch(error => {
console.error('Error!', error.message);
alert("An Error occurred, please contact support with the following error: ", error, error.message);
});
} else {
// If 24 hours have not passed since the last submission, hide the form and display a message to the user
newsletter.style.display = "none";
}
});
I'm also using some custom Javascript to handle the next button clicks:
const steps = document.querySelectorAll("#submit-to-google-sheet > div");
const nextButtons = document.querySelectorAll(".next-button");
let currentStep = 0;
nextButtons.forEach((button) => {
button.addEventListener("click", (event) => {
event.preventDefault();
// Hide the current step
steps[currentStep].style.display = "none";
// Show the next step
currentStep++;
steps[currentStep].style.display = "block";
// Clear the input of the previous step
// const inputs = steps[currentStep - 1].querySelectorAll("input, textarea");
// inputs.forEach((input) => {
// input.value = "";
// });
});
});
and Finally the jamie wilson code is the same as the code he provided, and for the spreadsheet and followed his exact steps.
The Problem:
This is so odd, when I submit the form, nothing happens, I have tried everything and even console.log one by one all my code and nothing changed. However, when I added a value attribute to the initial email input and some values to other input, and then clicked submit, but didn't like erase the initial set value, the form will submit successfully and appear in the spreadsheet, however if I delete the value attribute, or when I actually type my input and delete the value attribute the code will not submit.
Hopefully this makes sense,
I have never seen anything like this and tried everywhere to find a response.
