Dropdown menu closes when i click it (anywhere)

Dropdown menu closes when i click it (anywhere) - javascript

I have a dropdown menu with a login/register form, but when i try to click the form content, the menu closes.
I tried to do something with Javascript that it only closes when i click the "X" button but i wasnt sucessful. Here's the code:
with the hamburguer menu closed
with the hamburguer menu open
function animaIcon(x){
x.classList.toggle("change");
}
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
$('.container').on('click', function() {
if ($('.dropdown-content').css('opacity')==0) $('.dropdown-content').css('opacity', 0.95);
else $('.dropdown-content').css('opacity', 0);
});
/* HAMBURGUER MENU */
.icone-menu {
width: 100%;
float: right;
padding: 18px 8%;
}
.container {
display: block;
cursor: pointer;
float: right;
position: relative;
}
.dropdown-content {
display: none;
background-color: #111;
width: 100vw;
height: 100vh;
margin-top: -55px;
margin-left: -310px;
position: absolute;
opacity: 0;
-webkit-transition: all 1s ease-in-out;
}
.dropdown-content a {
font-weight: bold;
font-size: 150%;
color: white;
padding: 100px 18px;
display: block;
float: left;
}
.down-botao a {
color: #11E77C;
font-weight: bold;
}
.dropdown-content button {
padding: 10px;
width: 40%;
margin-left: 15px;
font-weight: bolder;
border-radius: 15px;
background-color: black;
border-style: solid;
border-color: #dd3910;
color: white;
}
.modal {
background-color: #fff;
width: 400px;
padding: 30px;
position: fixed;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
min-height: 420px;
}
.tab {
float: left;
&:first-of-type {
margin-right: 15px;
}
}
.dropdown-content a:hover {
color: #13c7ae;
}
.show {
display: block;
}
.bar1, .bar2, .bar3 {
width: 35px;
height: 5px;
background-color: white;
margin: 6px auto;
transition: 0.4s;
position: relative;
z-index: 1000
}
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-45deg) translate(-9px, 6px);
}
.change .bar2 {
opacity: 0;
}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
}
<nav class="icone-menu">
<img src="img/logo.png" alt="crossagenda" class="logo-mobile">
<div class="container" onclick="animaIcon(this), myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
<div id="myDropdown" class="dropdown-content">
<ul>
<li>Home</li>
<li>What</li>
<li class="down-botao">Download</li>
</ul>
<div class="modal">
<div class="tab">
<input type="radio" id="sign-in" name="options" class="option" checked/>
<label for="sign-in">Sign in</label>
<form action="#" class="form">
<p class="float-label">
<label for="username">Username</label>
<input type="text" id="username" name="username" placeholder="Username"/>
</p>
<p class="float-label">
<label for="password">Password</label>
<input type="password" id="password" name="password" placeholder="Password"/>
</p>
<p>
<input type="submit" value="Sign me in"/>
</p>
<div class="forgot"> Forgot your password? </div>
</form>
</div>
<div class="tab">
<input type="radio" id="sign-up" name="options" class="option"/>
<label for="sign-up">Sign up</label>
<form action="#" class="form">
<p class="float-label">
<label for="email">Email</label>
<input type="email" id="email" name="email" placeholder="Email"/>
</p>
<p class="float-label">
<label for="password">Password</label>
<input type="password" id="password" name="password" placeholder="Password"/>
</p>
<p class="float-label">
<label for="confirm-password">Confirm password</label>
<input type="password" id="confirm-password" name="confirm-password" placeholder="Confirm password"/>
</p>
<p class="toggle">
<label for="accept">
<input type="checkbox" id="accept" name="accept"/>
I accept the Terms & Services</label>
</p>
<p>
<input type="submit" value="Sign me up"/>
</p>
</form>
</div>
</div>
</div>
</div>

