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>

Why is my hide() and show() not working even without error in JQuery? [duplicate]

This question already has answers here:
Can I make a <button> not submit a form?
(8 answers)
Closed 1 year ago.
I have a function that will show the other content and hide the recent content. But when I am clicking the submit input it's not working. I tried to use anchor tag and button tag and it has the same output.
html:
$(function(){
$('.btn .button').on('click', function(){
$('.container').show()
$('.container-two').hide()
})
})
* {
text-decoration: none;
}
body {
background: #8390A2;
}
.student {
padding-top: 10px;
padding-bottom: 20px;
}
.form .student div {
padding: 10px;
}
.form .student div input {
background: #f1f5f9;
margin-top: 5px;
height: 20px;
}
.student-name {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.form .student-name div {
padding: 10px;
}
.form .student-name div input {
background: #f1f5f9;
margin-top: 5px;
height: 20px;
}
.title-header {
border-top-right-radius: 10%;
border-top-left-radius: 10%;
border-bottom: 1px solid grey;
height: 40px;
background: #efefef;
}
.title-header h3 {
text-align: center;
padding: 9px;
}
.form form div .info {
position: relative;
}
.form .info label {
position: absolute;
color: grey;
pointer-events: none;
top: 36px;
left: 15px;
transition: 0.5s ease;
}
.form .info input:focus ~ label {
transform: translateY(-20px);
color: black;
}
.form .info input {
outline: none;
border: none;
border-bottom: 1px solid silver;
padding-top: 20px;
}
.form .student div:first-child input {
width: 95%;
}
.form .info input:focus {
border-color: #4CCEE8;
}
.form .btn {
position: absolute;
padding-top: 50px;
right: 36.5%;
}
.form .btn input,
.form-two .btn input {
border-radius: 15px;
outline: none;
width: 100px;
height: 40px;
}
.form-two .address div {
padding: 10px;
}
.address .info-two {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.form-two .student-info div {
padding: 10px;
}
.form-two .student-info div input {
background: #f1f5f9;
margin-top: 5px;
height: 20px;
}
.form-two .address div input {
background: #f1f5f9;
margin-top: 5px;
height: 20px;
}
.form-two .student-info div input {
background: #f1f5f9;
margin-top: 5px;
height: 20px;
}
.form-two form div .info {
position: relative;
}
.form-two .info label {
position: absolute;
color: grey;
pointer-events: none;
top: 36px;
left: 15px;
transition: 0.5s ease;
}
.form-two .info input:focus ~ label {
transform: translateY(-20px);
color: black;
}
.form-two .info input {
outline: none;
border: none;
border-bottom: 1px solid silver;
padding-top: 20px;
}
.form-two .address div:first-child input {
width: 95%;
}
.form-two .address div:last-child div {
padding-left: 1px;
}
.form-two .address div:last-child div label {
left: 8px;
}
.form-two .info input:focus {
border-color: #4CCEE8;
}
.form-two .btn {
position: absolute;
padding-top: 14px;
right: 36.5%;
}
.active {
display: none;
}
main {
border-radius: 1%;
background: #f1f5f9;
width: 27rem;
min-height: 30rem;
margin: auto;
margin-top: 13rem;
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2)
}
form h4 {
margin: 10px;
}
#media only screen and (max-width: 1366px) {
main {
background: #f1f5f9;
width: 27rem;
min-height: 30rem;
margin: auto;
margin-top: 5rem;
}
}
<div class="container">
<main>
<div class="form">
<div class="title-header">
<h3>Personal Data Information</h3>
</div>
<form action="" method="POST">
<div class="student">
<div class="info">
<input type="text" name="Program">
<label>Program</label>
</div>
<div class="info">
<input type="text" name="Student #">
<label>Student #</label>
</div>
</div>
<h4>Student Name</h4>
<div class="student-name">
<div class="info">
<input type="text" name="Surname" id="surname">
<label>Surname</label>
</div>
<div class="info">
<input type="text" name="Given Name" id="givenname">
<label>Given Name</label>
</div>
<div class="info">
<input type="text" name="Middle Name" id="middlename">
<label>Middle Name</label>
</div>
<div class="info">
<input type="text" name="Auxillary Name" id="auxillaryname">
<label>Auxillary Name</label>
</div>
</div>
<div class="btn">
<input type="submit" name="submit" value="Continue" class="button">
</div>
</form>
</div>
</main>
</div>
<div class="container-two active">
<main>
<div class="form-two">
<div class="title-header">
<h3>Personal Data Information</h3>
</div>
<form action="" method="POST">
<h4>Address</h4>
<div class="address">
<div class="info">
<input type="text" name="City Address">
<label>City Address</label>
</div>
<div class="info-two" style="padding: 0px;">
<div class="info">
<input type="text" name="Student #" style="width: 70%;">
<label>Zip Code</label>
</div>
<div class="info">
<input type="text" name="Student #" style="width: 70%;">
<label>Tel no.</label>
</div>
</div>
<div class="info">
<input type="email" name="Student #" style="width: 95%;">
<label>Email Address</label>
</div>
<div class="info">
<input type="text" name="City Address" style="width: 95%;">
<label>Home Address</label>
</div>
<div class="info">
<input type="text" name="Student #" style="width: 34%;">
<label>Zip Code</label>
</div>
</div>
<div class="btn">
<input type="submit" name="submit" value="Continue">
</div>
</form>
</div>
</main>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" charset="utf-8"></script>
I tried to use addClass() and removeClass(), also css() but nothing happens. I also find an answer but nothing like my problem.

