I want the "Dont have an account?" line to trigger the display of .registrybox class when clicked. I have written down some script and it does not function. Script specifies that when Dont have an account? is clicked, .loginbox should disappear and be replaced w/ the .registrybox class code.
Those CSS display: none and display: block are written beforehand.
function displayRegistry() {
document.getElementsByClassName('.registrybox').style.display = "block";
document.getElementsByClassName('.loginbox').style.display = "none";
}
.loginbox {
width: 320px;
height: 420px;
background-color: ;
color: #fff;
top: 50%;
left: 50%;
position: absolute;
transform: translate(-50%, -50%);
padding: 50px 20px;
display: block;
}
}
h1 {
margin: 0;
padding: 0 0 20px;
text-align: center;
font-size: 22px;
}
.loginbox p {
margin: 0;
padding: 0;
font-weight: bold;
}
.loginbox input {
width: 100%;
margin-bottom: 20px;
}
.loginbox input[type="text"],
[type="password"] {
border: none;
border-bottom: 1px solid #fff;
outline: none;
background: transparent;
height: 40px;
color: #fff;
font-size: 16px;
}
.loginbox input[type="submit"] {
border: none;
outline: 0;
height: 40px;
background: #fb2525;
color: #fff;
font-size: 18px;
border-radius: 20px;
}
.loginbox input[type="submit"]:hover {
cursor: pointer;
background: red;
color: #000;
}
.loginbox a {
text-decoration: none;
color: darkgrey;
font-size: 15px;
line-height: 20px;
}
.loginbox a:hover {
color: red;
}
.registrybox {
width: 320px;
height: 420px;
color: #fff;
top: 10%;
left: 20%;
position: absolute;
transform: trnaslate(-50%, -50%);
}
.registrybox p {
font-weight: bold;
margin: 0;
padding: 0;
}
.registrybox input {
width: 100%;
margin-bottom: 20px;
}
.registrybox input[type="text"],
[type="password"] {
border: none;
border-bottom: 1px solid #fff;
outline: none;
background: transparent;
height: 40px;
color: #fff;
font-size: 16px;
}
.registrybox input[type="submit"] {
border: none;
outline: 0;
height: 40px;
color: #fff;
background: #fb2525;
font-size: 18px;
border-radius: 20px;
}
.registrybox input[type="submit"]:hover {
cursor: pointer;
background: red;
color: #000;
}
.registrybox a {
text-decoration: none;
color: darkgrey;
line-height: 20px;
font-size: 15px;
}
.registrybox {
display: none;
}
select {
padding: 10px;
border: none;
border-radius: 10px;
}
<div class="loginbox">
<h1>Login Here</h1>
<form>
<p>Username</p>
<input type="text" name="" placeholder="Enter Username">
<p>Password</p>
<input type="password" name="" placeholder="Enter Password">
<input type="submit" name="" value="Login">
Forgot password?<br>
Dont have an account?
</form>
</div>
<div class="registrybox">
<h1>Registration</h1>
<form>
<p>Username</p>
<input type="text" placeholder="Enter Username">
<p>E-mail</p>
<input type="text" placeholder="Enter E-mail">
<p>Password</p>
<input type="password" placeholder="Enter password">
<p>Repeat Password</p>
<input type="password" placeholder="Confirm password">
<input type="submit" value="Sign up">
<a hred="#">Already registered?</a>
<select name="dobmonth">
<option>month</option>
<option value="january">January</option>
</select>
<select name="dobyear">
<option>Year</option>
<option value="2000">2006</option>
<option value="2000">2005</option>
<option value="2000">2004</option>
<option value="2000">2003</option>
<option value="2000">2002</option>
<option value="2000">2001</option>
<option value="2000">2000</option>
<option value="2000">1999</option>
</select>
</form>
</div>
Actually getElementsByClassName() returns an array-like object with matched class name, so you will need to get the element by using [0]...Also you don't need to use . period when using getElementsByClassName()
function displayRegistry() {
document.getElementsByClassName('registrybox')[0].style.display = "block";
document.getElementsByClassName('loginbox')[0].style.display = "none";
}
function displayLogin() {
document.getElementsByClassName('registrybox')[0].style.display = "none";
document.getElementsByClassName('loginbox')[0].style.display = "block";
}
.loginbox {
width: 320px;
height: 420px;
background-color: ;
color: #fff;
top: 50%;
left: 50%;
position: absolute;
transform: translate(-50%, -50%);
padding: 50px 20px;
display: block;
}
}
h1 {
margin: 0;
padding: 0 0 20px;
text-align: center;
font-size: 22px;
}
.loginbox p {
margin: 0;
padding: 0;
font-weight: bold;
}
.loginbox input {
width: 100%;
margin-bottom: 20px;
}
.loginbox input[type="text"],
[type="password"] {
border: none;
border-bottom: 1px solid #fff;
outline: none;
background: transparent;
height: 40px;
color: #fff;
font-size: 16px;
}
.loginbox input[type="submit"] {
border: none;
outline: 0;
height: 40px;
background: #fb2525;
color: #fff;
font-size: 18px;
border-radius: 20px;
}
.loginbox input[type="submit"]:hover {
cursor: pointer;
background: red;
color: #000;
}
.loginbox a {
text-decoration: none;
color: darkgrey;
font-size: 15px;
line-height: 20px;
}
.loginbox a:hover {
color: red;
}
.registrybox {
width: 320px;
height: 420px;
color: #fff;
top: 10%;
left: 20%;
position: absolute;
transform: trnaslate(-50%, -50%);
}
.registrybox p {
font-weight: bold;
margin: 0;
padding: 0;
}
.registrybox input {
width: 100%;
margin-bottom: 20px;
}
.registrybox input[type="text"],
[type="password"] {
border: none;
border-bottom: 1px solid #fff;
outline: none;
background: transparent;
height: 40px;
color: #fff;
font-size: 16px;
}
.registrybox input[type="submit"] {
border: none;
outline: 0;
height: 40px;
color: #fff;
background: #fb2525;
font-size: 18px;
border-radius: 20px;
}
.registrybox input[type="submit"]:hover {
cursor: pointer;
background: red;
color: #000;
}
.registrybox a {
text-decoration: none;
color: darkgrey;
line-height: 20px;
font-size: 15px;
}
.registrybox {
display: none;
}
select {
padding: 10px;
border: none;
border-radius: 10px;
}
<div class="loginbox">
<h1>Login Here</h1>
<form>
<p>Username</p>
<input type="text" name="" placeholder="Enter Username">
<p>Password</p>
<input type="password" name="" placeholder="Enter Password">
<input type="submit" name="" value="Login">
Forgot password?<br>
Dont have an account?
</form>
</div>
<div class="registrybox">
<h1>Registration</h1>
<form>
<p>Username</p>
<input type="text" placeholder="Enter Username">
<p>E-mail</p>
<input type="text" placeholder="Enter E-mail">
<p>Password</p>
<input type="password" placeholder="Enter password">
<p>Repeat Password</p>
<input type="password" placeholder="Confirm password">
<input type="submit" value="Sign up">
<a hred="#" onclick="displayLogin()">Already registered?</a>
<select name="dobmonth">
<option>month</option>
<option value="january">January</option>
</select>
<select name="dobyear">
<option>Year</option>
<option value="2000">2006</option>
<option value="2000">2005</option>
<option value="2000">2004</option>
<option value="2000">2003</option>
<option value="2000">2002</option>
<option value="2000">2001</option>
<option value="2000">2000</option>
<option value="2000">1999</option>
</select>
</form>
</div>
Or you can use querySelector...
function displayRegistry() {
document.querySelector('.registrybox').style.display = "block";
document.querySelector('.loginbox').style.display = "none";
}
.loginbox {
width: 320px;
height: 420px;
background-color: ;
color: #fff;
top: 50%;
left: 50%;
position: absolute;
transform: translate(-50%, -50%);
padding: 50px 20px;
display: block;
}
}
h1 {
margin: 0;
padding: 0 0 20px;
text-align: center;
font-size: 22px;
}
.loginbox p {
margin: 0;
padding: 0;
font-weight: bold;
}
.loginbox input {
width: 100%;
margin-bottom: 20px;
}
.loginbox input[type="text"],
[type="password"] {
border: none;
border-bottom: 1px solid #fff;
outline: none;
background: transparent;
height: 40px;
color: #fff;
font-size: 16px;
}
.loginbox input[type="submit"] {
border: none;
outline: 0;
height: 40px;
background: #fb2525;
color: #fff;
font-size: 18px;
border-radius: 20px;
}
.loginbox input[type="submit"]:hover {
cursor: pointer;
background: red;
color: #000;
}
.loginbox a {
text-decoration: none;
color: darkgrey;
font-size: 15px;
line-height: 20px;
}
.loginbox a:hover {
color: red;
}
.registrybox {
width: 320px;
height: 420px;
color: #fff;
top: 10%;
left: 20%;
position: absolute;
transform: trnaslate(-50%, -50%);
}
.registrybox p {
font-weight: bold;
margin: 0;
padding: 0;
}
.registrybox input {
width: 100%;
margin-bottom: 20px;
}
.registrybox input[type="text"],
[type="password"] {
border: none;
border-bottom: 1px solid #fff;
outline: none;
background: transparent;
height: 40px;
color: #fff;
font-size: 16px;
}
.registrybox input[type="submit"] {
border: none;
outline: 0;
height: 40px;
color: #fff;
background: #fb2525;
font-size: 18px;
border-radius: 20px;
}
.registrybox input[type="submit"]:hover {
cursor: pointer;
background: red;
color: #000;
}
.registrybox a {
text-decoration: none;
color: darkgrey;
line-height: 20px;
font-size: 15px;
}
.registrybox {
display: none;
}
select {
padding: 10px;
border: none;
border-radius: 10px;
}
<div class="loginbox">
<h1>Login Here</h1>
<form>
<p>Username</p>
<input type="text" name="" placeholder="Enter Username">
<p>Password</p>
<input type="password" name="" placeholder="Enter Password">
<input type="submit" name="" value="Login">
Forgot password?<br>
Dont have an account?
</form>
</div>
<div class="registrybox">
<h1>Registration</h1>
<form>
<p>Username</p>
<input type="text" placeholder="Enter Username">
<p>E-mail</p>
<input type="text" placeholder="Enter E-mail">
<p>Password</p>
<input type="password" placeholder="Enter password">
<p>Repeat Password</p>
<input type="password" placeholder="Confirm password">
<input type="submit" value="Sign up">
<a hred="#">Already registered?</a>
<select name="dobmonth">
<option>month</option>
<option value="january">January</option>
</select>
<select name="dobyear">
<option>Year</option>
<option value="2000">2006</option>
<option value="2000">2005</option>
<option value="2000">2004</option>
<option value="2000">2003</option>
<option value="2000">2002</option>
<option value="2000">2001</option>
<option value="2000">2000</option>
<option value="2000">1999</option>
</select>
</form>
</div>
You have some mistakes in your JS code.
document.getElementsByClassName() requires only the class name. You are adding '.' in front of the classname. This wrong.
document.getElementsByClassName() returns an array of elements. In your case, you need to select first element from this array. So you need to use [0] to get the desired value
function displayRegistry() {
document.getElementsByClassName('registrybox')[0].style.display = "block";
document.getElementsByClassName('loginbox')[0].style.display = "none";
}
.loginbox {
width: 320px;
height: 420px;
background-color: ;
color: #fff;
top: 50%;
left: 50%;
position: absolute;
transform: translate(-50%, -50%);
padding: 50px 20px;
display: block;
}
}
h1 {
margin: 0;
padding: 0 0 20px;
text-align: center;
font-size: 22px;
}
.loginbox p {
margin: 0;
padding: 0;
font-weight: bold;
}
.loginbox input {
width: 100%;
margin-bottom: 20px;
}
.loginbox input[type="text"],
[type="password"] {
border: none;
border-bottom: 1px solid #fff;
outline: none;
background: transparent;
height: 40px;
color: #fff;
font-size: 16px;
}
.loginbox input[type="submit"] {
border: none;
outline: 0;
height: 40px;
background: #fb2525;
color: #fff;
font-size: 18px;
border-radius: 20px;
}
.loginbox input[type="submit"]:hover {
cursor: pointer;
background: red;
color: #000;
}
.loginbox a {
text-decoration: none;
color: darkgrey;
font-size: 15px;
line-height: 20px;
}
.loginbox a:hover {
color: red;
}
.registrybox {
width: 320px;
height: 420px;
color: #fff;
top: 10%;
left: 20%;
position: absolute;
transform: trnaslate(-50%, -50%);
}
.registrybox p {
font-weight: bold;
margin: 0;
padding: 0;
}
.registrybox input {
width: 100%;
margin-bottom: 20px;
}
.registrybox input[type="text"],
[type="password"] {
border: none;
border-bottom: 1px solid #fff;
outline: none;
background: transparent;
height: 40px;
color: #fff;
font-size: 16px;
}
.registrybox input[type="submit"] {
border: none;
outline: 0;
height: 40px;
color: #fff;
background: #fb2525;
font-size: 18px;
border-radius: 20px;
}
.registrybox input[type="submit"]:hover {
cursor: pointer;
background: red;
color: #000;
}
.registrybox a {
text-decoration: none;
color: darkgrey;
line-height: 20px;
font-size: 15px;
}
.registrybox {
display: none;
}
select {
padding: 10px;
border: none;
border-radius: 10px;
}
<div class="loginbox">
<h1>Login Here</h1>
<form>
<p>Username</p>
<input type="text" name="" placeholder="Enter Username">
<p>Password</p>
<input type="password" name="" placeholder="Enter Password">
<input type="submit" name="" value="Login">
Forgot password?<br>
Dont have an account?
</form>
</div>
<div class="registrybox">
<h1>Registration</h1>
<form>
<p>Username</p>
<input type="text" placeholder="Enter Username">
<p>E-mail</p>
<input type="text" placeholder="Enter E-mail">
<p>Password</p>
<input type="password" placeholder="Enter password">
<p>Repeat Password</p>
<input type="password" placeholder="Confirm password">
<input type="submit" value="Sign up">
<a hred="#">Already registered?</a>
<select name="dobmonth">
<option>month</option>
<option value="january">January</option>
</select>
<select name="dobyear">
<option>Year</option>
<option value="2000">2006</option>
<option value="2000">2005</option>
<option value="2000">2004</option>
<option value="2000">2003</option>
<option value="2000">2002</option>
<option value="2000">2001</option>
<option value="2000">2000</option>
<option value="2000">1999</option>
</select>
</form>
</div>
Try this.
function displayRegistry() {
document.getElementsByClassName('registrybox')[0].style.display = "block";
document.getElementsByClassName('loginbox')[0].style.display = "none";
}
.loginbox {
width: 320px;
height: 420px;
background-color: ;
color: #fff;
top: 50%;
left: 50%;
position: absolute;
transform: translate(-50%, -50%);
padding: 50px 20px;
display: block;
}
}
h1 {
margin: 0;
padding: 0 0 20px;
text-align: center;
font-size: 22px;
}
.loginbox p {
margin: 0;
padding: 0;
font-weight: bold;
}
.loginbox input {
width: 100%;
margin-bottom: 20px;
}
.loginbox input[type="text"],
[type="password"] {
border: none;
border-bottom: 1px solid #fff;
outline: none;
background: transparent;
height: 40px;
color: #fff;
font-size: 16px;
}
.loginbox input[type="submit"] {
border: none;
outline: 0;
height: 40px;
background: #fb2525;
color: #fff;
font-size: 18px;
border-radius: 20px;
}
.loginbox input[type="submit"]:hover {
cursor: pointer;
background: red;
color: #000;
}
.loginbox a {
text-decoration: none;
color: darkgrey;
font-size: 15px;
line-height: 20px;
}
.loginbox a:hover {
color: red;
}
.registrybox {
width: 320px;
height: 420px;
color: #fff;
top: 10%;
left: 20%;
position: absolute;
transform: trnaslate(-50%, -50%);
}
.registrybox p {
font-weight: bold;
margin: 0;
padding: 0;
}
.registrybox input {
width: 100%;
margin-bottom: 20px;
}
.registrybox input[type="text"],
[type="password"] {
border: none;
border-bottom: 1px solid #fff;
outline: none;
background: transparent;
height: 40px;
color: #fff;
font-size: 16px;
}
.registrybox input[type="submit"] {
border: none;
outline: 0;
height: 40px;
color: #fff;
background: #fb2525;
font-size: 18px;
border-radius: 20px;
}
.registrybox input[type="submit"]:hover {
cursor: pointer;
background: red;
color: #000;
}
.registrybox a {
text-decoration: none;
color: darkgrey;
line-height: 20px;
font-size: 15px;
}
.registrybox {
display: none;
}
select {
padding: 10px;
border: none;
border-radius: 10px;
}
<div class="loginbox">
<h1>Login Here</h1>
<form>
<p>Username</p>
<input type="text" name="" placeholder="Enter Username">
<p>Password</p>
<input type="password" name="" placeholder="Enter Password">
<input type="submit" name="" value="Login">
Forgot password?<br>
Dont have an account?
</form>
</div>
<div class="registrybox">
<h1>Registration</h1>
<form>
<p>Username</p>
<input type="text" placeholder="Enter Username">
<p>E-mail</p>
<input type="text" placeholder="Enter E-mail">
<p>Password</p>
<input type="password" placeholder="Enter password">
<p>Repeat Password</p>
<input type="password" placeholder="Confirm password">
<input type="submit" value="Sign up">
<a hred="#">Already registered?</a>
<select name="dobmonth">
<option>month</option>
<option value="january">January</option>
</select>
<select name="dobyear">
<option>Year</option>
<option value="2000">2006</option>
<option value="2000">2005</option>
<option value="2000">2004</option>
<option value="2000">2003</option>
<option value="2000">2002</option>
<option value="2000">2001</option>
<option value="2000">2000</option>
<option value="2000">1999</option>
</select>
</form>
</div>
If you want to alternative with jquery u can use this i can't do it here because i can't add jquery
Fiddle Example
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 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.
I seen this on a website, where the placeholder text "Pounds" remains on top of input box. Example:
How exactly is that accomplished?
<div id="my-ajax-filter-search">
<form action="" method="post">
<label id="label-lg">Weight</label>
<input type="text" name="search" id="search" value="" >
<input type="submit" id="submit" name="submit" value="See shipping rates" />
</form>
<ul ></ul>
<section class="elementor-section elementor-inner-section elementor-element elementor-element-784a76e1 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="784a76e1" data-element_type="section">
<div id="ajax_filter_search_results" class="elementor-container elementor-column-gap-no np-wrap">
</div>
</section>
</div>
CSS:
.input-text {
min-width: 84px;
}div#my-ajax-filter-search input#search , label#label-lg {
max-width: 250px;
margin: 0 auto;
display: block;
border-radius: 5px;
}
label#label-lg {
color: #fff;
margin-bottom: 6px;
font-weight: bold;
}
div#my-ajax-filter-search input#submit:focus {
outline: none;
}
div#my-ajax-filter-search input#submit {
max-width: 192px;
display: block;
width: 100%;
margin: 15px auto;
background: #fff;
font-family: "Montserrat", Sans-serif;
fill: #373278;
color: #373278;
background-color: #ffffff;
border-style: solid;
border-width: 1px 1px 1px 1px;
border-color: #ffffff;
border-radius: 50px 50px 50px 50px;
box-shadow: 0px 10px 30px -8px rgb(0 0 0 / 16%);
}
div#my-ajax-filter-search input#submit:hover {
color: #ffffff;
background-color: rgba(255,255,255,0);
border-color: #ffffff;
}
.elementor-price-table__feature-inner input {
min-width: 1px;
}
.elementor-2 .elementor-element.elementor-element-1257087d .elementor-price-table__feature-inner {
margin: 0;
}
.elementor-2 .elementor-element.elementor-element-1257087d .elementor-price-table__feature-inner .quantity {
max-width: 67px;
margin: 0 auto;
}
.elementor-2 .elementor-element.elementor-element-1257087d .elementor-price-table__feature-inner a.add_cart.button.product_type_simple {
max-width: 106px;
margin: 12px auto;
display: block;
padding: 17px;
border-radius: 10px;
border: 1px solid;
background: #00a8ff;
color: #fff;
}
You can use this code
body {
font-family: sans-serif;
}
.label-before, .field input:focus + label::before, .field input:valid + label::before {
line-height: 15px;
font-size: 12px;
top: 5px;
background: #fff;
padding: 0 6px;
left: 9px;
}
.field {
position: relative;
margin-bottom: 15px;
margin-top:10px;
display:inline-block;
}
.field label::before {
content: attr(title);
position: absolute;
top: 10px;
left: 15px;
line-height: 30px;
font-size: 14px;
color: #777;
transition: 300ms all;
}
.field input {
width: auto;
height: 50px;
padding: 0px 15px;
padding-top:12px;
box-sizing: border-box;
font-size: 14px;
color: #222;
border: 1px solid #ccc;
border-radius: 3px;
text-align: center;
}
.field input:focus {
outline: 0;
border-color: blue;
}
.field input:valid + label::before {
content: attr(data-title);
}
.field input:focus + label::before {
color: blue;
}
<div id="my-ajax-filter-search">
<form action="" method="post">
<div class="control-group">
<div>
<label id="label-lg">Weight</label>
</div>
<div class="field">
<input type="text" required autocomplete="off" name="search" id="search" value="" >
<label for="search" title="Pounds" data-title="Pounds"></label>
</div>
</div>
<input type="submit" id="submit" name="submit" value="See shipping rates" />
</form>
<ul ></ul>
<section class="elementor-section elementor-inner-section elementor-element elementor-element-784a76e1 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="784a76e1" data-element_type="section">
<div id="ajax_filter_search_results" class="elementor-container elementor-column-gap-no np-wrap">
</div>
</section>
</div>
company.html
<section class="main">
<h1>Company Management</h1>
<md-card>
<button class="md-fab md-mini add-task" md-mini-fab title="Add" (click)="addCompany.show()">
<md-icon style="color:white;">add</md-icon>
</button>
<div class="table-responsive">
<table class="table adminTable">
<thead>
<th>Name</th>
<th>Email</th>
<th>country</th>
<th>Action</th>
</thead>
<tbody>
<tr *ngFor="let company of companies">
<td>{{company.user_name}}</td>
<td>{{company.email}}</td>
<td>{{company.country}}</td>
<td>
<button class="btn" md-raised-button>Guide</button>
<button class="btn" md-raised-button>Pin</button>
<button class="iconBtn first">
<i class="fa fa-pencil" aria-hidden="true"></i>
</button>
<button class="iconBtn second">
<i class="fa fa-trash-o" aria-hidden="true"></i>
</button>
</td>
</tr>
</tbody>
</table>
</div>
</md-card>
</section>
<div bsModal #addCompany="bs-modal" class="modal fade " tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-md">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Add Company</h4>
</div>
<div class="modal-body row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<md-input-container class="mat-input-container ng-pristine ng-valid ng-touched">
<input type="text" class="ng-pristine ng-valid mat-input-element ng-touched" id="md-input-33" aria-describedby="" mdInput name="email" pattern="^\w+([\.-]?\w+)*#\w+([\.-]?\w+)*(\.\w{2,3})+$" placeholder="E-mail" [(ngModel)]="email" required>
<div class="mat-input-underline"><span class="mat-input-ripple"></span></div>
</md-input-container>
<md-input-container class="mat-input-container ng-pristine ng-valid ng-touched">
<input type="password" class="ng-pristine ng-valid mat-input-element ng-touched" id="md-input-33" aria-describedby="" mdInput name="password" placeholder="Password" [(ngModel)]="password" required>
<div class="mat-input-underline"><span class="mat-input-ripple"></span></div>
</md-input-container>
<div class="col-lg-1 col-md-1 col-sm-1 col-xs-1">
<mat-slide-toggle class="mat-slide-toggle ng-valid ng-dirty ng-touched"> Active </mat-slide-toggle>
</div>
<md-input-container class="mat-input-container ng-pristine ng-valid ng-touched">
<input type="text" class="ng-pristine ng-valid mat-input-element ng-touched" id="md-input-33" aria-describedby="" mdInput name="username" placeholder="User name" [(ngModel)]="username" required>
<div class="mat-input-underline"><span class="mat-input-ripple"></span></div>
</md-input-container>
<md-input-container class="mat-input-container ng-pristine ng-valid ng-touched">
<input type="text" class="ng-pristine ng-valid mat-input-element ng-touched" id="md-input-33" aria-describedby="" mdInput name="country" placeholder="Country" [(ngModel)]="country" required>
<div class="mat-input-underline"><span class="mat-input-ripple"></span></div>
</md-input-container>
<div class="form-group">
<label class="mat-input-container ng-pristine ng-valid ng-touched"> Membership* </label>
<ng-select [options]="status" name="option" [(ngModel)]="option" class="filterDropDown"></ng-select>
</div>
<div class="col-lg-1 col-md-1 col-sm-1 col-xs-1">
<mat-slide-toggle class="mat-slide-toggle ng-valid ng-dirty ng-touched">Is notification on</mat-slide-toggle>
<mat-slide-toggle class="mat-slide-toggle ng-valid ng-dirty ng-touched">Is GPS on</mat-slide-toggle>
</div>
</div>
</div>
<div class="modal-footer cat-btn">
<button md-raised-button class="md-raised cancel color-white" (click)="addCompany.hide()">Cancel</button>
<button md-raised-button class="md-raised save color-white">Save</button>
</div>
</div>
</div>
</div>
styles.css
.row {
margin: 0px !important;
}
ul li {
list-style-type: none;
}
.loginMainDiv {
position: fixed;
height: 100%;
width: 100%;
background: #55595c;
top: 0px;
z-index: 9999999999999;
}
.btn-info.disabled,
.btn-info:disabled {
background-color: #17a2b8;
border-color: #17a2b8;
cursor: no-drop;
}
.loginpageForm {
margin: 100px auto auto auto;
width: 370px;
height: auto;
background-color: white;
padding: 60px 15px 70px 15px;
}
.loginpageForm h2 {
font-family: 'Roboto', sans-serif;
color: #b7b7b7;
text-align: center;
font-size: 20px;
line-height: 25px;
margin-bottom: 45px;
}
.loginpageForm .form-group {
margin-bottom: 25px;
}
.loginbtn {
margin-top: 35px;
}
.loginbtn button {
cursor: pointer;
width: 92%;
margin: auto;
margin-left: 4%;
font-family: Tahoma;
font-size: 18px;
transition: all 0.4s linear;
height: 45px;
margin-top: 0px;
margin-bottom: 15px;
}
.loginbtn button:hover {
background-color: floralwhite;
color: #00b8e6;
transition: all 0.4s linear;
transform: translateY(-0.20em);
}
p.forgetpwd {
font-size: 16px;
margin: auto;
text-align: right;
font-family: Arial;
letter-spacing: 0.7px;
margin-right: 16px;
color: #b7b7b7;
}
.loginpageForm input {
color: #b7b7b7;
}
.forgetpwd a {
cursor: pointer;
color: #0275d8 !important;
}
.forgetpwd a:hover {
color: #014c8c !important;
text-decoration: underline !important;
}
.error {
padding-left: 8px !important;
margin-top: -20px;
margin-bottom: 10px;
color: red;
}
button.navbar-toggle {
border: 0px;
background: none;
cursor: pointer;
outline: none !important;
padding: 0px;
}
header {
background-color: #55595c;
padding: 20px 15px;
position: fixed;
width: 100%;
top: 0px;
z-index: 99999;
}
.admin {
text-align: right;
}
.admin span {
color: white;
font-family: 'Roboto', sans-serif;
font-size: 22px;
letter-spacing: 0.8px;
position: fixed;
top: 0px;
padding-top: 20px;
right: 20px;
padding-bottom: 10px;
padding-left: 25px;
padding-right: 25px;
cursor: pointer;
}
.admin span:hover {
color: #55595c;
background-color: white;
box-shadow: 0px 2px 3px rgba(0, 0, 0, .2);
}
.admin span img {
margin-left: 15px;
}
header img {
border-radius: 100%;
width: 50px;
min-height: 50px;
}
.col-xs-6 {
max-width: 50%;
}
.logoutDiv {
color: white;
font-family: 'Roboto', sans-serif;
font-size: 20px;
letter-spacing: 0.8px;
position: fixed;
margin-top: 10px;
padding-top: 25px;
right: 20px;
padding-bottom: 15px;
padding-left: 43px;
padding-right: 35px;
display: none;
background-color: white;
box-shadow: 0px 2px 3px rgba(0, 0, 0, .2);
}
.logoutDiv i {
margin-right: 20px;
color: #7e8890;
font-size: 18px;
}
.logoutDiv h4:hover {
color: #64bbfb;
}
.logoutDiv h4:hover i {
color: #64bbfb;
}
.admin span:hover .logoutDiv {
display: block;
color: #55595c;
}
.navigation {
width: 100%;
background-color: #676a6d;
height: 75px;
margin-top: -16px;
padding: 0 7.4%;
margin-top: 90px;
0 3px 1px -2px rgba(0, 0, 0, .2),
0 2px 2px 0 rgba(0, 0, 0, .14),
0 1px 5px 0 rgba(0, 0, 0, .12)
}
.navigation ul {
padding: 0px;
}
.navigation ul li {
float: left;
height: 75px;
display: block;
padding: 22px 35px;
font-size: 20px;
font-family: 'Roboto', sans-serif;
color: white;
letter-spacing: 0.5px;
cursor: pointer;
transition: all 0.3s ease-in;
outline: none !important
}
li.activeTab {
background-color: rgb(248, 248, 248);
color: #4d87c5 !important;
cursor: context-menu !important;
}
.navigation ul li:hover {
background-color: rgb(248, 248, 248);
color: #4d87c5;
}
footer {
bottom: 0px;
width: 100%;
background-color: #55595c;
padding: 30px 0;
}
.no-padding {
padding: 0 !important;
}
.padingClass {
padding: 0 7.4%;
}
footer p,
footer p a {
font-family: 'Roboto', sans-serif;
font-weight: 400;
color: #ecf0f1;
font-size: 18px;
text-decoration: none;
margin: 6px 0 0;
transition: all 0.3s linear;
}
footer p a:hover,
footer p a:active,
footer p a:focus {
color: darkgray
}
.back-fa {
background: #fff;
border-radius: 30px;
}
.social-bar li {
float: left;
margin: 5px 10px;
}
.social-bar li a {
color: #434343;
-webkit-transition: all 300ms linear 0s;
transition: all 300ms linear 0s;
}
.social-bar li a:hover {
color: #4d88c6;
}
.main h1 {
margin-top: 10px;
font-family: 'Roboto', sans-serif;
font-size: 30px;
color: #55595c;
margin-bottom: 40px;
}
section.main {
padding: 30px 7.4%;
}
.add-task {
position: absolute !important;
float: right;
right: 2%;
top: -22px;
overflow: hidden;
background-color: #58B6A2 !important;
outline: none !important;
width: 50px !important;
height: 50px !important;
}
.add-task md-icon {
font-size: 28px;
line-height: 33px !important;
height: 32px;
width: 32px;
}
.add-task:hover {
background-color: #367c6d !important;
}
md-card {
padding: 50px 0px !important;
background: white;
}
.md-content {
padding-bottom: 0px;
font-family: 'roboto', sans-serif;
color: #727272;
text-align: center;
white-space: nowrap;
}
.title {
text-align: center;
}
.title span {
font-family: 'Roboto', sans-serif;
font-size: 22px;
color: #727272;
letter-spacing: 0.5px;
}
.content span {
color: #727272;
cursor: pointer;
font-size: 16px;
}
.content span:hover {
color: #333;
}
.iconBtn {
background: none;
border: 0px;
padding: 0px;
outline: none !important;
margin-right: 10px;
}
.iconBtn i {
color: #727272;
cursor: pointer;
font-size: 18px;
}
.iconBtn i:hover {
color: #333;
}
.cat-img {
width: 75px;
height: 60px;
}
.adminTable th {
border-top: 0px !important;
text-align: center;
font-family: 'Roboto', sans-serif;
color: #727272;
}
.adminTable td {
text-align: center;
font-family: 'Roboto', sans-serif;
color: #727272;
}
.box {
margin-bottom: 25px;
width: 200px;
height: 40px;
color: #727272;
padding: 5px;
cursor: pointer;
outline: none !important
}
.page {
float: right;
margin-right: 5%;
cursor: pointer;
font-size: 22px;
}
.page .current {
cursor: pointer !important;
background: #58B6A2 !important;
}
.page a:hover,
.page button:hover {
background: none !important;
text-decoration: none !important;
}
.page .disabled {
cursor: no-drop !important;
}
.page a::after,
.page .disabled::after,
.page a::before,
.page .disabled::before {
content: none !important;
}
li.pagination-next,
li.pagination-previous {
font-size: 43px;
position: relative;
top: 7px;
}
td .btn {
color: white;
margin-right: 5px;
margin-bottom: 10px;
background-color: #58B6A2 ;
}
td .btn:hover {
background-color: #367c6d ;
}
.modal {
z-index: 999999999 !important;
top: 30px !important;
box-shadow: 1px 2px 5px #000000;
}
.modal.fade.in {
opacity: 1;
background-color: rgba(0, 0, 0, 0.6);
}
.modal-content {
border-radius: 6px !important;
margin: 180px auto auto auto !important;
}
.modal-header {
background-color: #58B6A2 ;
color: white;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
.modal-title {
margin:auto;
}
.modal-body {
padding: 30px 40px 15px 40px !important;
}
.form-group {
margin-top: 15px;
}
.filterDropDown {
margin-bottom: 20px;
}
.mat-input-container {
width: 100%;
color: #727272 !important;
}
.mat-input-underline .mat-input-ripple.mat-focused {
background-color: #58B6A2 !important;
}
.mat-input-placeholder:not(.mat-empty),
.mat-input-placeholder.mat-focused {
color: #58B6A2 !important;
font-weight: 700 !important;
padding-left: 8px;
}
.toggleClass md-slide-toggle {
float: right;
margin: auto 40px auto auto;
}
.mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-bar {
background-color: #58B6A2 !important;
opacity: 0.4;
cursor:pointer;
}
.mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb {
background-color: #58B6A2 !important;
}
.mat-slide-toggle-thumb {
cursor: pointer;
background-color: white;
overflow: hidden;
}
.mat-slide-toggle-bar {
background-color: gray;
}
.mat-slide-toggle-container {
cursor: pointer !important;
overflow: hidden;
}
.mat-slide-toggle-input {
margin-left: -15px;
}
.cat-btn .cancel {
color: white;
background-color: #FF5252;
outline: none !important;
}
.cat-btn .save {
color: white;
outline: none !important;
cursor: no-drop;
}
.cat-btn .cancel:hover , .cat-btn .save:hover {
box-shadow: 5px 5px 5px grey;
}
company.component.ts
import { Component } from '#angular/core';
import { Router } from '#angular/router';
#Component({
templateUrl: './company.html'
})
export class CompanyComponent {
companies = [{"user_name":"company1","email":"test#test.com","country":"India"},
{"user_name":"company2","email":"test1#test.com","country":"India"},
{"user_name":"company3","email":"test2#test.com","country":"India"},
{"user_name":"company4","email":"test3#test.com","country":"India"},
{"user_name":"company5","email":"test4#test.com","country":"India"},
];
status = [{ label: 'Free' }, { label: 'Premium'}];
}
how to fix this overlapping issue of select-box options and toggle-buttons
here,
in the output when i click-on select-box(membership) its also displaying the toggle buttons over the options of the select-box
in simple they(select-box options and toggle buttons) are overlapping
help me in fixing this problem
I can not figure out why this is happening. I have a link that is a child element to a button, and it is supposed to bring you to a different part of the page when it is activated. The link works in Chrome, but when I try and load the page on Internet Explorer, the links don't work. This is my HTML and CSS for this part of the site:
HTML:
<form method="get" action="http://www.google.com/search" target="_blank">
<div style="border:1px solid black;padding:4px;width:20em;float:right;display: inline-block;">
<table border="0" align="center" cellpadding="0">
<tr><td>
<input type="text" name="q" size="25"
maxlength="255" value=""/>
<input type="submit" value="Google Search" /></td></tr>
<tr><td align="center" style="font-size:75%">
</td></tr></table>
</div>
</form>
<div id="score_container">
<button id="cubs_score">How are the Cubs Doing?</button>
<button id="packers_score">How are the Packers Doing?</button>
</div>
CSS:
#cubs_score{
width: 300px;
height: 100px;
color: #CC3433 !important;
background-color: #0E3386;
font-size: 30px;
text-align: center;
font-variant: small-caps;
padding: 10px;
margin: auto;
z-index: 3;
position: relative;
text-decoration: none;
}
#packers_score{
width: 300px;
height: 100px;
color: #FFB612 !important;
background-color: #203731;
font-size: 30px;
text-align: center;
font-variant: small-caps;
padding: 10px;
margin: auto;
position: relative;
z-index: 3;
text-decoration: none;
}
#score_container{
width: 310px;
height: 200px;
padding: 20px;
background-color: grey;
z-index: 2;
color: inherit;
}
The versions of IE that I have checked in are 10 and 11.
According to Phrasing_content a button can contain
<a>, if it contains only phrasing content.
So it is not an error.
But there is a different behaviour between the two browsers, so I added some jQuery code:
$(function () {
$('#score_container button').on('click', function(e) {
e.preventDefault();
e.stopPropagation();
window.location.hash = this.childNodes[0].getAttribute('href');
});
});
#cubs_score{
width: 300px;
height: 100px;
color: #CC3433 !important;
background-color: #0E3386;
font-size: 30px;
text-align: center;
font-variant: small-caps;
padding: 10px;
margin: auto;
z-index: 3;
position: relative;
text-decoration: none;
}
#packers_score{
width: 300px;
height: 100px;
color: #FFB612 !important;
background-color: #203731;
font-size: 30px;
text-align: center;
font-variant: small-caps;
padding: 10px;
margin: auto;
position: relative;
z-index: 3;
text-decoration: none;
}
#score_container{
width: 310px;
height: 200px;
padding: 20px;
background-color: grey;
z-index: 2;
color: inherit;
}
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<form method="get" action="http://www.google.com/search" target="_blank">
<div style="border:1px solid black;padding:4px;width:20em;float:right;display: inline-block;">
<table border="0" align="center" cellpadding="0">
<tr><td>
<input type="text" name="q" size="25"
maxlength="255" value=""/>
<input type="submit" value="Google Search" /></td></tr>
<tr><td align="center" style="font-size:75%">
</td></tr></table>
</div>
</form>
<div id="score_container">
<button id="cubs_score">How are the Cubs Doing?</button>
<button id="packers_score">How are the Packers Doing?</button>
</div>
In the comments, you were wondering how to style a button to have cool effects like a link. Here is an example of that:
#link {
text-decoration: none;
color: #FFF;
background-color: #006400;
transition: background-color.2s, color .2s;
padding-left: 20px;
padding-right: 20px;
padding-top: 10px;
padding-bottom: 10px;
border-radius: 4px;
}
#link:visited {
text-decoration: none;
color: #FFF;
background-color: #006400;
transition: background-color.2s, color .2s;
padding-left: 20px;
padding-right: 20px;
padding-top: 10px;
padding-bottom: 10px;
border-radius: 4px;
}
#link:hover {
text-decoration: none;
color: #006400;
background-color: #FFF;
transition: background-color.2s, color .2s;
padding-left: 20px;
padding-right: 20px;
padding-top: 10px;
padding-bottom: 10px;
border-radius: 4px;
}
#link:active {
text-decoration: none;
color: #056905;
background-color: #EEE;
transition: background-color.2s, color .2s;
padding-left: 20px;
padding-right: 20px;
padding-top: 10px;
padding-bottom: 10px;
border-radius: 4px;
}
<a id="link" href="http://www.stackoverflow.com">Stack Overflow</a>
Hope that this helps you finish your project!