Here is what is happening when a user clicks an element inside .container:
The click event is trigger on the target element
The event travels toward the root of the DOM, triggering itself on each element it finds along the way (the term "triggering" may be misleading; the event is only "triggered" once).
When it gets to .container, your callback function is invoked and the drop-down menu is collapsed.
To resolve this issue, make sure any click events for elements within .container (that you would like to NOT trigger the drop-down menu's collapse) stop propagation of that event.
$('.container .buttons').on('click',function(e) {
e.stopPropagation();
// do whatever
});

function animaIcon(x) {
x.classList.toggle("change");
}
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
$('.modal').toggle();
}
$('.container').on('click', function() {
if ($('.dropdown-content').css('opacity') == 0) $('.dropdown-content').css('opacity', 0.95);
else $('.dropdown-content').css('opacity', 0);
});
body {
background-color: blue;
}
/* HAMBURGUER MENU */
.icone-menu {
width: 100%;
float: right;
padding: 18px 8%;
}
.container {
display: block;
cursor: pointer;
float: right;
position: relative;
}
.dropdown-content {
/*display: none;*/
background-color: #111;
width: 100vw;
height: 100vh;
margin-top: -55px;
margin-left: -310px;
position: absolute;
opacity: 0;
-webkit-transition: all 1s ease-in-out;
}
.dropdown-content a {
font-weight: bold;
font-size: 150%;
color: white;
padding: 100px 18px;
display: block;
float: left;
}
.down-botao a {
color: #11E77C;
font-weight: bold;
}
.dropdown-content button {
padding: 10px;
width: 40%;
margin-left: 15px;
font-weight: bolder;
border-radius: 15px;
background-color: black;
border-style: solid;
border-color: #dd3910;
color: white;
}
.modal {
background-color: #fff;
width: 400px;
padding: 30px;
position: fixed;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
min-height: 420px;
display: none;
}
.tab {
float: left;
}
tab:first-of-type {
margin-right: 15px;
}
.dropdown-content a:hover {
color: #13c7ae;
}
.show {
opacity: 0.95;
transition: opacity 1s ease-in-out;
}
.bar1,
.bar2,
.bar3 {
width: 35px;
height: 5px;
background-color: white;
margin: 6px auto;
transition: 0.4s;
position: relative;
z-index: 1000;
}
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-45deg) translate(-9px, 6px);
}
.change .bar2 {
opacity: 0;
}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<nav class="icone-menu">
<a href="index.html">
<img src="img/logo.png" alt="crossagenda" class="logo-mobile">
</a>
<div class="container" onclick="animaIcon(this), myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
<div id="myDropdown" class="dropdown-content">
<ul>
<li>Home
</li>
<li>What
</li>
<li class="down-botao">Download
</li>
</ul>
</div>
</div>
<div class="modal">
<div class="tab">
<input type="radio" id="sign-in" name="options" class="option" checked />
<label for="sign-in">Sign in</label>
<form action="#" class="form">
<p class="float-label">
<label for="username">Username</label>
<input type="text" id="username" name="username" placeholder="Username" />
</p>
<p class="float-label">
<label for="password">Password</label>
<input type="password" id="password" name="password" placeholder="Password" />
</p>
<p>
<input type="submit" value="Sign me in" />
</p>
<div class="forgot">
Forgot your password?
</div>
</form>
</div>
<div class="tab">
<input type="radio" id="sign-up" name="options" class="option" />
<label for="sign-up">Sign up</label>
<form action="#" class="form">
<p class="float-label">
<label for="email">Email</label>
<input type="email" id="email" name="email" placeholder="Email" />
</p>
<p class="float-label">
<label for="password">Password</label>
<input type="password" id="password" name="password" placeholder="Password" />
</p>
<p class="float-label">
<label for="confirm-password">Confirm password</label>
<input type="password" id="confirm-password" name="confirm-password" placeholder="Confirm password" />
</p>
<p class="toggle">
<label for="accept">
<input type="checkbox" id="accept" name="accept" />I accept the Terms & Services
</label>
</p>
<p>
<input type="submit" value="Sign me up" />
</p>
</form>
</div>
</div>
</nav>

Ok, was able to fix it using this javascript code:
$( "#btn-menu" ).click(function() {
$(".dropdown-content").toggle("slow");
});

Related

I am attempting to refactor my JS, for CSS/JS form validation