First of all, change the first submit type input to a button.
Instead of <input type="submit" name="submit" value="Continue" class="button">
Should be <button class="button" type="button">Continue</button>
This will prevent the form submission, and add the missing "button" class to the button.
Then modify the jquery code like this:
$(function(){
$('.btn .button').on('click', function(e){
$('.container').hide()
$('.container-two').show()
})
})
My answer was based on the assumption that you want to show the second container after pressing the first "continue" button.
$(function(){
$('.btn .button').on('click', function(e){
$('.container').hide();
$('.container-two').show();
});
});
* {
text-decoration: none;
}
body {
background: #8390A2;
}
.student {
padding-top: 10px;
padding-bottom: 20px;
}
.form .student div {
padding: 10px;
}
.form .student div input {
background: #f1f5f9;
margin-top: 5px;
height: 20px;
}
.student-name {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.form .student-name div {
padding: 10px;
}
.form .student-name div input {
background: #f1f5f9;
margin-top: 5px;
height: 20px;
}
.title-header {
border-top-right-radius: 10%;
border-top-left-radius: 10%;
border-bottom: 1px solid grey;
height: 40px;
background: #efefef;
}
.title-header h3 {
text-align: center;
padding: 9px;
}
.form form div .info {
position: relative;
}
.form .info label {
position: absolute;
color: grey;
pointer-events: none;
top: 36px;
left: 15px;
transition: 0.5s ease;
}
.form .info input:focus ~ label {
transform: translateY(-20px);
color: black;
}
.form .info input {
outline: none;
border: none;
border-bottom: 1px solid silver;
padding-top: 20px;
}
.form .student div:first-child input {
width: 95%;
}
.form .info input:focus {
border-color: #4CCEE8;
}
.form .btn {
position: absolute;
padding-top: 50px;
right: 36.5%;
}
.form .btn input,
.form-two .btn input {
border-radius: 15px;
outline: none;
width: 100px;
height: 40px;
}
.form-two .address div {
padding: 10px;
}
.address .info-two {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.form-two .student-info div {
padding: 10px;
}
.form-two .student-info div input {
background: #f1f5f9;
margin-top: 5px;
height: 20px;
}
.form-two .address div input {
background: #f1f5f9;
margin-top: 5px;
height: 20px;
}
.form-two .student-info div input {
background: #f1f5f9;
margin-top: 5px;
height: 20px;
}
.form-two form div .info {
position: relative;
}
.form-two .info label {
position: absolute;
color: grey;
pointer-events: none;
top: 36px;
left: 15px;
transition: 0.5s ease;
}
.form-two .info input:focus ~ label {
transform: translateY(-20px);
color: black;
}
.form-two .info input {
outline: none;
border: none;
border-bottom: 1px solid silver;
padding-top: 20px;
}
.form-two .address div:first-child input {
width: 95%;
}
.form-two .address div:last-child div {
padding-left: 1px;
}
.form-two .address div:last-child div label {
left: 8px;
}
.form-two .info input:focus {
border-color: #4CCEE8;
}
.form-two .btn {
position: absolute;
padding-top: 14px;
right: 36.5%;
}
.active {
display: none;
}
main {
border-radius: 1%;
background: #f1f5f9;
width: 27rem;
min-height: 30rem;
margin: auto;
margin-top: 13rem;
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2)
}
form h4 {
margin: 10px;
}
#media only screen and (max-width: 1366px) {
main {
background: #f1f5f9;
width: 27rem;
min-height: 30rem;
margin: auto;
margin-top: 5rem;
}
}
<div class="container">
<main>
<div class="form">
<div class="title-header">
<h3>Personal Data Information 1</h3>
</div>
<form action="" method="POST">
<div class="student">
<div class="info">
<input type="text" name="Program">
<label>Program</label>
</div>
<div class="info">
<input type="text" name="Student #">
<label>Student #</label>
</div>
</div>
<h4>Student Name</h4>
<div class="student-name">
<div class="info">
<input type="text" name="Surname" id="surname">
<label>Surname</label>
</div>
<div class="info">
<input type="text" name="Given Name" id="givenname">
<label>Given Name</label>
</div>
<div class="info">
<input type="text" name="Middle Name" id="middlename">
<label>Middle Name</label>
</div>
<div class="info">
<input type="text" name="Auxillary Name" id="auxillaryname">
<label>Auxillary Name</label>
</div>
</div>
<div class="btn">
<button class="button" type="button">Continue</button>
</div>
</form>
</div>
</main>
</div>
<div class="container-two active">
<main>
<div class="form-two">
<div class="title-header">
<h3>Personal Data Information 2</h3>
</div>
<form action="" method="POST">
<h4>Address</h4>
<div class="address">
<div class="info">
<input type="text" name="City Address">
<label>City Address</label>
</div>
<div class="info-two" style="padding: 0px;">
<div class="info">
<input type="text" name="Student #" style="width: 70%;">
<label>Zip Code</label>
</div>
<div class="info">
<input type="text" name="Student #" style="width: 70%;">
<label>Tel no.</label>
</div>
</div>
<div class="info">
<input type="email" name="Student #" style="width: 95%;">
<label>Email Address</label>
</div>
<div class="info">
<input type="text" name="City Address" style="width: 95%;">
<label>Home Address</label>
</div>
<div class="info">
<input type="text" name="Student #" style="width: 34%;">
<label>Zip Code</label>
</div>
</div>
<div class="btn">
<input type="submit" name="submit" value="Continue">
</div>
</form>
</div>
</main>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

