i have a problem with my form, i ran it through the form checker and even when everything is successful it still won't submit. i tried to change it a lot of times and im not sure how to keep the code like that instead of one function that will return on form submit.
const form = document.getElementById('form');
const username = document.getElementById('username');
const email = document.getElementById('email');
const password = document.getElementById('password');
const password2 = document.getElementById('password2');
const genderSelected = document.getElementById('select');
//Show input error messages
function showError(input, message) {
const formControl = input.parentElement;
formControl.className = 'form-control error';
const small = formControl.querySelector('small');
small.innerText = message;
}
//show success colour
function showSucces(input) {
const formControl = input.parentElement;
formControl.className = 'form-control success';
}
//check email is valid
function checkEmail(input) {
const 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,}))$/;
if (re.test(input.value.trim())) {
showSucces(input)
} else {
showError(input, 'Email is not invalid');
}
}
//checkRequired fields
function checkRequired(inputArr) {
inputArr.forEach(function(input) {
if (input.value.trim() === '') {
showError(input, `${getFieldName(input)} is required`)
} else {
showSucces(input);
}
});
}
//check input Length
function checkLength(input, min, max) {
if (input.value.length < min) {
showError(input, `${getFieldName(input)} must be at least ${min} characters`);
} else if (input.value.length > max) {
showError(input, `${getFieldName(input)} must be les than ${max} characters`);
} else {
showSucces(input);
}
}
//get FieldName
function getFieldName(input) {
return input.id.charAt(0).toUpperCase() + input.id.slice(1);
}
// check passwords match
function checkPasswordMatch(input1, input2) {
if (input1.value !== input2.value) {
showError(input2, 'Passwords do not match');
}
}
//check if selected a gender
function checkSelect(option) {
if (select.value)
showSucces(option);
else
showError(option, 'Please select a gender');
}
//Event Listeners
form.addEventListener('submit', function(e) {
e.preventDefault();
checkRequired([username, email, password, password2, genderSelected]);
checkLength(username, 3, 15);
checkLength(password, 6, 25);
checkEmail(email);
checkPasswordMatch(password, password2);
checkSelect(genderSelected);
});
#import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
:root {
--succes-color: #2ecc71;
--error-color: #e74c3c;
}
* {
box-sizing: border-box;
}
.wrapper {
width: 400px;
max-width: 100%;
box-sizing: border-box;
padding: 25px;
margin: 8% auto 0;
position: relative;
}
.container {
background-color: #fff;
border-radius: 5px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
width: 400px;
}
h2 {
text-align: center;
margin: 0 0 20px;
}
.form {
padding: 30px 40px;
}
.form-control {
margin-bottom: 10px;
padding-bottom: 20px;
position: relative;
}
.form-control label {
color: #777;
display: block;
margin-bottom: 5px;
}
.form-control input {
border: 2px solid #f0f0f0;
border-radius: 4px;
display: block;
width: 100%;
padding: 10px;
font-size: 14px;
}
.form-control input:focus {
outline: 0;
border-color: #777;
}
.form-control.success input {
border-color: var(--succes-color);
}
.form-control.error input {
border-color: var(--error-color);
}
.form-control small {
color: var(--error-color);
position: absolute;
bottom: 0;
left: 0;
visibility: hidden;
}
.form-control.error small {
visibility: visible;
}
.form button {
cursor: pointer;
background-color: #3498db;
border: 2px solid #3498db;
border-radius: 4px;
color: #fff;
display: block;
padding: 10px;
font-size: 16px;
margin-top: 20px;
width: 100%;
}
form {
border: 0px solid black;
display: inline-block;
text-align: left;
}
body {
margin: 50px 0px;
padding: 0px;
text-align: center;
align-items: center;
justify-content: center;
min-height: 100vh;
margin: 0;
background-color: lightblue;
}
.nav {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
display: inline;
resize: horizontal
}
label,
input[type="text,password,date"] {
display: block;
width: 150px;
float: left;
margin-bottom: 10px;
}
input[type="radio"] {
display: block;
width: 25px;
float: left;
margin-bottom: 10px;
}
label {
text-align: right;
width: 75px;
padding-right: 20px;
}
br {
clear: left;
}
h1 {
color: black;
text-align: center;
font-size: xx-large;
}
.button {
text-align: center;
margin: auto;
display: inline-block;
padding: 5px 15px;
font-size: 18px;
cursor: pointer;
text-align: center;
text-decoration: none;
outline: none;
color: black;
background-color: white;
border: none;
border-radius: 15px;
box-shadow: 0 9px #999;
}
.button:hover {
background-color: black;
color: white;
}
.button:active {
background-color: black;
color: white;
box-shadow: 0 5px #666;
transform: translateY(4px);
}
p {
font-family: verdana;
font-size: 20px;
}
#wrapper {
width: 30%;
margin: 50px auto;
padding: 50px;
background: #D7FBFF;
}
.textInput {
border: none;
height: 28px;
margin: 2px;
border: 1px solid #6B7363;
font-size: 1.2em;
padding: 5px;
width: 95%;
}
.textInput:focus {
outline: none;
}
.btn {
width: 98.6%;
border: none;
margin-top: 5px;
color: white;
background-color: #3b5998;
border-radius: 5px;
padding: 12px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
border-right: 1px solid #bbb;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #04AA6D;
}
output {
display: inline;
}
.customizedBox {
border: 1px solid #111;
width: 500px;
height: 400px;
}
select {
width: 280px;
height: 40px;
padding: 10px;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 1;
border: none;
}
<div class="nav">
<ul>
<li>Home</li>
<li>Memes Over The Years</li>
<li>Profile</li>
<li>About</li>
</ul>
</div>
<!-- partial:index.partial.html -->
<div class="wrapper">
<div class="container">
<form id="form" class="form">
<h2>Register With Us</h2>
<div class="form-control">
<label for="username">Username</label>
<input type="text" id="username" placeholder="Enter Username">
<small>Error Message</small>
</div>
<div class="form-control">
<label for="email">Email</label>
<input type="text" id="email" placeholder="Enter email">
<small>Error Message</small>
</div>
<div class="form-control">
<label for="password">Password</label>
<input type="password" id="password" placeholder="Enter password">
<small>Error Message</small>
</div>
<div class="form-control">
<label for="password2">Confirm Password</label>
<input type="password" id="password2" placeholder="Enter password again">
<small>Error Message</small>
</div>
<div class="form-control">
<label for="gender">Gender</label> <br/>
<select id="select">
<option value="">Choose an option</option>
<option value="Male">Male</option>
<option value="female">Female</option>
<option value="other">Other</option>
</select>
<small>Error Message</small>
</div>
<button type="submit">Submit</button>
</form>
</div>
</div>
<br /><br /><br /><br />
<span>Allready have an account?Log In</span>
Here is the simplest fix for you always blocking the submission with preventDefault
if (document.querySelectorAll(".error").length > 0) e.preventDefault();
const form = document.getElementById('form');
const username = document.getElementById('username');
const email = document.getElementById('email');
const password = document.getElementById('password');
const password2 = document.getElementById('password2');
const genderSelected = document.getElementById('select');
//Show input error messages
function showError(input, message) {
const formControl = input.parentElement;
formControl.className = 'form-control error';
const small = formControl.querySelector('small');
small.innerText = message;
}
//show success colour
function showSucces(input) {
const formControl = input.parentElement;
formControl.className = 'form-control success';
}
//check email is valid
function checkEmail(input) {
const 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,}))$/;
if (re.test(input.value.trim())) {
showSucces(input)
} else {
showError(input, 'Email is not invalid');
}
}
//checkRequired fields
function checkRequired(inputArr) {
inputArr.forEach(function(input) {
if (input.value.trim() === '') {
showError(input, `${getFieldName(input)} is required`)
} else {
showSucces(input);
}
});
}
//check input Length
function checkLength(input, min, max) {
if (input.value.length < min) {
showError(input, `${getFieldName(input)} must be at least ${min} characters`);
} else if (input.value.length > max) {
showError(input, `${getFieldName(input)} must be les than ${max} characters`);
} else {
showSucces(input);
}
}
//get FieldName
function getFieldName(input) {
return input.id.charAt(0).toUpperCase() + input.id.slice(1);
}
// check passwords match
function checkPasswordMatch(input1, input2) {
if (input1.value !== input2.value) {
showError(input2, 'Passwords do not match');
}
}
//check if selected a gender
function checkSelect(option) {
if (select.value)
showSucces(option);
else
showError(option, 'Please select a gender');
}
//Event Listeners
form.addEventListener('submit', function(e) {
checkRequired([username, email, password, password2, genderSelected]);
checkLength(username, 3, 15);
checkLength(password, 6, 25);
checkEmail(email);
checkPasswordMatch(password, password2);
checkSelect(genderSelected);
if (document.querySelectorAll(".error").length > 0) e.preventDefault();
});
#import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
:root {
--succes-color: #2ecc71;
--error-color: #e74c3c;
}
* {
box-sizing: border-box;
}
.wrapper {
width: 400px;
max-width: 100%;
box-sizing: border-box;
padding: 25px;
margin: 8% auto 0;
position: relative;
}
.container {
background-color: #fff;
border-radius: 5px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
width: 400px;
}
h2 {
text-align: center;
margin: 0 0 20px;
}
.form {
padding: 30px 40px;
}
.form-control {
margin-bottom: 10px;
padding-bottom: 20px;
position: relative;
}
.form-control label {
color: #777;
display: block;
margin-bottom: 5px;
}
.form-control input {
border: 2px solid #f0f0f0;
border-radius: 4px;
display: block;
width: 100%;
padding: 10px;
font-size: 14px;
}
.form-control input:focus {
outline: 0;
border-color: #777;
}
.form-control.success input {
border-color: var(--succes-color);
}
.form-control.error input {
border-color: var(--error-color);
}
.form-control small {
color: var(--error-color);
position: absolute;
bottom: 0;
left: 0;
visibility: hidden;
}
.form-control.error small {
visibility: visible;
}
.form button {
cursor: pointer;
background-color: #3498db;
border: 2px solid #3498db;
border-radius: 4px;
color: #fff;
display: block;
padding: 10px;
font-size: 16px;
margin-top: 20px;
width: 100%;
}
form {
border: 0px solid black;
display: inline-block;
text-align: left;
}
body {
margin: 50px 0px;
padding: 0px;
text-align: center;
align-items: center;
justify-content: center;
min-height: 100vh;
margin: 0;
background-color: lightblue;
}
.nav {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
display: inline;
resize: horizontal
}
label,
input[type="text,password,date"] {
display: block;
width: 150px;
float: left;
margin-bottom: 10px;
}
input[type="radio"] {
display: block;
width: 25px;
float: left;
margin-bottom: 10px;
}
label {
text-align: right;
width: 75px;
padding-right: 20px;
}
br {
clear: left;
}
h1 {
color: black;
text-align: center;
font-size: xx-large;
}
.button {
text-align: center;
margin: auto;
display: inline-block;
padding: 5px 15px;
font-size: 18px;
cursor: pointer;
text-align: center;
text-decoration: none;
outline: none;
color: black;
background-color: white;
border: none;
border-radius: 15px;
box-shadow: 0 9px #999;
}
.button:hover {
background-color: black;
color: white;
}
.button:active {
background-color: black;
color: white;
box-shadow: 0 5px #666;
transform: translateY(4px);
}
p {
font-family: verdana;
font-size: 20px;
}
#wrapper {
width: 30%;
margin: 50px auto;
padding: 50px;
background: #D7FBFF;
}
.textInput {
border: none;
height: 28px;
margin: 2px;
border: 1px solid #6B7363;
font-size: 1.2em;
padding: 5px;
width: 95%;
}
.textInput:focus {
outline: none;
}
.btn {
width: 98.6%;
border: none;
margin-top: 5px;
color: white;
background-color: #3b5998;
border-radius: 5px;
padding: 12px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
border-right: 1px solid #bbb;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #04AA6D;
}
output {
display: inline;
}
.customizedBox {
border: 1px solid #111;
width: 500px;
height: 400px;
}
select {
width: 280px;
height: 40px;
padding: 10px;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 1;
border: none;
}
<div class="nav">
<ul>
<li>Home</li>
<li>Memes Over The Years</li>
<li>Profile</li>
<li>About</li>
</ul>
</div>
<!-- partial:index.partial.html -->
<div class="wrapper">
<div class="container">
<form id="form" class="form">
<h2>Register With Us</h2>
<div class="form-control">
<label for="username">Username</label>
<input type="text" id="username" placeholder="Enter Username">
<small>Error Message</small>
</div>
<div class="form-control">
<label for="email">Email</label>
<input type="text" id="email" placeholder="Enter email">
<small>Error Message</small>
</div>
<div class="form-control">
<label for="password">Password</label>
<input type="password" id="password" placeholder="Enter password">
<small>Error Message</small>
</div>
<div class="form-control">
<label for="password2">Confirm Password</label>
<input type="password" id="password2" placeholder="Enter password again">
<small>Error Message</small>
</div>
<div class="form-control">
<label for="gender">Gender</label> <br/>
<select id="select">
<option value="">Choose an option</option>
<option value="Male">Male</option>
<option value="female">Female</option>
<option value="other">Other</option>
</select>
<small>Error Message</small>
</div>
<button type="submit">Submit</button>
</form>
</div>
</div>
<br /><br /><br /><br />
<span>Allready have an account?Log In</span>
You call e.preventDefault() unconditionally.
This means, that whatever your code does, you will never submit the form (the default action)
Wrap the prevent default in an if statement and execute it only if the validation fails.
Related
I'm trying to make a form for adding a blog page.
I have title form, date form, content form, checkbox for blog category form and image form for the topic image.
When I try to fill the form, only the 3 of the 4 checkbox forms that worked and when I click upload image it won't show the file selector.
Here's the screenshot:
Form screenshot
This is what I'm trying to achieve:
Form screenshot
I've tried to browse for solution but my English isn't very good for browsing, I don't know the keyword to search for the solution.
Please help, I've stuck on this for 3 hours.
Here's the full code:
let blogs = []
function addBlog(event) {
event.preventDefault()
let inputName = document.getElementById("inputProjectName").value
let inputContent = document.getElementById("inputDescription").value
let inputImage = document.getElementById("inputImage")
const projectDate = {
startDate: document.getElementById("inputStartDate").value,
endDate: document.getElementById("inputEndDate").value
}
image = URL.createObjectURL(image.files[0])
let cardIcons = {
html: document.querySelector('input[name="checkHtml"]').checked,
css: document.querySelector('input[name="checkCss"]').checked,
nodeJs: document.querySelector('input[name="checkNode"]').checked,
reactJs: document.querySelector('input[name="checkReact"]').checked
}
let blog = {
title: inputName,
date: projectDate,
content: inputContent,
icons: cardIcons,
image: inputImage
}
blogs.push(blog)
console.table(blogs)
}
/* FORM */
.mpi-title {
width: 100%;
margin: 50px 0px;
font-size: 30px;
text-align: center;
font-family: 'Lato', sans-serif !important;
font-weight: 700;
}
.mpi-form-container {
display: flex;
justify-content: center;
}
.mpi-form {
width: 540px;
display: flex;
justify-content: center;
}
.mpi-form label {
font-size: 25px;
font-weight: bold;
}
.mpi-form .mpi-name input,
.mpi-date input {
width: 100%;
height: 50px;
padding: 5px;
box-sizing: border-box;
font-size: 20px;
font-weight: 400;
padding-bottom: 5px;
margin-top: 5px;
margin-bottom: 20px;
border: 1px solid #c4c4c4;
border-radius: 8px;
box-shadow: 0 5px 5px rgb(0 0 0 / 26%);
}
.mpi-date {
flex-grow: 1;
display: flex;
gap: 10px;
}
.mpi-date .date-start {
flex: 50%;
}
.mpi-date .date-end {
flex: 50%;
}
[type="date"]::-webkit-datetime-edit {
opacity: 0;
}
[type="date"]::-webkit-calendar-picker-indicator {
opacity: 0;
width: 100%;
}
.mpi-desc textarea {
width: 100%;
font-size: 20px;
font-weight: 400;
padding: 8px;
margin-top: 5px;
margin-bottom: 20px;
border: 1px solid #c4c4c4;
box-sizing: border-box;
border-radius: 8px;
height: 200px;
}
.mpi-check {
display: flex;
gap: 120px;
margin: 20px 0px;
}
.mpi-check label {
font-size: 20px;
}
.check-left {
display: flex;
flex-direction: column;
row-gap: 20px;
}
.check-right {
display: flex;
flex-direction: column;
row-gap: 20px;
}
.check-label {
display: block;
position: relative;
padding-left: 35px;
color: #514a4a;
margin-bottom: 12px;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.check-label input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: white;
border-radius: 5px;
box-shadow: 0 5px 5px rgb(0 0 0 / 26%);
}
.check-label:hover input~.checkmark {
background-color: #ccc;
}
.check-label input:checked~.checkmark {
background-color: #2196F3;
}
.checkmark:after {
content: "";
position: absolute;
display: none;
}
.check-label input:checked~.checkmark:after {
display: block;
}
.check-label .checkmark:after {
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.mpi-image {
overflow: hidden;
height: 50px;
width: 100%;
font-size: 20px;
font-weight: 400;
box-sizing: border-box;
margin-top: 5px;
margin-bottom: 20px;
background: #f4f3f3;
border: 1px solid #c4c4c4;
border-radius: 8px;
cursor: pointer;
padding-right: 8px;
box-shadow: 0 10px 10px rgb(0 0 0 / 26%);
}
.mpi-image label {
width: 100%;
height: 50px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
}
.mpi-choose {
margin-top: -2px;
border-radius: 8px;
align-items: center;
padding: 13px 10px 13px 10px;
background-color: #e4e4e4;
color: #b2abab;
}
.mpi-attach {
padding-right: 10px;
}
.mpi-submit button {
margin-top: 30px;
float: right;
padding: 10px 30px;
border: none;
border-radius: 25px;
background-color: var(--btn);
color: white;
font-size: 15px;
font-weight: bold;
cursor: pointer;
margin-bottom: 110px;
}
.mpi-submit button:hover {
background-color: var(--btn-hover)
}
/* x FORM */
<div class="mpi-form">
<!--MP = My Project Input-->
<form onsubmit="addBlog(event)">
<div class="mpi-name">
<label for="inputProjectName">Project Name</label>
<input type="text" id="inputProjectName">
</div>
<div class="mpi-date">
<div class="date-start">
<label for="inputStartDate">Start Date</label>
<input type="date" id="inputStartDate">
</div>
<div class="date-end">
<label for="inputEndDate">End Date</label>
<input type="date" id="inputEndDate">
</div>
</div>
<div class="mpi-desc">
<label for="inputDescription">Description</label>
<textarea name="inputDescription" id="inputDescription"></textarea>
</div>
<div class="mpi-check-cont">
<label for="checkTitle">Technologies</label>
<div class="mpi-check">
<div class="check-left">
<div>
<label for="checkHtml" class="check-label">HTML
<input type="checkbox" id="checkHtml" name="checkHtml"check>
<span class="checkmark"></span>
</label>
</div>
<div>
<label for="checkNode" class="check-label">Node Js
<input type="checkbox" id="checkNode" name="checkNode">
<span class="checkmark"></span>
</label>
</div>
</div>
<div class="check-right">
<div>
<label for="checkCss" class="check-label">CSS
<input type="checkbox" id="checkCss" name="checkCss">
<span class="checkmark"></span>
</label>
</div>
<div>
<label for="reactJs" class="check-label">React Js
<input type="checkbox" id="checkReact" name="checkReact">
<span class="checkmark"></span>
</label>
</div>
</div>
</div>
</div>
<div>
<label>Upload Image</label>
<div class="mpi-image">
<label for="input-blog-image">
<div class="mpi-choose">Choose</div>
<div class="mpi-attach"><i class="fa-solid fa-paperclip"></i></div>
</label>
<input type="file" id="inputImage" hidden />
</div>
</div>
<div class="mpi-submit">
<button type="submit">Submit</button>
</div>
</form>
Thanks
The very first mistake is you have added different id than for
<label for="reactJs" class="check-label">React Js
<input type="checkbox" id="checkReact" name="checkReact">
<span class="checkmark"></span>
</label>
Here for value is reactJs but input id is checkReact
Second mistake is same as above
<label for="input-blog-image">
<div class="mpi-choose">Choose</div>
<div class="mpi-attach"><i class="fa-solid fa-paperclip"></i></div>
</label>
<input type="file" id="inputImage" hidden />
label for value is input-blog-image but input id is inputImage
Make those changes, will work fine.
let blogs = []
function addBlog(event) {
event.preventDefault()
let inputName = document.getElementById("inputProjectName").value
let inputContent = document.getElementById("inputDescription").value
let inputImage = document.getElementById("inputImage")
const projectDate = {
startDate: document.getElementById("inputStartDate").value,
endDate: document.getElementById("inputEndDate").value
}
image = URL.createObjectURL(image.files[0])
let cardIcons = {
html: document.querySelector('input[name="checkHtml"]').checked,
css: document.querySelector('input[name="checkCss"]').checked,
nodeJs: document.querySelector('input[name="checkNode"]').checked,
reactJs: document.querySelector('input[name="checkReact"]').checked
}
let blog = {
title: inputName,
date: projectDate,
content: inputContent,
icons: cardIcons,
image: inputImage
}
blogs.push(blog)
console.table(blogs)
}
mpi-title {
width: 100%;
margin: 50px 0px;
font-size: 30px;
text-align: center;
font-family: 'Lato', sans-serif !important;
font-weight: 700;
}
.mpi-form-container {
display: flex;
justify-content: center;
}
.mpi-form {
width: 540px;
display: flex;
justify-content: center;
}
.mpi-form label {
font-size: 25px;
font-weight: bold;
}
.mpi-form .mpi-name input,
.mpi-date input {
width: 100%;
height: 50px;
padding: 5px;
box-sizing: border-box;
font-size: 20px;
font-weight: 400;
padding-bottom: 5px;
margin-top: 5px;
margin-bottom: 20px;
border: 1px solid #c4c4c4;
border-radius: 8px;
box-shadow: 0 5px 5px rgb(0 0 0 / 26%);
}
.mpi-date {
flex-grow: 1;
display: flex;
gap: 10px;
}
.mpi-date .date-start {
flex: 50%;
}
.mpi-date .date-end {
flex: 50%;
}
[type="date"]::-webkit-datetime-edit {
opacity: 0;
}
[type="date"]::-webkit-calendar-picker-indicator {
opacity: 0;
width: 100%;
}
.mpi-desc textarea {
width: 100%;
font-size: 20px;
font-weight: 400;
padding: 8px;
margin-top: 5px;
margin-bottom: 20px;
border: 1px solid #c4c4c4;
box-sizing: border-box;
border-radius: 8px;
height: 200px;
}
.mpi-check {
display: flex;
gap: 120px;
margin: 20px 0px;
}
.mpi-check label {
font-size: 20px;
}
.check-left {
display: flex;
flex-direction: column;
row-gap: 20px;
}
.check-right {
display: flex;
flex-direction: column;
row-gap: 20px;
}
.check-label {
display: block;
position: relative;
padding-left: 35px;
color: #514a4a;
margin-bottom: 12px;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.check-label input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: white;
border-radius: 5px;
box-shadow: 0 5px 5px rgb(0 0 0 / 26%);
}
.check-label:hover input~.checkmark {
background-color: #ccc;
}
.check-label input:checked~.checkmark {
background-color: #2196F3;
}
.checkmark:after {
content: "";
position: absolute;
display: none;
}
.check-label input:checked~.checkmark:after {
display: block;
}
.check-label .checkmark:after {
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.mpi-image {
overflow: hidden;
height: 50px;
width: 100%;
font-size: 20px;
font-weight: 400;
box-sizing: border-box;
margin-top: 5px;
margin-bottom: 20px;
background: #f4f3f3;
border: 1px solid #c4c4c4;
border-radius: 8px;
cursor: pointer;
padding-right: 8px;
box-shadow: 0 10px 10px rgb(0 0 0 / 26%);
}
.mpi-image label {
width: 100%;
height: 50px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
}
.mpi-choose {
margin-top: -2px;
border-radius: 8px;
align-items: center;
padding: 13px 10px 13px 10px;
background-color: #e4e4e4;
color: #b2abab;
}
.mpi-attach {
padding-right: 10px;
}
.mpi-submit button {
margin-top: 30px;
float: right;
padding: 10px 30px;
border: none;
border-radius: 25px;
background-color: var(--btn);
color: white;
font-size: 15px;
font-weight: bold;
cursor: pointer;
margin-bottom: 110px;
}
.mpi-submit button:hover {
background-color: var(--btn-hover)
}
<form onsubmit="addBlog(event)">
<div class="mpi-name">
<label for="inputProjectName">Project Name</label>
<input type="text" id="inputProjectName">
</div>
<div class="mpi-date">
<div class="date-start">
<label for="inputStartDate">Start Date</label>
<input type="date" id="inputStartDate">
</div>
<div class="date-end">
<label for="inputEndDate">End Date</label>
<input type="date" id="inputEndDate">
</div>
</div>
<div class="mpi-desc">
<label for="inputDescription">Description</label>
<textarea name="inputDescription" id="inputDescription"></textarea>
</div>
<div class="mpi-check-cont">
<label for="checkTitle">Technologies</label>
<div class="mpi-check">
<div class="check-left">
<div>
<label for="checkHtml" class="check-label">HTML
<input type="checkbox" id="checkHtml" name="checkHtml"check>
<span class="checkmark"></span>
</label>
</div>
<div>
<label for="checkNode" class="check-label">Node Js
<input type="checkbox" id="checkNode" name="checkNode">
<span class="checkmark"></span>
</label>
</div>
</div>
<div class="check-right">
<div>
<label for="checkCss" class="check-label">CSS
<input type="checkbox" id="checkCss" name="checkCss">
<span class="checkmark"></span>
</label>
</div>
<div>
<label for="reactJs" class="check-label">React Js
<input type="checkbox" id="reactJs" name="checkReact">
<span class="checkmark"></span>
</label>
</div>
</div>
</div>
</div>
<div>
<label>Upload Image</label>
<div class="mpi-image">
<label for="input-blog-image">
<div class="mpi-choose">Choose</div>
<div class="mpi-attach"><i class="fa-solid fa-paperclip"></i></div>
</label>
<input type="file" id="input-blog-image" hidden />
</div>
</div>
<div class="mpi-submit">
<button type="submit">Submit</button>
</div>
</form>
The problem is the wrong value for the for attribute on two label elements. These are:
<label for="reactJs" class="check-label">
<label for="input-blog-image">
And the correct values would be:
<label for="checkReact" class="check-label">
<label for="inputImage">
I'm trying to append the picture that inserted, so it can be viewed.
So here the code where i can input or insert the picture :
<style>
body {
height: 100%;
padding: 0;
margin: 0;
background-color: white;
max-width: 1920px;
}
.main-container {
display: flex;
min-height: 100vh;
align-items: center;
justify-content: center;
background-image: url('/img/');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
.listing-container {
width: 60%;
padding: 30px;
margin: auto;
border-radius: 35px;
box-shadow: 0px 0px 7px #00000029;
background-color: white;
}
.input-credential {
color: #3C58A7;
}
.form-label {
margin-left: 15px;
font-size: 25px;
font-family: Montserrat-Bold;
}
.question-mark {
color: #3C58A7;
}
.question-mark:hover {
cursor: pointer;
}
.form-control {
font-family: Montserrat-Regular;
}
.input-border {
padding-bottom: 15px;
padding-top: 15px;
border-radius: 25px;
box-shadow: 0px 0px 5px #00000029;
}
.error-message {
font-size: 16px;
color: red;
padding: 15px 12px;
font-family: Montserrat-Regular;
}
.input-gambar {
opacity: 0;
overflow: hidden;
position: absolute;
z-index: -1;
}
#input-gambar-text {
padding-left: 42.5%;
color: #3C58A7;
}
#input-gambar-text:hover {
color: rgb(103, 99, 99);
}
.grid {
margin-top: 50px;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
gap: 20px;
}
.grid .form-element {
width: 200px;
height: 200px;
box-shadow: 0px 0px 20px 5px rgba(100, 100, 100, 0.1);
}
.grid .form-element input {
display: none;
}
.grid .form-element img {
width: 200px;
height: 200px;
}
.grid .form-element div {
position: relative;
height: 40px;
margin-top: -40px;
background: rgba(0, 0, 0, 0.5);
text-align: center;
line-height: 40px;
font-size: 13px;
color: #f5f5f5;
font-weight: 600;
}
.grid .form-element div span {
font-size: 40px;
}
#tombol-cancel-gambar {
margin: auto;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 15px;
padding-right: 25px;
color: white;
font-size: 25px;
background-color: #3C58A7;
border-radius: 45px;
border-color: #3C58A7;
font-family: Montserrat-Bold;
align-items: center;
display: flex;
}
#tombol-cancel-gambar:hover {
color: #3C58A7;
background-color: white;
border-color: #3C58A7;
}
</style>
<body>
<div class="main-container">
<div class="listing-container">
<div class="row">
<div class="col-lg-12">
<div class="mb-3 input-credential">
<label class="form-label" for="myfile">
Masukkan Gambar
<span class="question-mark" data-toggle="tooltip" data-placement="bottom" title="Masukkan gambar produk anda">
<i class="fas fa-question-circle"></i>
</span>
</label>
<div class="grid" id="preview_test1">
<div class="form-element" id="test1">
<input type="file" id="file-1" accept="image/*" multiple>
<label for="file-1" id="file-1-preview">
<img src="/img/insert_gambar_penambahan_listing_barang.jpg" alt="" id="size-preview-image">
<div>
<span>+</span>
</div>
</label>
</div>
</div>
<div id="preview_test2">
</div>
</div>
</div>
</div>
</div>
</div>
</body>
And this is the function that i used to show multiple picture that i inserted :
function cancel_form_data_gambar() {
$("#preview_test1").empty();
$("#preview_test2").empty();
$("#preview_test1").append('<div class="form-element" id="test1"></div>');
$("#test1").append('<input type="file" id="file-1" accept="image/*" multiple>');
$("#test1").append('<label for="file-1" id="file-1-preview"></label>');
$("#file-1-preview").append('<img src="/img/insert_gambar_penambahan_listing_barang.jpg" alt="" id="size-preview-image">');
$("#file-1-preview").append('<div> <span>+</span> </div>');
}
function readURL(input) {
$("#preview_test1").empty();
for (var i = 0; i < input.length; i++) {
$("#preview_test2").append('<img id="test_gambar' + i + '"src="#">');
}
for (var i = 0; i < input.length; i++) {
if (input.files && input.files[i]) {
var reader = new FileReader();
reader.onload = function(e) {
$('#test_gambar' + i + '').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[i]);
}
}
$('#preview_test2').append('<button type="button" id="tombol-cancel-gambar" onclick="cancel_form_data_gambar()" class="btn btn-primary listing-button">Cancel Gambar</button>');
}
$("#file-1").change(function() {
readURL(this);
});
the picture is suppose to be showed in id="#preview_test2" after the picture was inserted. But the picture won't appear in id="#preview_test2" and only the button appear in there. So, how can i solve it?
So I have been following this youtube tutorial on how to create a login/sign up form and I've run into a problem. Whilst coding the JS, I tried testing out the continue button without any values submitted into the input groups, and nothing happened. So I went to check the console and I was met with this error message, "Uncaught TypeError: Cannot set property 'textContent' of null". The error occurs around the 'messageElement.textContent = message;' area. Any help would be greatly appreciated.
function setFormMessage(formElement, type, message) {
const messageElement = formElement.querySelector(".form__message");
messageElement.textContent = message;
messageElement.classList.remove("form__message--success", "form__message--error");
messageElement.classList.add(`form__message--${type}`);
}
function setInputError(inputElement, message) {
inputElement.classList.add("form__input--error");
inputElement.parentElement.querySelector(".form__input-error-message").textContent = message;
}
function clearInputError(inputElement) {
inputElement.classList.remove("form__input--error");
inputElement.parentElement.querySelector(".form__input-error-message").textContent = "";
}
document.addEventListener("DOMContentLoaded", () => {
const loginForm = document.querySelector("#login");
const createAccountForm = document.querySelector("#createAccount");
document.querySelector("#linkCreateAccount").addEventListener("click", e => {
e.preventDefault();
loginForm.classList.add("form--hidden");
createAccountForm.classList.remove("form--hidden");
});
document.querySelector("#linkLogin").addEventListener("click", e => {
e.preventDefault();
loginForm.classList.remove("form--hidden");
createAccountForm.classList.add("form--hidden");
});
loginForm.addEventListener("submit", e => {
e.preventDefault();
// Perform your AJAX/Fetch login
setFormMessage(loginForm, "error", "Invalid username/password combination");
});
document.querySelectorAll(".form__input").forEach(inputElement => {
inputElement.addEventListener("blur", e => {
if (e.target.id === "signupUsername" && e.target.value.length > 0 && e.target.value.length < 10) {
setInputError(inputElement, "Username must be at least 10 characters in length");
}
});
inputElement.addEventListener("input", () => {
clearInputError(inputElement);
});
});
});
#import url('https://fonts.googleapis.com/css2?family=Belleza&display=swap') * {
box-sizing: border-box;
}
/*Navugation Bar*/
nav {
z-index: 1;
height: 120px;
background: black;
box-shadow: grey;
overflow: hidden;
background-color: black;
position: sticky;
top: 0;
width: 100%;
}
nav ul {
float: centre;
text-align: center;
}
nav ul li {
display: inline-block;
line-height: 0px;
margin: 0px 15px;
padding: 30px;
}
nav ul li a {
position: sticky;
color: grey;
font-size: 20px;
text-transform: uppercase;
padding: 50px;
text-decoration: none;
width: 100px;
}
nav ul li a:hover {
color: white;
font-size: 30px
}
/*Home Page*/
.header-image {
padding: 0px;
position: sticky;
text-align: center;
margin-left: auto;
margin-right: auto;
margin-bottom: auto;
margin-top: auto;
width: 100%;
background-color: black;
height: 290px
}
#Home-page {
font-size: 2em;
margin: 0;
margin-bottom: 250px;
background: url(About\ Page\ Background.png)no-repeat;
background-position: center;
background-size: cover;
}
.first-container {
height: 75hv;
background: rgb(0, 0, 0, .7);
border: white 10px solid;
color: grey;
padding: 50px;
margin-top: 20%;
margin-bottom: 30%;
}
.first-container-h1 {
color: white;
text-align: center;
font-size: 4em;
border-bottom: 20px solid white;
}
.first-container-h2 {
color: white;
text-align: center;
font-size: 4em;
}
#second-container-main {
width: 80%;
margin: auto;
min-width: 460px;
margin-top: 5%;
margin-bottom: 10%;
}
.second-container-title {
background: white;
text-align: center;
font-size: 40px;
height: 6pc;
line-height: 90px;
}
.second-container {
height: 75hv;
background: rgb(0, 0, 0, .7);
border: white 2px solid;
color: grey;
padding: 50px;
font-size: 20px;
}
.second-container:hover {
font-size: 1em;
color: white;
}
.logo {
float: center;
width: 20%;
float: center;
text-align: center;
color: white;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 100px;
background-color: black;
height: 100px;
border: none
}
/* Footer*/
.footer-wrapper {
width: 100%;
margin: 0 auto;
display: block;
}
footer {
width: 100%;
height: 300px;
float: right;
text-align: center;
position: relative;
bottom: 0;
background-color: black;
}
/*About Page*/
.About-me-page-header {
font-size: 1em;
margin: 0;
background-position: center;
background-size: cover;
background-color: grey;
position: relative;
text-align: left;
padding-top: 50px;
padding-left: 50px;
height: 400px;
border: white 10px solid;
background-color: rgb(0, 0, 0, .7);
color: white;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
}
#About-page {
font-size: 1em;
margin: 0;
margin-bottom: 250px;
background: url(About\ Page\ Background.png)no-repeat;
background-position: center;
background-size: cover;
}
#About-page-main {
width: 80%;
margin: auto;
min-width: 460px;
margin-top: 5%;
margin-bottom: 10%;
}
.About-page-container {
height: 75hv;
background: rgb(0, 0, 0, .7);
border: white 2px solid;
color: grey;
padding: 50px;
font-size: 1em;
}
.About-page-container:hover {
font-size: 30px;
color: white;
}
.about-page-title {
background: white;
text-align: center;
font-size: 40px;
height: 6pc;
line-height: 90px;
}
.AB-container-h {
color: white;
text-align: center;
}
/* Resources*/
.R-first-container {
height: 75hv;
background: rgb(0, 0, 0, .7);
border: white 10px solid;
color: grey;
padding: 50px;
margin-top: 20%;
margin-bottom: 30%;
}
.R-first-container-h1 {
color: white;
text-align: center;
font-size: 4em;
}
/*Login Page*/
.About-me-page-header {
font-size: 1em;
margin: 0;
background-position: center;
background-size: cover;
background-color: grey;
position: relative;
text-align: left;
padding-top: 50px;
padding-left: 50px;
height: 400px;
border: white 10px solid;
background-color: rgb(0, 0, 0, .7);
color: white
}
#About-page {
font-size: 1em;
margin: 0;
margin-bottom: 250px;
background: url(About\ Page\ Background.png)no-repeat;
background-position: center;
background-size: cover;
}
#About-page-main {
margin: auto;
min-width: 460px;
margin-top: 5%;
margin-bottom: 10%;
}
/* Login in and Sign Up Form*/
#Login-page {
font-size: 2em;
margin: 0;
margin-bottom: 250px;
background: url(About\ Page\ Background.png)no-repeat;
background-position: center;
background-size: cover;
}
#Login-page-main {
--color-primary-dark: #009579;
--color-primary-dark: #007f67;
--color-secondary: #252c6a;
--color-primary-dark: #cc3333;
--color-success: #4bb544;
--color-error: red;
border-radius: 4px;
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.container {
max-width: 400px;
margin: 2rem;
padding: 5rem;
box-shadow: 0 0 40px rgba(0, 0, 0, 0.2);
border-radius: var(--border-radius);
background-color: rgba(0, 0, 0, .7);
color: white;
border: 3px solid white;
width: 1000px
}
.form--hidden {
display: none
}
.form>*:firstchild {
margin-top: 0;
}
.form>*:lastchild {
margin-bottom: 0;
}
.form__title {
margin-bottom: 2rem;
text-align: center;
font-size: 3rem;
}
.form__message {
margin-bottom: 1rem;
}
.form__message--success {
color: var(--color-success);
}
.form__message--error {
text-align: center;
color: var(--color-error);
}
.form__input-group {
margin-bottom: 2rem;
}
input,
select,
textarea {
color: white;
}
.form__input-error-message {
color: var(--color-error);
border-bottom: var(--color-error)
}
.form__input-error-message {
margin-top: 2rem;
font-size: 1.5rem;
color: var(--color-error);
}
.form__button {
width: 100%;
padding: 1rem 2rem;
font-weight: bold;
font-size: 1.1rem;
color: white;
background-color: rgb(0, 0, 0, .7);
outline: none;
cursor: pointer;
border: none;
border-radius: 20px
}
.form__button:hover {
background-color: white;
color: black
}
.form__button:active {
transform: scale(0.98)
}
.form__text {
font-size: 20px;
text-align: center;
cursor: pointer;
}
.form-text,
.form-textarea {
border-style: none;
}
.form__link {
text-decoration: none;
color: white
}
.form__link:hover {
text-decoration: underline;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Clarte Mentale - Login</title>
<link rel="stylesheet" href="Style.css" />
</head>
<body id="Login-page">
<div class="header-image">
<a href="Home.html">
<img src="Website Header.png">
</a>
</div>
<nav>
<ul>
<li>Welcome</li>
<li>About</li>
<li>Resources</li>
<li>Login</li>
</ul>
</nav>
<div class="About-me-page-header">
<h1 style="font-size:48px">Login Page</h1>
<p style="font-size:35px">
Contents:
</p>
<ul style="font-size:25px">
<li>Login</li>
<li>Sign Up</li>
</ul>
</div>
<main id="Login-page-main">
<div class="container">
<div class="form-container">
<!-- Login FormUp Form-->
<form class="form" id="login">
<h1 class="form__title">Login</h1>
<div class="form__messsage form__message--error"></div>
<div class="form__input-group">
<input type="text" class="form__input" autofocus placeholder="Username or Email" input style="height:30px;font-size:14pt; border:none; border-bottom: 4px solid black; background-color: rgba(0,0,0,0); width:100%;">
<div class="form__input-error-message"></div>
</div>
<div class="form__input-group">
<input type="password" class="form__input" autofocus placeholder="Password" style="height:30px;font-size:14pt; border:none; border-bottom: 4px solid black; background-color: rgba(0,0,0,0); width: 100%">
<div class="form__input-error-message"></div>
</div>
<button class="form__button" type="submit">Continue</button>
<p class="form__text" style="margin-top: 35px;">
<a class="form__link" id="linkCreateAccount">Don't have an account? Create account</a>
</p>
</form>
<!-- Sign Up Form-->
<form class="form form--hidden" id="createAccount">
<h1 class="form__title">Create Account</h1>
<div class="form__messsage form__message--error"></div>
<div class="form__input-group">
<input type="text" class="form__input" autofocus placeholder="Username" input style="height:30px;font-size:14pt; border:none; border-bottom: 4px solid black; background-color: rgba(0,0,0,0); width:100%;">
<div class="form__input-error-message"></div>
</div>
<div class="form__input-group">
<input type="text" class="form__input" autofocus placeholder="Email" input style="height:30px;font-size:14pt; border:none; border-bottom: 4px solid black; background-color: rgba(0,0,0,0); width:100%;">
<div class="form__input-error-message"></div>
</div>
<div class="form__input-group">
<input type="password" class="form__input" autofocus placeholder="Password" style="height:30px;font-size:14pt; border:none; border-bottom: 4px solid black; background-color: rgba(0,0,0,0); width: 100%">
<div class="form__input-error-message"></div>
</div>
<div class="form__input-group">
<input type="password" class="form__input" autofocus placeholder="Confirm password" style="height:30px;font-size:14pt; border:none; border-bottom: 4px solid black; background-color: rgba(0,0,0,0); width: 100%">
<div class="form__input-error-message"></div>
</div>
<button class="form__button" type="submit">Continue</button>
<p class="form__text" style="margin-top: 35px;">
<a class="form__link" id="linkLogin">Already have an account? Sign</a>
</p>
</form>
</main>
<footer>
<button class="logo" class="footer-wrapper" onclick="topFunction()" id="myBtn" title="Go to top">
<img src="Logo.png">
</button>
</footer>
<script src="Javascript.js"></script>
<script src="Login.js"></script>
</body>
</html>
You have <div class="form__messsage ... "> instead of <div class="form__message ... ">. Fixing that should work. GL.
Try and replace DomContentLoaded with load
for adding a little popup to a login i´m using jquery to append a div and its content to the page after the user clicks on the button. I don´t know why, but everytime i click the button, the div appears normally but disappears again immediately. Please help.
The Problem is all about the Forgot Password button.
Here is the code:
let form = $('form');
let passwordRequest = $('<button>');
passwordRequest.text('Forgot password?');
passwordRequest.attr('id', 'passwordRequest');
passwordRequest.appendTo(form);
function requestForgottenPassword() {
let popup = $('<div />').appendTo(form);
popup.attr('id', 'passwordPopup');
};
$(passwordRequest).on('click', function() {
requestForgottenPassword();
});
#passwordPopup {
width: 200px;
height: 200px;
position: absolute;
background-color: aqua;
}
#logIn {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 50px;
background-color: #fff;
border-radius: 20px;
box-shadow: 2px 5px 40px rgb(201, 201, 201);
}
form {
display: flex;
flex-direction: column;
align-items: center;
padding: 10px;
}
h2 {
font-size: 20px;
font-weight: 300;
margin-top: 10px;
}
input[type=text],
input[type=password] {
padding: 10px;
width: 300px;
margin: 10px;
border-radius: 3px;
border: 1px solid rgb(221, 221, 221);
font-size: 14px;
transition: 200ms;
}
input[type=submit] {
padding: 5px 15px;
margin-top: 30px;
font-size: 16px;
font-weight: 600;
outline: none;
cursor: pointer;
border-radius: 3px;
border: 1px solid rgb(114, 114, 114);
transition: 100ms;
}
#passwordRequest {
font-size: 14px;
text-decoration: none;
color: rgb(62, 184, 255);
margin-top: 20px;
border: none;
outline: none;
cursor: pointer;
background-color: transparent;
transition: 100ms;
padding: 5px;
}
#passwordPopup {
width: 200px;
height: 200px;
position: absolute;
background-color: aqua;
}
<div id="logIn">
<h1>Login</h1>
<form>
<h2>Username</h2>
<input id="username" type="text">
<h2>Password</h2>
<input id="userPassword" type="password">
<input id="submitButton" type="submit" value="Login">
</form>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
https://codepen.io/colintessarzick/pen/GRoMEWm
<button> is by default type="submit" (even without the type) -
The issue you're experiencing is the form actually being submitted.
Use type="button", or with your jQuery script:
const passwordRequest = $("<button>", {
text: "Forgot password?",
id: "passwordRequest",
type: "button",
appendTo: form
});
Example:
let form = $('form');
const passwordRequest = $("<button>", {
text: "Forgot password?",
id: "passwordRequest",
type: "button",
appendTo: form
});
function requestForgottenPassword() {
let popup = $('<div />').appendTo(form);
popup.attr('id', 'passwordPopup');
};
$(passwordRequest).on('click', function() {
requestForgottenPassword();
});
#passwordPopup {
width: 200px;
height: 200px;
position: absolute;
background-color: aqua;
}
#logIn {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 50px;
background-color: #fff;
border-radius: 20px;
box-shadow: 2px 5px 40px rgb(201, 201, 201);
}
form {
display: flex;
flex-direction: column;
align-items: center;
padding: 10px;
}
h2 {
font-size: 20px;
font-weight: 300;
margin-top: 10px;
}
input[type=text],
input[type=password] {
padding: 10px;
width: 300px;
margin: 10px;
border-radius: 3px;
border: 1px solid rgb(221, 221, 221);
font-size: 14px;
transition: 200ms;
}
input[type=submit] {
padding: 5px 15px;
margin-top: 30px;
font-size: 16px;
font-weight: 600;
outline: none;
cursor: pointer;
border-radius: 3px;
border: 1px solid rgb(114, 114, 114);
transition: 100ms;
}
#passwordRequest {
font-size: 14px;
text-decoration: none;
color: rgb(62, 184, 255);
margin-top: 20px;
border: none;
outline: none;
cursor: pointer;
background-color: transparent;
transition: 100ms;
padding: 5px;
}
#passwordPopup {
width: 200px;
height: 200px;
position: absolute;
background-color: aqua;
}
<div id="logIn">
<h1>Login</h1>
<form>
<h2>Username</h2>
<input id="username" type="text">
<h2>Password</h2>
<input id="userPassword" type="password">
<input id="submitButton" type="submit" value="Login">
</form>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
I am trying to change div color when clicking checkbox by assigning a function for onchange. I get null for both var div id and var checkbox in the function. Am I missing something? Or is there any way to do this only by using CSS?
function check(cbid,id) {
var div = document.getElementById(id);
var checkbox = document.getElementById(cbid);
console.log(div);
console.log(checkbox);
if(checkbox.checked == true) {
div.style.backgroundColor = "red";
} else {
div.style.backgroundColor = "black";
}
}
.excluded-prices {
min-height: 55px;
padding: 13px 0 0 0;
border-top: 1px solid #eaeaea;
float: left;
width: 100%;
position: relative;
clear: left;
margin: 10px 0 0 0;
background: #f5fbf5;
border-radius: 3px;
}
.excluded-prices:hover {
background-color: white;
}
.excluded-prices .ep-checkbox {
padding: 0 13px 0 0;
margin-left: 10px;
float: left;
}
.ep-checkbox .epc {
padding: 0;
margin: 0;
border: 0;
}
excluded-prices .ep-name {
width: 240px;
float: left;
}
.epn-title {
padding: 0;
margin: 0;
display: block;
cursor: pointer;
font-weight: bold;
font-size: 13px;
color: #003580;
}
.epn-description {
margin-left: 35px;
padding: 8px 0 13px 0;
display: block;
font-size: .923em;
font-weight: normal;
color: #537bb4;
cursor: pointer;
}
.ep-price {
display: none;
float: right;
margin-top: -45px;
padding-bottom: 15px;
}
.epp-total {
width: 90px;
float: right;
margin-right: 5px;
}
.total-title {
text-align: center;
padding: 0 0 3px 0;
margin: 0;
}
.eppt-price {
color: #0898ff;
text-align: center;
padding: 0 0 3px 0;
margin-top: 0;
}
<div class="excluded-prices" id="internet">
<div class="ep-checkbox">
<input type="checkbox" id="cbinternet" onchange="check(cbinternet,internet)" class="epc">
</div>
<div class="ep-name">
<label class="epn-title">Internet(Cable)</label>
<label class="epn-description">Internet is available for the entire property and costs € 14 per
day.</label>
</div>
<div class="ep-price">
<input type="hidden" id="ep_price">
<div class="epp-total">
<p class="total-title">Total</p>
<p class="eppt-price">BAM 28</p>
</div>
</div>
</div>
The problem is that you need to pass String values to your check function. So just add quotes like that:
onchange="check('cbinternet','internet')"
Or :
onchange="check(this.id, 'internet')"
function check(cbid,id) {
var div = document.getElementById(id);
var checkbox = document.getElementById(cbid);
console.log(div);
console.log(checkbox);
if(checkbox.checked == true) {
div.style.backgroundColor = "red";
} else {
div.style.backgroundColor = "black";
}
}
.excluded-prices {
min-height: 55px;
padding: 13px 0 0 0;
border-top: 1px solid #eaeaea;
float: left;
width: 100%;
position: relative;
clear: left;
margin: 10px 0 0 0;
background: #f5fbf5;
border-radius: 3px;
}
.excluded-prices:hover {
background-color: white;
}
.excluded-prices .ep-checkbox {
padding: 0 13px 0 0;
margin-left: 10px;
float: left;
}
.ep-checkbox .epc {
padding: 0;
margin: 0;
border: 0;
}
excluded-prices .ep-name {
width: 240px;
float: left;
}
.epn-title {
padding: 0;
margin: 0;
display: block;
cursor: pointer;
font-weight: bold;
font-size: 13px;
color: #003580;
}
.epn-description {
margin-left: 35px;
padding: 8px 0 13px 0;
display: block;
font-size: .923em;
font-weight: normal;
color: #537bb4;
cursor: pointer;
}
.ep-price {
display: none;
float: right;
margin-top: -45px;
padding-bottom: 15px;
}
.epp-total {
width: 90px;
float: right;
margin-right: 5px;
}
.total-title {
text-align: center;
padding: 0 0 3px 0;
margin: 0;
}
.eppt-price {
color: #0898ff;
text-align: center;
padding: 0 0 3px 0;
margin-top: 0;
}
<div class="excluded-prices" id="internet">
<div class="ep-checkbox">
<input type="checkbox" id="cbinternet" onchange="check(this.id, 'internet')" class="epc">
</div>
<div class="ep-name">
<label class="epn-title">Internet(Cable)</label>
<label class="epn-description">Internet is available for the entire property and costs € 14 per
day.</label>
</div>
<div class="ep-price">
<input type="hidden" id="ep_price">
<div class="epp-total">
<p class="total-title">Total</p>
<p class="eppt-price">BAM 28</p>
</div>
</div>
</div>
You're missing single quotes:
check('cbinternet','internet')
You made mistake here:
onchange="check('cbinternet','internet')"
Element id must be a string. Now you are passing null object.
function check(cbid,id) {
var div = document.getElementById(id);
var checkbox = document.getElementById(cbid);
console.log(div);
console.log(checkbox);
if(checkbox.checked == true) {
div.style.backgroundColor = "red";
} else {
div.style.backgroundColor = "black";
}
}
.excluded-prices {
min-height: 55px;
padding: 13px 0 0 0;
border-top: 1px solid #eaeaea;
float: left;
width: 100%;
position: relative;
clear: left;
margin: 10px 0 0 0;
background: #f5fbf5;
border-radius: 3px;
}
.excluded-prices:hover {
background-color: white;
}
.excluded-prices .ep-checkbox {
padding: 0 13px 0 0;
margin-left: 10px;
float: left;
}
.ep-checkbox .epc {
padding: 0;
margin: 0;
border: 0;
}
excluded-prices .ep-name {
width: 240px;
float: left;
}
.epn-title {
padding: 0;
margin: 0;
display: block;
cursor: pointer;
font-weight: bold;
font-size: 13px;
color: #003580;
}
.epn-description {
margin-left: 35px;
padding: 8px 0 13px 0;
display: block;
font-size: .923em;
font-weight: normal;
color: #537bb4;
cursor: pointer;
}
.ep-price {
display: none;
float: right;
margin-top: -45px;
padding-bottom: 15px;
}
.epp-total {
width: 90px;
float: right;
margin-right: 5px;
}
.total-title {
text-align: center;
padding: 0 0 3px 0;
margin: 0;
}
.eppt-price {
color: #0898ff;
text-align: center;
padding: 0 0 3px 0;
margin-top: 0;
}
<div class="excluded-prices" id="internet">
<div class="ep-checkbox">
<input type="checkbox" id="cbinternet" onchange="check('cbinternet','internet')" class="epc">
</div>
<div class="ep-name">
<label class="epn-title">Internet(Cable)</label>
<label class="epn-description">Internet is available for the entire property and costs € 14 per
day.</label>
</div>
<div class="ep-price">
<input type="hidden" id="ep_price">
<div class="epp-total">
<p class="total-title">Total</p>
<p class="eppt-price">BAM 28</p>
</div>
</div>
</div>