I am struggling to figure out how to refactor my JS for form validation. I figured out how to target each element using there ID, I just feel there has to be a better way to clean up this code using an array though. Any help would be appreciated. The commented out JS was my attempt at beginning to refactor.
"use strict"
//clunky code for error-img:
const fNameInput = document.getElementById("first-input");
const lNameInput = document.getElementById("last-input");
const emailInput = document.getElementById("email");
const passwordInput = document.getElementById("password");
fNameInput.addEventListener("blur", function(){
const errorImg1 = document.getElementById("error-img1");
if(!fNameInput.value){
errorImg1.classList.add("visible");
} else{
errorImg1.classList.remove("visible");
}
});
lNameInput.addEventListener("blur", function(){
const errorImg2 = document.getElementById("error-img2");
if(!lNameInput.value){
errorImg2.classList.add("visible");
} else{
errorImg2.classList.remove("visible");
}
});
emailInput.addEventListener("blur", function(){
const errorImg3 = document.getElementById("error-img3");
if(!emailInput.value){
errorImg3.classList.add("visible");
} else{
errorImg3.classList.remove("visible");
}
});
passwordInput.addEventListener("blur", function(){
const errorImg4 = document.getElementById("error-img4");
if(!passwordInput.value){
errorImg4.classList.add("visible");
} else{
errorImg4.classList.remove("visible");
}
});
// attempt at making clean code that applies to all inputs:
// const inputs = document.getElementsByTagName("input");
// const errorImgs = document.getElementsByClassName("error-img");
// //learn forEach loop:
// inputs[i].addEventListener("blur", () => {
// inputs.forEach(element => {
// if(!element.value){
// }
// });
// });
#import url(https://fonts.googleapis.com/css2?family=Poppins:wght#400;500;600;700&display=swap);
body{
margin: 0;
background-image: url(images/bg-intro-desktop.png);
background-color: rgba(255, 0, 0, .5);
font-family: 'Poppins', sans-serif;
}
.container{
margin: 6rem auto;
height: auto;
width: 70%;
display: grid;
grid-template-areas:
"left right"
"left right";
grid-auto-columns: minmax(0, 32rem);
}
.left-container{
grid-area: left;
}
.left-heading{
color: white;
font-size: 2.7rem;
line-height: 3rem;
font-weight: 700;
position: relative;
top: 30%;
}
.left-content{
color: white;
font-size: .9rem;
font-weight: 400;
position: relative;
top: 29%;
}
.right-container{
grid-area: right;
}
.right-top-container{
background-color: hsl(248, 32%, 49%);
border-radius: .5rem;
height: 11.5%;
margin: auto auto 1.5rem auto;
box-shadow: 0px 6px 1px rgba(0, 0, 0, .2);
}
.top-text-special{
color: white;
font-weight: 600;
font-size: .85rem;
position: relative;
top: 50%;
left: 72%;
transform: translate(-50%, -50%);
}
.top-text{
color: white;
font-weight: 400;
}
.right-form{
background-color: white;
height: 23rem;
border-radius: .5rem;
padding: 1.5rem;
padding-top: 2.5rem;
box-shadow: 0 7px 1px rgba(0, 0, 0, .15);
display: grid;
grid-template-areas:
"fname"
"lname"
"email"
"password"
"submit-btn"
"bottom-text";
}
input{
font-family: 'Poppins', sans-serif;
font-weight: 500;
font-size: .8rem;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 0 0 0 1.5rem;
height: 3rem;
width: 90%;
border: solid;
border-width: .09rem;
border-radius: .4rem;
border-color: hsl(246, 25%, 77%);
}
.first-name-div{
grid-area: fname;
position: relative;
}
.last-name-div{
grid-area: lname;
position: relative;
}
.email-div{
grid-area: email;
position: relative;
}
.password-div{
grid-area: password;
position: relative;
}
.submit-btn-div{
grid-area: submit-btn;
}
#submit-btn{
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 97.1%;
height: 3rem;
border-radius: .4rem;
background-color: hsl(154, 59%, 51%);
border: none;
color: white;
box-shadow: 0 2px .5px rgba(0, 0, 0, .4);
cursor: pointer;
}
.right-footer-text{
grid-area: bottom-text;
}
.footer-text{
position: relative;
top: 1%;
left: 58%;
transform: translate(-50%, -50%);
color: grey;
font-size: .7rem;
font-weight: 600;
}
.footer-span{
color: hsl(0, 100%, 74%);
}
.error-img{
display: none;
position: absolute;
bottom: 75%;
right: 5%;
}
.visible{
display: block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FrontEndMentor#3</title>
<link rel="stylesheet" href="styles.css">
<link rel="shortcut icon" href="images/favicon-32x32.png" type="image/x-icon">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="left-container">
<h1 class="left-heading">Learn to code by <br>
watching others</h1>
<p class="left-content">See how experienced developers solve problems in real-time. <br>
Watching scripted tutorials is great, but understanding how <br>
developers think is invaluable.</p>
</div>
<div class="right-container">
<div class="right-top-container">
<p class="top-text-special">Try it free 7 days <span class="top-text">then $20/mo. thereafter</span></p>
</div>
<div class="right-form">
<form action="#" class="form">
<div class="first-name-div">
<input type="text" name="fname" id="first-input" placeholder="First Name">
<span><img class="error-img" id="error-img1" src="images/icon-error.svg" alt=""></span>
</div>
<div class="last-name-div">
<input type="text" name="lname" id="last-input" placeholder="Last Name">
<span><img class="error-img" id="error-img2" src="images/icon-error.svg" alt=""></span>
</div>
<div class="email-div">
<input type="email" name="email-address" id="email" placeholder="example#email.com">
<span><img class="error-img" id="error-img3" src="images/icon-error.svg" alt=""></span>
</div>
<div class="password-div">
<input type="password" name="password" id="password" placeholder="Password">
<span><img class="error-img" id="error-img4" src="images/icon-error.svg" alt=""></span>
</div>
<div class="submit-btn-div">
<button type="submit" id="submit-btn">CLAIM YOUR FREE TRIAL</button>
</div>
</form>
</div>
<div class="right-footer-text">
<p class="footer-text">By clicking the button, you are agreeing to our <span class="footer-span">Terms and Services</span></p>
</div>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
(Not all styling is complete, will do when JS is cleaned up)

To improve your JS logic you can apply the 'Don't Repeat Yourself' principle, or DRY. This means that you should avoid code repetition by genericising the logic as much as possible. The corollary effect of this is that the code can be made to work for an infinite number of form fields, so long as the HTML structure around them is consistent.
Here's an example of this for your use case. Note the use of a single class applied to all the fields to be validated, and also how DOM traversal is used to find the error img related to the current field only.
"use strict"
const fields = document.querySelectorAll('.to-validate').forEach(el => {
el.addEventListener('blur', e => {
let field = e.target;
field.closest('div').querySelector('.error-img').classList.toggle('visible', !field.value.trim().length);
});
});
#import url(https://fonts.googleapis.com/css2?family=Poppins:wght#400;500;600;700&display=swap);
body {
margin: 0;
background-image: url(images/bg-intro-desktop.png);
background-color: rgba(255, 0, 0, .5);
font-family: 'Poppins', sans-serif;
}
.container {
margin: 6rem auto;
height: auto;
width: 70%;
display: grid;
grid-template-areas: "left right" "left right";
grid-auto-columns: minmax(0, 32rem);
}
.left-container {
grid-area: left;
}
.left-heading {
color: white;
font-size: 2.7rem;
line-height: 3rem;
font-weight: 700;
position: relative;
top: 30%;
}
.left-content {
color: white;
font-size: .9rem;
font-weight: 400;
position: relative;
top: 29%;
}
.right-container {
grid-area: right;
}
.right-top-container {
background-color: hsl(248, 32%, 49%);
border-radius: .5rem;
height: 11.5%;
margin: auto auto 1.5rem auto;
box-shadow: 0px 6px 1px rgba(0, 0, 0, .2);
}
.top-text-special {
color: white;
font-weight: 600;
font-size: .85rem;
position: relative;
top: 50%;
left: 72%;
transform: translate(-50%, -50%);
}
.top-text {
color: white;
font-weight: 400;
}
.right-form {
background-color: white;
height: 23rem;
border-radius: .5rem;
padding: 1.5rem;
padding-top: 2.5rem;
box-shadow: 0 7px 1px rgba(0, 0, 0, .15);
display: grid;
grid-template-areas: "fname" "lname" "email" "password" "submit-btn" "bottom-text";
}
input {
font-family: 'Poppins', sans-serif;
font-weight: 500;
font-size: .8rem;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 0 0 0 1.5rem;
height: 3rem;
width: 90%;
border: solid;
border-width: .09rem;
border-radius: .4rem;
border-color: hsl(246, 25%, 77%);
}
.first-name-div {
grid-area: fname;
position: relative;
}
.last-name-div {
grid-area: lname;
position: relative;
}
.email-div {
grid-area: email;
position: relative;
}
.password-div {
grid-area: password;
position: relative;
}
.submit-btn-div {
grid-area: submit-btn;
}
#submit-btn {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 97.1%;
height: 3rem;
border-radius: .4rem;
background-color: hsl(154, 59%, 51%);
border: none;
color: white;
box-shadow: 0 2px .5px rgba(0, 0, 0, .4);
cursor: pointer;
}
.right-footer-text {
grid-area: bottom-text;
}
.footer-text {
position: relative;
top: 1%;
left: 58%;
transform: translate(-50%, -50%);
color: grey;
font-size: .7rem;
font-weight: 600;
}
.footer-span {
color: hsl(0, 100%, 74%);
}
.error-img {
display: none;
position: absolute;
bottom: 75%;
right: 5%;
/* following rules only for this demo */
width: 20px;
height: 20px;
background-color: #C00;
}
.visible {
display: block;
}
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#400;500;600;700&display=swap" rel="stylesheet">
<div class="container">
<div class="left-container">
<h1 class="left-heading">Learn to code by <br> watching others</h1>
<p class="left-content">See how experienced developers solve problems in real-time. <br> Watching scripted tutorials is great, but understanding how <br> developers think is invaluable.</p>
</div>
<div class="right-container">
<div class="right-top-container">
<p class="top-text-special">Try it free 7 days <span class="top-text">then $20/mo. thereafter</span></p>
</div>
<div class="right-form">
<form action="#" class="form">
<div class="first-name-div">
<input type="text" name="fname" id="first-input" placeholder="First Name" class="to-validate" />
<span><img class="error-img" src="images/icon-error.svg" alt=""></span>
</div>
<div class="last-name-div">
<input type="text" name="lname" id="last-input" placeholder="Last Name" class="to-validate" />
<span><img class="error-img" src="images/icon-error.svg" alt=""></span>
</div>
<div class="email-div">
<input type="email" name="email-address" id="email" placeholder="example#email.com" class="to-validate" />
<span><img class="error-img" src="images/icon-error.svg" alt=""></span>
</div>
<div class="password-div">
<input type="password" name="password" id="password" placeholder="Password" class="to-validate" />
<span><img class="error-img" src="images/icon-error.svg" alt=""></span>
</div>
<div class="submit-btn-div">
<button type="submit" id="submit-btn">CLAIM YOUR FREE TRIAL</button>
</div>
</form>
</div>
<div class="right-footer-text">
<p class="footer-text">By clicking the button, you are agreeing to our <span class="footer-span">Terms and Services</span></p>
</div>
</div>
</div>
It's worth noting, though, that what you're doing can be achieved simply by adding the required attribute to your input elements. Then there's no JS required at all.