I copied and pasted the code to codepen and found that he is trying to show the div which is already visible and trying to hide the div which is already hidden, so replaced the hide() and show() with each other.
prevent the default submit event and add hide() and show() on correct divs
$(function(){
$('.btn .button').on('click', function(e){
e.preventDefault();
$('.container').hide()
$('.container-two').show()
})
})

Forms - Auto fill making email validation fail

In my form, when the user fills out the email portion, if the email has been previously used and auto fill puts in the information the email shows up as invalid. How can I change the javascript or JQuery so it does not do this? Any help would be much appreciated!
[![enter image description here][1]][1]
[enter link description here][2]
[1]: https://i.stack.imgur.com/nQD04.png
[2]: http://jsfiddle.net/M6N24/532/
<form class="container" action="https://webto.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8" method="POST">
<label>First Name
<input id="first_name" maxlength="40" name="first_name" size="20" type="text" onkeyup="test()" required><i class="fa fa-check-circle" aria-hidden="true"></i>
</label>
<label>Last Name
<input id="last_name" maxlength="80" name="last_name" size="20" type="text" onkeyup="test()"><i class="fa fa-check-circle" aria-hidden="true"></i>
</label>
<label>Email
<span class="error">Please enter a valid email address</span>
<input id="email" maxlength="80" name="email" size="20" type="text" onkeyup="test()"><i class="fa fa-times-circle-o" aria-hidden="true"></i>
</label>
<label>Phone
<span class="error">Please enter a valid phone number</span>
<input id="phone" maxlength="80" name="phone" size="20" type="tel" onkeyup="test()"><i class="fa fa-check-circle" aria-hidden="true"></i>
</label>
<label>City
<input id="city" name="city" maxlength="40" size="20" type="text" onkeyup="test()"><i class="fa fa-check-circle" aria-hidden="true"></i>
</label>
<label>State/Province
<input id="state" maxlength="20" name="state" size="20" type="text" onkeyup="test()"><i class="fa fa-check-circle" aria-hidden="true"></i>
</label>
<label id="co">Company
<input id="company" name="company" type="text" onkeyup="test()"><i class="fa fa-check-circle" aria-hidden="true"></i>
</label>
<label>Comments
<textarea id="comments" name="" id="" cols="30" rows="10" onkeyup="test()"></textarea>
<input id="sub" type="submit" disabled="disabled" />
</label>
<div>
<select hidden="true" id="00N6A000008yXMN" name="00N6A000008yXMN" title="Product Interest">
<option value="">--None--</option>
<option selected="selected" value="Visiant">Visiant</option>
<option value="Tessellate">Tessellate</option>
</select><br>
<select hidden="true" id="lead_source" name="lead_source">
<option value="">--None--</option>
<option value="Internal">Internal</option>
<option value="Trade Show">Trade Show</option>
<option selected="selected" value="Website">Website</option>
<option value="Direct Marketing">Direct Marketing</option>
<option value="Social Media">Social Media</option>
<option value="Other">Other</option>
</select><br>
</div>
</form>
body {
color: #fff;
background-color: #30bda6;
text-align: center;
}
form {
color: #fff;
background-color: #30bda6;
text-align: center;
font-family: Lato;
}
* {
box-sizing: border-box;
}
.form-title {
font-size: 38px;
color: #fff;
font-family: "Lato";
letter-spacing: 70px;
}
input {
font-size: 15px;
height: 48px;
margin-top: 8px;
}
input[type="tel"] {
width: 100%;
padding: 10px;
background-color: #30bda6;
border: 1px solid #fff;
font-size: 15px;
height: 48px;
}
input[type="text"] {
width: 100%;
padding: 10px;
background-color: #30bda6;
border: 1px solid #fff;
font-size: 15px;
}
input:focus {
background-color: #fff;
}
input[type="text"]:focus {
background-color: #fff;
}
input[type="text"]:visited {
background-color: #fff;
}
input[type="tel"]:focus {
background-color: #fff;
}
input[type="tel"]:visited {
background-color: #fff;
}
.container {
display: flex;
flex-direction: column;
padding: 5px 0;
}
textarea {
width: 100%;
background-color: #30bda6;
border: 1px solid #fff;
}
textarea:focus {
background-color: #fff;
}
#co {
flex-basis: 100%;
max-width: 100%;
}
label:nth-last-child(-n+2) {
flex-basis: 100%;
max-width: 100%;
}
select,
label {
height: 50px;
width: 48%;
margin: 2% 1%;
text-align: left;
font-family: "Lato";
font-size: 15px;
}
#sub {
border-radius: 6px;
width: 120px;
height: 35px;
text-transform: uppercase;
display: block;
margin-top: 48px;
font-size: 16px;
border: none;
}
#sub2 {
border-radius: 6px;
width: 120px;
height: 35px;
text-transform: uppercase;
display: block;
margin-top: 48px;
font-size: 16px;
border: none;
}
label {
position: relative;
}
.fa {
position: absolute;
bottom: 0;
right: 0;
transform: translate(-50%, 65%);
opacity: 0;
transition: opacity .5s, color .5s;
}
[data-valid] .fa {
opacity: 1;
color: #00594C;
}
[data-valid="valid"] .fa {
color: #00594C;
}
[data-valid="error"] .fa {
color: #AB0000;
}
.error {
display: none;
color: #AB0000;
font-size: .7em;
position: absolute;
left: 10px;
top: 0;
transform: translateY(150%);
font-size: 12px;
margin-top: 2px;
}
[data-valid="error"] .error {
display: block;
}
input#sub2:not([disabled]){
background-color: #fff;
color: #00AB8E;
}
input#sub:not([disabled]){
background-color: #fff;
color: #F68D2E;;
}
#thankyou { display:none;}
#thankyou.success {
display: block;
text-align: center;
}
#tessellate-page input:focus {
background-color: #fff !important;;
}
#tessellate-page textarea:focus {
background-color: #fff !important;;
}
#tessellate-page input[type="text"] {
width: 100%;
padding: 10px;
background-color: #30bda6;
border: 1px solid #fff;
}
#comments_label {
margin-top: 8px;
}
#media (max-width: 656px) {
label {
width: 98%;
height: 70px;
}
.fa {
transform: translate(-50%, -45%);
}
}
#media (min-width: 656px) {
.container {
flex-direction: row;
flex-wrap: wrap;
align-self: flex-start;
}
label {
margin-bottom: 20px;
}
}
function phoneNumber(phone) {
var phoneno = /^\d{9}|\d{10}|\d{11}$/;
return phoneno.test(phone);
}
$('input[type="tel"]').on('keyup', function() {
var $label = $(this).closest('label');
if ($(this).val().trim() != '') {
if ($(this).is('#phone')) {
if (phoneNumber($(this).val())) {
$label.attr('data-valid', 'valid');
} else {
$label.attr('data-valid', 'error');
console.log("this works")
}
} else {
$label.attr('data-valid', 'valid');
console.log("this works")
}
} else {
$label.removeAttr('data-valid');
console.log("this works")
}
});
function validateEmail(email) {
var re = /^(([^<>()[\]\\.,;:\s#\"]+(\.[^<>()[\]\\.,;:\s#\"]+)*)|(\".+\"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(email);
}
$('input[type="text"]').on('keyup', function() {
var $label = $(this).closest('label');
if ($(this).val().trim() != '') {
if ($(this).is('#email')) {
if (validateEmail($(this).val())) {
$label.attr('data-valid', 'valid');
} else {
$label.attr('data-valid', 'error');
console.log("this works")
}
} else {
$label.attr('data-valid', 'valid');
console.log("this works")
}
} else {
$label.removeAttr('data-valid');
console.log("this works")
}
});
test = function() {
if ($("#first_name").val() && $("#last_name").val() && $("#email").val() && $("#phone").val() && $("#city").val() && $("#state").val() && $("#company").val()) {
$("#sub").removeAttr("disabled");
}
}

You are checking email validation on textbox keyup event, but jquery does not consider autofill as a keyup event. It can not even read the filled value using autofill.

Instead of keyup event, you can use focusout event to solve your issue.
Here is the updated jsfiddle
function phoneNumber(phone) {
var phoneno = /^\d{9}|\d{10}|\d{11}$/;
return phoneno.test(phone);
}
$('input[type="tel"]').on('keyup', function() {
var $label = $(this).closest('label');
if ($(this).val().trim() != '') {
if ($(this).is('#phone')) {
if (phoneNumber($(this).val())) {
$label.attr('data-valid', 'valid');
} else {
$label.attr('data-valid', 'error');
console.log("this works")
}
} else {
$label.attr('data-valid', 'valid');
console.log("this works")
}
} else {
$label.removeAttr('data-valid');
console.log("this works")
}
});
function validateEmail(email) {
var re = /^(([^<>()[\]\\.,;:\s#\"]+(\.[^<>()[\]\\.,;:\s#\"]+)*)|(\".+\"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(email);
}
$('input[type="text"]').on('focusout', function() {
var $label = $(this).closest('label');
if ($(this).val().trim() != '') {
if ($(this).is('#email')) {
if (validateEmail($(this).val())) {
$label.attr('data-valid', 'valid');
} else {
$label.attr('data-valid', 'error');
console.log("this works")
}
} else {
$label.attr('data-valid', 'valid');
console.log("this works")
}
} else {
$label.removeAttr('data-valid');
console.log("this works")
}
});
test = function() {
if ($("#first_name").val() && $("#last_name").val() && $("#email").val() && $("#phone").val() && $("#city").val() && $("#state").val() && $("#company").val()) {
$("#sub").removeAttr("disabled");
}
}
body {
color: #fff;
background-color: #30bda6;
text-align: center;
}
form {
color: #fff;
background-color: #30bda6;
text-align: center;
font-family: Lato;
}
* {
box-sizing: border-box;
}
.form-title {
font-size: 38px;
color: #fff;
font-family: "Lato";
letter-spacing: 70px;
}
input {
font-size: 15px;
height: 48px;
margin-top: 8px;
}
input[type="tel"] {
width: 100%;
padding: 10px;
background-color: #30bda6;
border: 1px solid #fff;
font-size: 15px;
height: 48px;
}
input[type="text"] {
width: 100%;
padding: 10px;
background-color: #30bda6;
border: 1px solid #fff;
font-size: 15px;
}
input:focus {
background-color: #fff;
}
input[type="text"]:focus {
background-color: #fff;
}
input[type="text"]:visited {
background-color: #fff;
}
input[type="tel"]:focus {
background-color: #fff;
}
input[type="tel"]:visited {
background-color: #fff;
}
.container {
display: flex;
flex-direction: column;
padding: 5px 0;
}
textarea {
width: 100%;
background-color: #30bda6;
border: 1px solid #fff;
}
textarea:focus {
background-color: #fff;
}
#co {
flex-basis: 100%;
max-width: 100%;
}
label:nth-last-child(-n+2) {
flex-basis: 100%;
max-width: 100%;
}
select,
label {
height: 50px;
width: 48%;
margin: 2% 1%;
text-align: left;
font-family: "Lato";
font-size: 15px;
}
#sub {
border-radius: 6px;
width: 120px;
height: 35px;
text-transform: uppercase;
display: block;
margin-top: 48px;
font-size: 16px;
border: none;
}
#sub2 {
border-radius: 6px;
width: 120px;
height: 35px;
text-transform: uppercase;
display: block;
margin-top: 48px;
font-size: 16px;
border: none;
}
label {
position: relative;
}
.fa {
position: absolute;
bottom: 0;
right: 0;
transform: translate(-50%, 65%);
opacity: 0;
transition: opacity .5s, color .5s;
}
[data-valid] .fa {
opacity: 1;
color: #00594C;
}
[data-valid="valid"] .fa {
color: #00594C;
}
[data-valid="error"] .fa {
color: #AB0000;
}
.error {
display: none;
color: #AB0000;
font-size: .7em;
position: absolute;
left: 10px;
top: 0;
transform: translateY(150%);
font-size: 12px;
margin-top: 2px;
}
[data-valid="error"] .error {
display: block;
}
input#sub2:not([disabled]) {
background-color: #fff;
color: #00AB8E;
}
input#sub:not([disabled]) {
background-color: #fff;
color: #F68D2E;
;
}
#thankyou {
display: none;
}
#thankyou.success {
display: block;
text-align: center;
}
#tessellate-page input:focus {
background-color: #fff !important;
;
}
#tessellate-page textarea:focus {
background-color: #fff !important;
;
}
#tessellate-page input[type="text"] {
width: 100%;
padding: 10px;
background-color: #30bda6;
border: 1px solid #fff;
}
#comments_label {
margin-top: 8px;
}
#media (max-width: 656px) {
label {
width: 98%;
height: 70px;
}
.fa {
transform: translate(-50%, -45%);
}
}
#media (min-width: 656px) {
.container {
flex-direction: row;
flex-wrap: wrap;
align-self: flex-start;
}
label {
margin-bottom: 20px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet" />
<form class="container" action="https://webto.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8" method="POST">
<label>First Name
<input id="first_name" maxlength="40" name="first_name" size="20" type="text" onkeyup="test()" required><i class="fa fa-check-circle" aria-hidden="true"></i>
</label>
<label>Last Name
<input id="last_name" maxlength="80" name="last_name" size="20" type="text" onkeyup="test()"><i class="fa fa-check-circle" aria-hidden="true"></i>
</label>
<label>Email
<span class="error">Please enter a valid email address</span>
<input id="email" maxlength="80" name="email" size="20" type="text" onkeyup="test()"><i class="fa fa-times-circle-o" aria-hidden="true"></i>
</label>
<label>Phone
<span class="error">Please enter a valid phone number</span>
<input id="phone" maxlength="80" name="phone" size="20" type="tel" onkeyup="test()"><i class="fa fa-check-circle" aria-hidden="true"></i>
</label>
<label>City
<input id="city" name="city" maxlength="40" size="20" type="text" onkeyup="test()"><i class="fa fa-check-circle" aria-hidden="true"></i>
</label>
<label>State/Province
<input id="state" maxlength="20" name="state" size="20" type="text" onkeyup="test()"><i class="fa fa-check-circle" aria-hidden="true"></i>
</label>
<label id="co">Company
<input id="company" name="company" type="text" onkeyup="test()"><i class="fa fa-check-circle" aria-hidden="true"></i>
</label>
<label>Comments
<textarea id="comments" name="" id="" cols="30" rows="10" onkeyup="test()"></textarea>
<input id="sub" type="submit" disabled="disabled" />
</label>
<div>
<select hidden="true" id="00N6A000008yXMN" name="00N6A000008yXMN" title="Product Interest">
<option value="">--None--</option>
<option selected="selected" value="Visiant">Visiant</option>
<option value="Tessellate">Tessellate</option>
</select><br>
<select hidden="true" id="lead_source" name="lead_source">
<option value="">--None--</option>
<option value="Internal">Internal</option>
<option value="Trade Show">Trade Show</option>
<option selected="selected" value="Website">Website</option>
<option value="Direct Marketing">Direct Marketing</option>
<option value="Social Media">Social Media</option>
<option value="Other">Other</option>
</select><br>
</div>
</form>

I would suggest disabling auto fill functionality with some tricks if this is bothering you. Handling a browser functionality with DOM is not always a good way.
Chrome is ignoring read-only fields for auto fill. You can load your input fields as read-only and on hover make them editable
<input type="email" name="email" readonly>

Validation for inputs in jquery using regex

i was creating a simple form which has two inputs Name and Email on submit if i write numbers in name input then it will show number is not allowed message as like required message same as in email
Fiddle:https://jsfiddle.net/p6ohxxxe/
please help me out of this problem your help will be appreciated
HTML
<div class="form-container">
<form action="" id="my-form" name="myForm">
<div class="form-row">
<div class="input-container">
<label for="name" class="form-label">Name:</label>
<input type="text" class="form-input" name="name" placeholder="Enter your Name">
</div>
</div>
<div class="form-row">
<div class="input-container">
<label for="Email" class="form-label">Email:</label>
<input type="text" class="form-input" name="email" placeholder="Enter your Email">
</div>
</div>
<div class="form-row">
<div class="input-container">
<button type="submit" class="btnSubmit" >Submit</button>
</div>
</div>
</form>
</div>
js
$("form[name='myForm']").validate({
rules: {
name:"required",
email:{
required:true,
email:true
}
},
messages:{
name:"please Enter your Name",
email:"Please Enter a valid Email Address"
},
submitHandler: function(form) {
form.submit();
}
});
css
.form-container{
position: relative;
width: 100%;
padding: 8px;
box-sizing: border-box;
background: rgba(40, 91, 255, 0.24);
margin:30px auto;
max-width: 50%;
}
.input-container{
width: 100%;
height:auto;
padding-bottom: 12px;
}
.form-label{
font-weight: bold;
margin-bottom: 10px;
font-size: 15px;
display: block;
color:#000;
}
.form-input{
display: block;
width: 50%;
height: 35px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
.form-row{
position: relative;
width:100%;
padding: 14px;
}
.btnSubmit{
padding: 10px 40px;
position: relative;
background: #31708f;
border-radius: 5px;
outline: none;
box-shadow: none;
color: white;
}
.error{
color:red;
border-color: red;
padding: 3px 2px;
}

I dont know if I understand your question, but using the validate plugin, you can create additional validation rules and use regex as the validation parameter. I'm using this code:
jQuery.validator.addMethod("regex", function(value, element, regexp) {
var re = new RegExp(regexp);
return this.optional(element) || re.test(value);
},"Invalid Data");
And input:
<input required="" data-rule-regex="^(?:[0-9]{1,3}\.){3}[0-9]{1,3}$" title="Enter a valid IPV4" name="ip" type="text">

Success or error message on same page as form

When a form is sent successfully I would like a success message to appear on the same page above the send button. Alternatively, if a form is NOT sent successfully, I would like a message stating this to appear above the send button.
What is happening now, when the form is successfully sent, is that a new blank page appears with no message in it.
Below is what I have so far:
autosize(document.querySelectorAll('#message_content'));
var validator = $("#comment_form").validate({
ignore: [],
rules: {
gender: {
required: true,
},
first_name: {
required: true,
},
last_name: {
required: true,
},
email: {
required: true,
email: true,
minlength: 3
},
email_again: {
email: true,
minlength: 3,
equalTo: '#email'
},
message_subject: {
required: true,
minlength: 2
},
message: {
required: true,
minlength: 4
},
hiddenRecaptcha: {
required: function() {
if (grecaptcha.getResponse() == '') {
return true;
} else {
return false;
}
}
}
}
});
jQuery.extend(jQuery.validator.messages, {
required: "This field is required.",
remote: "Please fix this field.",
email: "Please enter a valid email address.",
url: "Please enter a valid URL.",
date: "Please enter a valid date.",
dateISO: "Please enter a valid date (ISO).",
number: "Please enter a valid number.",
digits: "Please enter only digits.",
creditcard: "Please enter a valid credit card number.",
equalTo: "Please use identical email addresses.",
accept: "Please enter a value with a valid extension.",
maxlength: jQuery.validator.format("Please enter no more than {0} characters."),
minlength: jQuery.validator.format("Please enter at least {0} characters."),
rangelength: jQuery.validator.format("Please enter a value between {0} and {1} characters long."),
range: jQuery.validator.format("Please enter a value between {0} and {1}."),
max: jQuery.validator.format("Please enter a value less than or equal to {0}."),
min: jQuery.validator.format("Please enter a value greater than or equal to {0}.")
});
#font-face {
font-family: Questrial;
src: url(Questrial-Regular.otf);
}
div {
font-family: Questrial;
}
input {
font-family: Questrial;
}
text-area {
font-family: Questrial;
}
span {
font-family: Questrial;
}
p {
font-family: Questrial;
}
form {
font-family: Questrial;
}
<style>html {
text-align: center
}
body {
display: inline-block;
margin: 0px auto;
text-align: left;
}
#comment_form {
width: 302px;
}
.label-radio {
font-size: 0.8em;
color: #d8e3e6;
margin-right: 10px;
font-family: questrial;
}
.inputfield3 {
height: 33px;
max-height: 33px;
width: 302px;
border-radius: 16px;
margin-top: -10px;
margin-bottom: 17px;
padding: 0px 10px 0px 10px;
overflow: hidden;
border: none;
background-color: #ffffff;
display: inline-block !important;
font-family: questrial;
font-size: 0.8em;
}
.inputfield2 {
height: 33px;
max-height: 33px;
width: 302px;
border-radius: 16px;
margin-top: -10px;
margin-bottom: 0px;
padding: 0px 10px 0px 10px;
overflow: hidden;
border: none;
background-color: #ffffff;
display: inline-block !important;
font-family: questrial;
font-size: 0.8em;
}
.textareafield {
max-height: 350px;
width: 302px;
max-width: 302px;
border-radius: 16px;
margin-top: -10px;
margin-bottom: 17px;
padding: 10px 10px 10px 10px;
overflow: hidden;
border: none;
background-color: #ffffff;
display: inline-block !important;
font-family: questrial;
font-size: 0.8em;
}
#g-recaptcha-outer {
width: 302px;
height: 72px;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
border-radius: 16px;
margin: -10px auto 20 auto;
}
#recaptcha-header {
margin: 30px 0px -15px 0px;
color: #d8e3e6;
font-size: 1.0em;
font-family: questrial;
font-size: 0.8em;
letter-spacing: -0.03em;
}
#contact_submit_button {
display: block;
text-decoration: none;
margin: 10px auto 80px auto;
width: 230px;
height: 33px;
padding: 0px 15px 0px 15px;
background-color: rgb(0, 157, 233);
color: #ffffff;
border-radius: 16px;
border: none;
outline: none;
font-family: questrial;
font-size: 1em;
}
.requiredmark {
margin: 0px 0px 0px 295px;
display: inline-block;
color: #d8e3e6;
padding: 20px 0px 0px 0px;
}
.requiredmark2 {
margin: -39px 0px 0px 295px;
display: inline-block;
color: #d8e3e6;
padding: 20px 0px 0px 0px;
}
.requiredmark-radio {
margin: 20px 0px 0px 0px;
display: inline-block;
color: #d8e3e6;
font-family: questrial;
}
.error {
display: none;
}
.error_show {
color: red;
}
input.invalid,
textarea.invalid {
border: 1px solid red;
}
input.valid,
textarea.valid {}
label.error {
margin-top: -10px;
margin-bottom: 30px;
float: none;
color: red;
vertical-align: top;
display: block;
font-family: Questrial;
}
​ #hiddenRecaptcha-error {
margin-top: 65px!important;
margin-bottom: 30px;
float: none;
color: red;
vertical-align: top;
display: block;
font-family: Questrial;
}
​ .gender {
border-radius: 16px;
margin-top: 5px;
margin-bottom: 7px;
padding: 0px 10px 0px 10px;
overflow: hidden;
border: none;
background-color: #ffffff;
display: inline-block !important;
font-family: questrial;
font-size: 0.8em;
}
#gender-error {
float: right;
margin-bottom: 0px!important;
margin-top: 20px!important
}
.errMsg {
color: #ffffff;
}
<html>
<head>
<script src='https://www.google.com/recaptcha/api.js'></script>
<script src="https://assets.webshopapp.com/photographycoursetour/autosize.js?2" type="text/javascript"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
<script src="{{ 'iframeresizer-min.js' | url_asset }}" type="text/javascript"></script>
<script src="https://assets.webshopapp.com/photographycoursetour/iframeresizer-contentwindow-min.js" type="text/javascript"></script>
</head>
<body>
<form id="comment_form" action="form.php" method="post">
<div class="compulsoryfield">
<input class="gender" type="radio" name="gender" value="Mr" required><label class="label-radio">Mr.</label>
<input class="gender" type="radio" name="gender" value="Ms" required><label class="label-radio">Ms.</label>
<span class="requiredmark-radio">*</span>
</div>
<div class="compulsoryfield"><span class="requiredmark">*</span>
<input id="first_name" name="first_name" class="inputfield3" type="text" placeholder="first name" required>
</div>
<div class="compulsoryfield"><span class="requiredmark2">*</span>
<input id="last_name" name="last_name" class="inputfield3" type="text" placeholder="last name" required>
</div>
<input class="inputfield3" type="text" name="company_name" placeholder="company name (if applicable)">
<input class="inputfield3" type="text" name="customer_number" placeholder="customer number (on invoice if available)">
<br>
<div class="compulsoryfield"><span class="requiredmark">*</span>
<input id="email" name="email" class="inputfield3" type="email" placeholder="email address" required>
</div>
<div class="compulsoryfield"><span class="requiredmark2">*</span>
<input id="email_again" name="email_again" class="inputfield3" type="email" placeholder="re-enter email address to confirm" required></div>
<input class="inputfield3" type="text" name="telephone_number" placeholder="telephone number (country code included)">
<br>
<div class="compulsoryfield"><span class="requiredmark">*</span>
<input id="message_subject" name="message_subject" class="inputfield3" type="text" placeholder="subject of message" required>
</div>
<div class="compulsoryfield"><span class="requiredmark2">*</span>
<textarea id="message_content" name="message_content" class="textareafield" type="text" placeholder="add your message here" rows="8" cols="39" required></textarea></div>
<p id="recaptcha-header">before sending, please show us you're real:</p>
<div><span class="requiredmark">*</span>
<div id="g-recaptcha-outer" class="compulsoryfield2">
<div class="g-recaptcha" data-sitekey="mySiteKey" required></div>
</div>
<input type="hidden" class="hiddenRecaptcha required" name="hiddenRecaptcha" id="hiddenRecaptcha">
<br><br>
<div class="succMsg"></div>
<div class="errMsg"></div>
<input id="contact_submit_button" type="submit" name="submit" value="SEND" onclick="myFunction()">
</form>
</body>
</html>
MY PHP is as follows:
<?php
if(isset($_POST['submit']) && !empty($_POST['submit'])):
if(isset($_POST['g-recaptcha-response']) && !empty($_POST['g-recaptcha-response'])):
//your site secret key
$secret = 'mySecretKey';
//get verify response data
$verifyResponse = file_get_contents('https://www.google.com/recaptcha/api/siteverify?secret='.$secret.'&response='.$_POST['g-recaptcha-response']);
$responseData = json_decode($verifyResponse);
if($responseData->success):
//contact form submission code
$gender = !empty($_POST['gender'])?$_POST['gender']:'';
$first_name = !empty($_POST['first_name'])?$_POST['first_name']:'';
$last_name = !empty($_POST['last_name'])?$_POST['last_name']:'';
$company_name = !empty($_POST['company_name'])?$_POST['company_name']:'';
$customer_number = !empty($_POST['customer_number'])?$_POST['customer_number']:'';
$email = !empty($_POST['email'])?$_POST['email']:'';
$email_again = !empty($_POST['email_again'])?$_POST['email_again']:'';
$telephone_number = !empty($_POST['telephone_number'])?$_POST['telephone_number']:'';
$message_subject = !empty($_POST['message_subject'])?$_POST['message_subject']:'';
$message_content = !empty($_POST['message_content'])?nl2br($_POST['message_content']):'';
$to = 'eddyhilhorst#fotel.eu';
$subject = 'FOTEL | A new contact form has been submitted now';
$htmlContent = "
<h1>Contact request details</h1>
<p>'<b>From: </b>".$gender." ".$last_name.", ".$first_name."</p>
<p><b>Company name: </b>".$company_name."</p>
<p><b>Customer number: </b>".$customer_number."</p>
<p><b>Email address: </b>".$email."</p>
<p><b>Telephone number: </b>".$telephone_number."</p>
<p><b>Message subject: </b>".$message_subject."</p>
<p><b>Message: </b></br></br>".$message_content."</p>
";
// Always set content-type when sending HTML email
$headers = "MIME-Version: 1.0" . "\r\n";
$headers .= "Content-type:text/html;charset=UTF-8" . "\r\n";
// More headers
$headers .= 'From:'.$gender.' '.$first_name.' '.$last_name.'<'.$email.'>' . "\r\n".
'Reply-To: '.$email."\r\n";
//send email
#mail($to,$subject,$htmlContent,$headers);
$succMsg = 'Your contact request have submitted successfully.';
else:
$errMsg = 'Robot verification failed, please try again.';
endif;
else:
$errMsg = 'Please click on the reCAPTCHA box.';
endif;
else:
$errMsg = '';
$succMsg = '';
endif;
nl2br($_POST['message_content'])
?>

I'm not really sure where to put this, but I guess it's here:
$headers .= 'From:'.$gender.' '.$first_name.' '.$last_name.'<'.$email.'>' . "\r\n".
'Reply-To: '.$email."\r\n";
//send email
#mail($to,$subject,$htmlContent,$headers);
header('Location:currentPage.php?msg=success'); // here
else:
header('Location:currentPage.php?msg=error'); // here
endif;
else:
header('Location:currentPage.php?msg=captcha_fail'); // here
endif;
else:
$errMsg = '';
$succMsg = '';
endif;