You can do this with required attribute and css invalid selector. No need to code anything. But by default the error will show up.
input + span{
display: none;
color: red;
}
input:invalid + span{
display: inline-block;
}
<form action="#" class="form">
<div class="first-name-div">
<input type="text" name="fname" id="first-input" placeholder="First Name" required>
<span>X</span>
</div>
<div class="last-name-div">
<input type="text" name="lname" id="last-input" placeholder="Last Name" required>
<span>X</span>
</div>
<div class="email-div">
<input type="email" name="email-address" id="email" placeholder="example#email.com" required>
<span>X</span>
</div>
<div class="password-div">
<input type="password" name="password" id="password" placeholder="Password" required>
<span>X</span>
</div>
<div class="submit-btn-div">
<button type="submit" id="submit-btn">CLAIM YOUR FREE TRIAL</button>
</div>
</form>
Now if you want it to show up, you would have to do what you are doing with blur and add a class it it was interacted with. Using foucsout with event delegation you just have to add one event listener to the form.
document.querySelector("form").addEventListener("focusout", function (e) {
const input = e.target.closest('input');
if (input) input.classList.add('touched');
});
input + span{
display: none;
color: red;
}
input.touched:invalid + span{
display: inline-block;
}
<form action="#" class="form">
<div class="first-name-div">
<input type="text" name="fname" id="first-input" placeholder="First Name" required>
<span>X</span>
</div>
<div class="last-name-div">
<input type="text" name="lname" id="last-input" placeholder="Last Name" required>
<span>X</span>
</div>
<div class="email-div">
<input type="email" name="email-address" id="email" placeholder="example#email.com" required>
<span>X</span>
</div>
<div class="password-div">
<input type="password" name="password" id="password" placeholder="Password" required>
<span>X</span>
</div>
<div class="submit-btn-div">
<button type="submit" id="submit-btn">CLAIM YOUR FREE TRIAL</button>
</div>
</form>

Trying to toggle a form using querySelector and it just isn't budging

I was trying to toggle a modal for my register and login tabs on a website I'm working on, but the final part turning it from hidden to visible on the website I was using a little javascript to add an "active" class to the forms making it so they then appear and whatnot... help :)
code:
CSS:
.login-form{
color: white;
text-align: center;
position: absolute;
top: 20%;
left: 37.5%;
transform: transform(-50%,-50%);
background: black;
border-radius: 15px;
box-shadow: 3px 3px 10px 1px rgba(0, 0, 0, 2);
visibility: hidden;
transform: .2s;
}
.login-form.active{
top: 50%;
transition: .2s;
visibility: visible;
}
.container-fluid.active{
filter: blur(20px);
transition: .2s;
pointer-events: none;
}
HTML:
Form -
<div class="login-form">
<div class="form">
<div class="closeBTN" onclick="loginToggle()">×</div>
<div class="title">
<h1>Login</h1>
</div>
<form action="loginConfig.php">
<input type="email" placeholder="Email" required>
<input type="password" placeholder="Password" required>
<input type="submit" value="Login">
</form>
</div>
</div>
Navbar portion:
<div class="login">
<ul>
<li onclick="registerToggle()">Registar-se</li>
<li onclick="loginToggle()">Login</li>
</ul>
</div>
JS:
function loginToggle() {
var container = document.querySelector('.container-fluid');
container.classlist.add('active');
var popup = document.querySelector('.login-form');
popup.classlist.add('active');
}

One of your problem is that you don't respect the camel case of Java Script. You have to use it as "classList" instead of "classlist".
Also you don't have any element having ".container-fluid" in your code so that will trigger an error as well.
Consider removing that line and change from classlist to classList and give it a try:
function loginToggle() {
//var container = document.querySelector('.container-fluid');
//container.classList.add('active');
var popup = document.querySelector('.login-form');
popup.classList.add('active');
}
.login-form{
color: white;
text-align: center;
position: absolute;
top: 20%;
left: 37.5%;
transform: transform(-50%,-50%);
background: black;
border-radius: 15px;
box-shadow: 3px 3px 10px 1px rgba(0, 0, 0, 2);
display:none;
transform: .2s;
}
.login-form.active{
top: 50%;
transition: .2s;
visibility: visible;
}
.container-fluid.active{
filter: blur(20px);
transition: .2s;
pointer-events: none;
}
.active{
display:block;
}
<div class="login-form">
<div class="form">
<div class="closeBTN" onclick="loginToggle()">×</div>
<div class="title">
<h1>Login</h1>
</div>
<form action="loginConfig.php">
<input type="email" placeholder="Email" required>
<input type="password" placeholder="Password" required>
<input type="submit" value="Login">
</form>
</div>
</div>
<div class="login">
<ul>
<li onclick="registerToggle()">Registar-se</li>
<li onclick="loginToggle()">Login</li>
</ul>
</div>

fadeOut and fadeIn don't work after submitting the form

$('form').submit(function(e) {
e.preventDefault();
/*$.ajax({
type: "POST",
url: "mailer/smart.php",
data: $(this).serialize()
})*/
$.when(/* just for the Stack Snippet */).done(function() {
$(this).find("input").val("");
$('#consultation, #order').fadeOut('slow');
$('.overlay, #thanks').fadeIn('slow');
$('form').trigger('reset');
});
return false;
});
.overlay {
display: none;
position: fixed;
width: 100%;
height: 100%;
top: 0;
background-color: rgba(0, 0, 0, .56)
}
.modal {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 380px;
min-height: 400px;
background-color: #f2f2f2;
padding: 38px 40px 40px 40px
}
.modal__close {
position: absolute;
top: 8px;
right: 8px;
font-size: 41px;
line-height: 21px;
color: #c70101;
cursor: pointer
}
.modal__subtitle {
color: #0d0d0d;
font-size: 18px;
font-weight: 700;
text-align: center
}
.modal__descr {
color: #0d0d0d;
font-size: 14px;
font-weight: 500;
text-align: center
}
.modal_mini {
min-height: 140px
}
.modal .error {
border: 1px solid red
}
.modal label.error {
border: none;
text-align: center;
margin-bottom: 15px
}
#consultation,
#order,
#thanks {
display: none
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form><button type="submit">Submit form</button></form>
<div class="overlay">
<div class="modal" id="consultation">
<div class="modal__close">×</div>
<div class="modal__subtitle">Just fill out the application form</div>
<div class="modal__descr">and we'll call you back within 10 minutes</div>
<form class="feed_form feed_form-mt25" action="#">
<input name="name" placeholder="Your name" type="text">
<input name="phone" placeholder="Your phone number">
<input name="email" placeholder="Your email" type="email">
<button class="button button_submit">Request a consultation</button>
</form>
</div>
<div class="modal" id="order">
<div class="modal__close">×</div>
<div class="modal__subtitle">Your order:</div>
<div class="modal__descr">Pulsometer Polar Vantage V</div>
<form class="feed_form feed_form-mt25" action="#">
<input name="name" placeholder="Your name" type="text">
<input name="phone" placeholder="Your phone number">
<input name="email" placeholder="Your email" type="email">
<button class="button button_submit">buy</button>
</form>
</div>
<div class="modal modal_mini" id="thanks">
<div class="modal__close">×</div>
<div class="modal__subtitle">Thank you for your application!</div>
<div class="modal__descr">Our manager will contact you soon</div>
</div>
</div>
Here are styles, HTML and script, script must change #order, #consultation to #thanks after submitting the form but it only erases all the data in the form and that's all
I tried to change styles and read some information but that didn't work out, it seems that everything is written pretty good but somehow it doesn't work

How to add check box using field-wrap tag in html?

I'm trying to add check using field-wrap tag, but space submit button and check box non-aligned. I have to two forms called sign up and login. Sign up form contains many fields like name, email, password, etc.. Tried in terms and condition using checkbox in sign up form, but alignment is messed up.
*, *:before, *:after {
box-sizing: border-box;
}
html {
overflow-y: scroll;
}
body {
background: #fff;
font-family: 'Titillium Web', sans-serif;
}
a {
text-decoration: none;
color: #4F5459;
transition: .5s ease;
}
a:hover {
color: #71D72C;
}
.form .forgot p {
color: #4F5459;
}
.form {
background: #fff;
padding: 40px;
max-width: 500px;
margin: 30px auto;
border-radius: 4px;
/* box-shadow: 0 4px 10px 4px rgba(19, 35, 47, 0.3); */
}
.tab-group {
list-style: none;
padding: 0;
margin: 0 0 30px 0;
height: 50%;
}
.tab-group:after {
content: "";
display: table;
clear: both;
}
.tab-group li a {
display: block;
text-decoration: none;
padding: 15px;
background: #4F5459;
color: #fff;
font-size: 20px;
float: left;
width: 50%;
text-align: center;
cursor: pointer;
transition: .5s ease;
}
.tab-group li a:hover {
background: #71D72C;
color: #ffffff;
}
.tab-group .active a {
background: #71D72C;
color: #ffffff;
}
.tab-content > div:last-child {
display: none;
}
h1 {
text-align: center;
color: #4F5459;
font-weight: 300;
margin: 0 0 30px;
}
label {
position: absolute;
-webkit-transform: translateY(6px);
transform: translateY(6px);
left: 14px;
color: #4F5459;
transition: all 0.25s ease;
-webkit-backface-visibility: hidden;
pointer-events: none;
font-size: 14px;
}
label .req {
margin: 2px;
color: #4F5459;
}
label.active {
-webkit-transform: translateY(35px);
transform: translateY(35px);
left: 2px;
font-size: 14px;
}
label.active .req {
opacity: 0;
}
label.highlight {
color: #4F5459;
font-size: 14px;
}
input, textarea {
font-size: 15px;
display: block;
width: 100%;
height: 100%;
padding: 5px 10px;
background: #E7E8E6;
background-image: none;
border: 1px solid #a0b3b0;
color: #4F5459;
border-radius: 0;
transition: border-color .25s ease, box-shadow .25s ease;
}
input:focus, textarea:focus {
outline: 0;
border-color: #71D72C;
}
textarea {
border: 2px solid #a0b3b0;
resize: vertical;
}
.field-wrap {
position: relative;
margin-bottom: 30px;
}
.top-row:after {
content: "";
display: table;
clear: both;
}
.top-row > div {
float: left;
width: 48%;
margin-right: 4%;
}
.top-row > div:last-child {
margin: 0;
}
.button {
border: 0;
outline: none;
border-radius: 0;
padding: 15px 0;
font-size: 20px;
font-weight: 300;
/* text-transform: uppercase; */
letter-spacing: .1em;
background: #71D72C;
color: #ffffff;
transition: all 0.5s ease;
-webkit-appearance: none;
}
.button:hover, .button:focus {
background: #71D72C;
}
.button-block {
display: block;
width: 100%;
}
.forgot {
margin-top: -20px;
text-align: right;
}
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Sign-Up/Login Form</title>
<link href='https://fonts.googleapis.com/css?family=Titillium+Web:400,300,600' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="form">
<ul class="tab-group">
<li class="tab active">Sign Up</li>
<li class="tab">Log In</li>
</ul>
<div class="tab-content">
<div id="signup">
<!-- <h1>Sign Up for Free</h1> -->
<form action="/" method="post">
<div class="top-row">
<div class="field-wrap">
<label>
First Name<span class="req">*</span>
</label>
<input type="text" required autocomplete="off" />
</div>
<div class="field-wrap">
<label>
Last Name<span class="req">*</span>
</label>
<input type="text"required autocomplete="off"/>
</div>
</div>
<div class="field-wrap">
<label>
Email Address<span class="req">*</span>
</label>
<input type="email"required autocomplete="off"/>
</div>
<div class="field-wrap">
<label>
Password<span class="req">*</span>
</label>
<input type="password"required autocomplete="off"/>
</div>
<div class="field-wrap">
<label>
Business Name<span class="req">*</span>
</label>
<input type="text"required autocomplete="off"/>
</div>
<h1 style="font-size:14px; text-align: left; font-weight: 600">Payment</h1>
<div class="field-wrap">
<label>
Name on Card<span class="req">*</span>
</label>
<input type="text"required autocomplete="off"/>
</div>
<div class="field-wrap">
<label>
Card Number<span class="req">*</span>
</label>
<input type="number"required autocomplete="off"/>
</div>
<div class="top-row">
<h1 style="font-size:14px; text-align: left; font-weight: 600">Expiration</h1>
<div class="field-wrap">
<label>
MM<span class="req">*</span>
</label>
<input type="text"required autocomplete="off"/>
</div>
<div class="field-wrap">
<label>
YYYY<span class="req">*</span>
</label>
<input type="text"required autocomplete="off"/>
</div>
</div>
<div class="field-wrap">
<label>
CVC<span class="req">*</span>
</label>
<input type="text"required autocomplete="off"/>
</div>
<div class="field-wrap">
<label><input type="checkbox" />Option 1</label>
<!-- <input type="checkbox" required autocomplete="off" /> -->
<!-- <input type="checkbox" class="form-check-input" id="exampleCheck1" required autocomplete="off"> -->
<!-- <label class="req form-check-label" for="exampleCheck1">Check me out</label> -->
</div>
<button type="submit" class="button button-block"/>Sign Up</button>
</form>
</div>
<div id="login">
<!-- <h1>Welcome Back!</h1> -->
<form action="/" method="post">
<div class="field-wrap">
<label>
Email Address<span class="req">*</span>
</label>
<input type="email"required autocomplete="off"/>
</div>
<div class="field-wrap">
<label>
Password<span class="req">*</span>
</label>
<input type="password"required autocomplete="off"/>
</div>
<p class="forgot">Forgot Password?</p>
<button class="button button-block"/>Log In</button>
</form>
</div>
</div><!-- tab-content -->
</div> <!-- /form -->
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
From snippet can able to see check box and submit button are non aligned. How to add check box like above input field with correct space?

You have coded CSS for input, so for all input element, it will take width:100% & height:100% etc...
See the attached snippet
*, *:before, *:after {
box-sizing: border-box;
}
html {
overflow-y: scroll;
}
body {
background: #fff;
font-family: 'Titillium Web', sans-serif;
}
a {
text-decoration: none;
color: #4F5459;
transition: .5s ease;
}
a:hover {
color: #71D72C;
}
.form .forgot p {
color: #4F5459;
}
.form {
background: #fff;
padding: 40px;
max-width: 500px;
margin: 30px auto;
border-radius: 4px;
/* box-shadow: 0 4px 10px 4px rgba(19, 35, 47, 0.3); */
}
.tab-group {
list-style: none;
padding: 0;
margin: 0 0 30px 0;
height: 50%;
}
.tab-group:after {
content: "";
display: table;
clear: both;
}
.tab-group li a {
display: block;
text-decoration: none;
padding: 15px;
background: #4F5459;
color: #fff;
font-size: 20px;
float: left;
width: 50%;
text-align: center;
cursor: pointer;
transition: .5s ease;
}
.tab-group li a:hover {
background: #71D72C;
color: #ffffff;
}
.tab-group .active a {
background: #71D72C;
color: #ffffff;
}
.tab-content > div:last-child {
display: none;
}
h1 {
text-align: center;
color: #4F5459;
font-weight: 300;
margin: 0 0 30px;
}
label {
/* position: absolute;
-webkit-transform: translateY(6px);
transform: translateY(6px);
left: 14px;
pointer-events: none;*/
color: #4F5459;
transition: all 0.25s ease;
-webkit-backface-visibility: hidden;
font-size: 14px;
}
label .req {
margin: 2px;
color: #4F5459;
}
label.active {
-webkit-transform: translateY(35px);
transform: translateY(35px);
left: 2px;
font-size: 14px;
}
label.active .req {
opacity: 0;
}
label.highlight {
color: #4F5459;
font-size: 14px;
}
input, textarea {
font-size: 15px;
display: block;
width: 100%;
height: 100%;
padding: 5px 10px;
background: #E7E8E6;
background-image: none;
border: 1px solid #a0b3b0;
color: #4F5459;
border-radius: 0;
transition: border-color .25s ease, box-shadow .25s ease;
}
input:focus, textarea:focus {
outline: 0;
border-color: #71D72C;
}
[type=checkbox], [type=radio] {
box-sizing: border-box;
padding: 0;
width: 20px;
height: 20px;
display: inline;
vertical-align: middle;
}
textarea {
border: 2px solid #a0b3b0;
resize: vertical;
}
.field-wrap {
position: relative;
margin-bottom: 30px;
}
.top-row:after {
content: "";
display: table;
clear: both;
}
.top-row > div {
float: left;
width: 48%;
margin-right: 4%;
}
.top-row > div:last-child {
margin: 0;
}
.button {
border: 0;
outline: none;
border-radius: 0;
padding: 15px 0;
font-size: 20px;
font-weight: 300;
/* text-transform: uppercase; */
letter-spacing: .1em;
background: #71D72C;
color: #ffffff;
transition: all 0.5s ease;
-webkit-appearance: none;
}
.button:hover, .button:focus {
background: #71D72C;
}
.button-block {
display: block;
width: 100%;
}
.forgot {
margin-top: -20px;
text-align: right;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css" rel="stylesheet"/>
<div class="form">
<ul class="tab-group">
<li class="tab active">Sign Up</li>
<li class="tab">Log In</li>
</ul>
<div class="tab-content">
<div id="signup">
<!-- <h1>Sign Up for Free</h1> -->
<form action="/" method="post">
<div class="top-row">
<div class="field-wrap">
<label> First Name<span class="req">*</span> </label>
<input type="text" required autocomplete="off" />
</div>
<div class="field-wrap">
<label> Last Name<span class="req">*</span> </label>
<input type="text" required autocomplete="off"/>
</div>
</div>
<div class="field-wrap">
<label> Email Address<span class="req">*</span> </label>
<input type="email" required autocomplete="off"/>
</div>
<div class="field-wrap">
<label> Password<span class="req">*</span> </label>
<input type="password" required autocomplete="off"/>
</div>
<div class="field-wrap">
<label> Business Name<span class="req">*</span> </label>
<input type="text" required autocomplete="off"/>
</div>
<h1 style="font-size:14px; text-align: left; font-weight: 600">Payment</h1>
<div class="field-wrap">
<label> Name on Card<span class="req">*</span> </label>
<input type="text" required autocomplete="off"/>
</div>
<div class="field-wrap">
<label> Card Number<span class="req">*</span> </label>
<input type="number" required autocomplete="off"/>
</div>
<div class="top-row">
<h1 style="font-size:14px; text-align: left; font-weight: 600">Expiration</h1>
<div class="field-wrap">
<label> MM<span class="req">*</span> </label>
<input type="text" required autocomplete="off"/>
</div>
<div class="field-wrap">
<label> YYYY<span class="req">*</span> </label>
<input type="text" required autocomplete="off"/>
</div>
</div>
<div class="field-wrap">
<label> CVC<span class="req">*</span> </label>
<input type="text" required autocomplete="off"/>
</div>
<div class="field-wrap">
<label>
<input type="checkbox" >
Option 1</label>
<!-- <input type="checkbox" required autocomplete="off" /> -->
<!-- <input type="checkbox" class="form-check-input" id="exampleCheck1" required autocomplete="off"> -->
<!-- <label class="req form-check-label" for="exampleCheck1">Check me out</label> -->
</div>
<button type="submit" class="button button-block">Sign Up</button>
</form>
</div>
<div id="login">
<!-- <h1>Welcome Back!</h1> -->
<form action="/" method="post">
<div class="field-wrap">
<label> Email Address<span class="req">*</span> </label>
<input type="email" required autocomplete="off"/>
</div>
<div class="field-wrap">
<label> Password<span class="req">*</span> </label>
<input type="password" required autocomplete="off"/>
</div>
<p class="forgot">Forgot Password?</p>
<button class="button button-block">Log In</button>
</form>
</div>
</div>
<!-- tab-content -->
</div>
<!-- /form -->

Close/Hide Modal

Im having a hard time how to close or hide my modal after filling it up.
Upon clicking submit i want it to go back to the page where the textbox is clickable. Once go back to the page, the checkbox i check should still checked when i open it again. Can anyone do it with javascript thing or any other solution.
I don't have time now to use bootstrap and my codes are below. i just want to hide my modal or close upon clicking submit. Help me please, thanks.
My working fiddle: https://jsfiddle.net/fe73awsu/
Please see my code below:
test.php
<form method="post" name="testform" action="#">
<a href="#modal"> <!-- when the input textbox was clicked, modal will pop up -->
<input readonly type="text" name="txt1" placeholder="inputTest">
</a>
<div class="modalwrapper" id="modal"> <!-- modal -->
<div class="modalcontainer">
<div class="modalcol1">
<label>Test 1</label>
<input type="checkbox" name="test_modal[]" value="1">
<div class="clear"></div>
<label>Test 2</label>
<input type="checkbox" name="test_modal[]" value="2">
<div class="clear"></div>
<label>Test 3</label>
<input type="checkbox" name="test_modal[]" value="3">
<div class="clear"></div>
<label>Test 4</label>
<input type="checkbox" name="test_modal[]" value="4">
<div class="clear"></div>
<label>Test 5</label>
<input type="checkbox" name="test_modal[]" value="5">
<div class="clear"></div>
<div class="savebutton">
<button class="btn1" type="button" value="Submit">Submit</button>
</div>
</div> <!-- close modalcol1 -->
</div> <!-- close modalcontainer -->
<div class="overlay"></div>
</div> <!-- close modalwrapper -->
</form>
modal.css
/* modal layout */
.modalwrapper {
top: 0;
left: 0;
opacity: 0;
position: absolute;
visibility: hidden;
box-shadow: 0 3px 7px rgba(0,0,0,.25);
box-sizing: border-box;
transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
}
.modalwrapper:target {
opacity: 1;
visibility: visible
}
.overlay {
background-color: #000;
background: rgba(0,0,0,.8);
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 1;
}
.modalcontainer {
display: table;
background-color: #777;
position: relative;
z-index: 100;
color: #fff;
padding: 5px;
}
.modalcol1 { display: table-cell; }
.clear { clear: both; }
.modalwrapper input[type=checkbox] {
float: right;
margin-right: 20px;
}
.savebutton input[type=submit] {
float: right;
background-color: maroon;
color: #fff;
border: none;
padding: 5px 10px;
margin-top: 5px;
margin-right: 20px;
}
/* modal layout ends here */
Help me guys, please :( i need it badly now.

Calm down bro,
Check this jsfiddle link.
Add this js code,
$(document).on("click",".btn1", function(){
$('#modal').hide();
});
Why so serious ?

<button type="button" id="close"class="btn green btn-default" data-dismiss="modal">Close <i class="fa fa-times" aria-hidden="true"></i></button>
Add JavaScript
function onSave(){
$('#close').Click();
}

try this.
<button class="btn1" type="button" value="Submit" on-click= submit();>Submit</button>
// Script
function submit() {
window.history.back();
}

$(document).on("click",".btn1", function(){
$('#modal').hide();
});
/* modal layout */
.modalwrapper {
top: 0;
left: 0;
opacity: 0;
position: absolute;
visibility: hidden;
box-shadow: 0 3px 7px rgba(0,0,0,.25);
box-sizing: border-box;
transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
}
.modalwrapper:target {
opacity: 1;
visibility: visible
}
.overlay {
background-color: #000;
background: rgba(0,0,0,.8);
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 1;
}
.modalcontainer {
display: table;
background-color: #777;
position: relative;
z-index: 100;
color: #fff;
padding: 5px;
}
.modalcol1 { display: table-cell; }
.clear { clear: both; }
.modalwrapper input[type=checkbox] {
float: right;
margin-right: 20px;
}
.savebutton input[type=submit] {
float: right;
background-color: maroon;
color: #fff;
border: none;
padding: 5px 10px;
margin-top: 5px;
margin-right: 20px;
}
/* modal layout ends here */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" name="testform" action="">
<a href="#modal"> <!-- when the input textbox was clicked, modal will pop up -->
<input readonly type="text" name="txt1" placeholder="inputTest">
</a>
<div class="modalwrapper" id="modal"> <!-- modal -->
<div class="modalcontainer">
<div class="modalcol1">
<label>Test 1</label>
<input type="checkbox" name="test_modal[]" value="1">
<div class="clear"></div>
<label>Test 2</label>
<input type="checkbox" name="test_modal[]" value="2">
<div class="clear"></div>
<label>Test 3</label>
<input type="checkbox" name="test_modal[]" value="3">
<div class="clear"></div>
<label>Test 4</label>
<input type="checkbox" name="test_modal[]" value="4">
<div class="clear"></div>
<label>Test 5</label>
<input type="checkbox" name="test_modal[]" value="5">
<div class="clear"></div>
<div class="savebutton">
<button class="btn1" type="button" value="Submit">Submit</button>
</div>
</div> <!-- close modalcol1 -->
</div> <!-- close modalcontainer -->
<div class="overlay"></div>
</div> <!-- close modalwrapper -->
</form>

Put this in file.
$('#modal_edit').modal('hide');
is hope help kubb.

Develop Reference

JavaScript is the programming language of the Web.

Dropdown menu closes when i click it (anywhere) - javascript

Ok, was able to fix it using this javascript code: $( "#btn-menu" ).click(function() { $(".dropdown-content").toggle("slow"); });

Related

I am attempting to refactor my JS, for CSS/JS form validation

Trying to toggle a form using querySelector and it just isn't budging

fadeOut and fadeIn don't work after submitting the form

How to add check box using field-wrap tag in html?

Close/Hide Modal

Categories

Resources