We Keep Coding

How To Validate Form Through JavaScript Before Entering To The Next Page?

This is a register form I'm currently working on it. The problem is that the JavaScript only validates the first field in the form which is the "username" field only, but not the rest of it. If i change the code by moving the password field to above, then the code validates for the passwords only. and same goes for the email address field. May I know, how to solve this issue?. Your help is much appreciated. I'm having this error only in Eclipse IDE application. BUT, WHEN THIS CODE IS DONE IN FIDDLE, IT WORKS FINE. THE CODE IN THE FIDDLE IS IN THIS LINK: https://jsfiddle.net/dbvnkcfm/5/.
Please help solve this issue, because I'm new to JavaScript.
Below is the code in my Eclipse IDE.
#charset "ISO-8859-1";
#import url("https://fonts.googleapis.com/css2?family=Poppins:wght#200;300;400;500;600;700;800&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
color: #ECB365;
}
body,
input {
font-family: "Poppins", sans-serif;
}
.container {
position: relative;
width: 100%;
background-color: #041C32;
min-height: 100vh;
overflow: hidden;
}
.forms-container {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.login-signup {
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
left: 75%;
width: 50%;
transition: 1s 0.7s ease-in-out;
display: grid;
grid-template-columns: 1fr;
z-index: 5;
}
form {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 0rem 5rem;
transition: all 0.2s 0.7s;
overflow: hidden;
grid-column: 1 / 2;
grid-row: 1 / 2;
}
form.sign-up-form {
opacity: 0;
z-index: 1;
}
form.log-in-form {
z-index: 2;
}
.title {
font-size: 2.2rem;
color: #ECB365;
margin-bottom: 10px;
}
.input-field {
max-width: 380px;
width: 100%;
background-color: #ECB365;
margin: 10px 0;
height: 55px;
border-radius: 55px;
display: grid;
grid-template-columns: 15% 85%;
padding: 0 0.4rem;
position: relative;
}
.input-field i {
text-align: center;
line-height: 55px;
color: #444444;
transition: 0.5s;
font-size: 1.1rem;
}
.input-field input {
background: none;
outline: none;
border: none;
line-height: 1;
font-weight: 600;
font-size: 1.1rem;
color: #041C32;
}
.input-field input::placeholder {
color: #444444;
font-weight: 500;
}
.social-text {
padding: 0.7rem 0;
font-size: 1rem;
}
.social-media {
display: flex;
justify-content: center;
}
.social-icon {
height: 46px;
width: 46px;
display: flex;
justify-content: center;
align-items: center;
margin: 0 0.45rem;
color: #ECDBBA;
border-radius: 50%;
border: 1px solid #fff;
text-decoration: none;
font-size: 1.1rem;
transition: 0.3s;
}
.social-icon:hover {
color: #ECB365;
border-color: #ECB365;
}
.btn {
width: 150px;
background-color: #064663;
border: none;
outline: none;
height: 49px;
border-radius: 49px;
color: #fff;
text-transform: uppercase;
font-weight: 600;
margin: 10px 0;
cursor: pointer;
transition: 0.5s;
}
.btn:hover {
background-color: #4d84e2;
}
.panels-container {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.container:before {
content: "";
position: absolute;
height: 2000px;
width: 2000px;
top: -10%;
right: 48%;
transform: translateY(-50%);
background-image: linear-gradient(-45deg, #064663 0%, #064663 100%);
transition: 1.8s ease-in-out;
border-radius: 50%;
z-index: 6;
}
.image {
width: 100%;
transition: transform 1.1s ease-in-out;
transition-delay: 0.4s;
}
.panel {
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: space-around;
text-align: center;
z-index: 6;
}
.left-panel {
pointer-events: all;
padding: 3rem 17% 2rem 12%;
}
.right-panel {
pointer-events: none;
padding: 3rem 12% 2rem 17%;
}
.panel .content {
color: #fff;
transition: transform 0.9s ease-in-out;
transition-delay: 0.6s;
}
.panel h3 {
font-weight: 600;
line-height: 1;
font-size: 1.5rem;
}
.panel p {
font-size: 0.95rem;
padding: 0.7rem 0;
}
.btn.transparent {
margin: 0;
background: #041C32;
/*border: 2px solid #fff;*/
width: 130px;
height: 41px;
font-weight: 600;
font-size: 0.8rem;
}
.btn.transparent:hover {
background-color: #4d84e2;
}
.right-panel .image,
.right-panel .content {
transform: translateX(800px);
}
/* ANIMATION */
.container.sign-up-mode:before {
transform: translate(100%, -50%);
right: 52%;
}
.container.sign-up-mode .left-panel .image,
.container.sign-up-mode .left-panel .content {
transform: translateX(-800px);
}
.container.sign-up-mode .login-signup {
left: 25%;
}
.container.sign-up-mode form.sign-up-form {
opacity: 1;
z-index: 2;
}
.container.sign-up-mode form.log-in-form {
opacity: 0;
z-index: 1;
}
.container.sign-up-mode .right-panel .image,
.container.sign-up-mode .right-panel .content {
transform: translateX(0%);
}
.container.sign-up-mode .left-panel {
pointer-events: none;
}
.container.sign-up-mode .right-panel {
pointer-events: all;
}
#media (max-width: 870px) {
.container {
min-height: 800px;
height: 100vh;
}
.login-signup {
width: 100%;
top: 95%;
transform: translate(-50%, -100%);
transition: 1s 0.8s ease-in-out;
}
.login-signup,
.container.sign-up-mode .login-signup {
left: 50%;
}
.panels-container {
grid-template-columns: 1fr;
grid-template-rows: 1fr 2fr 1fr;
}
.panel {
flex-direction: row;
justify-content: space-around;
align-items: center;
padding: 2.5rem 8%;
grid-column: 1 / 2;
}
.right-panel {
grid-row: 3 / 4;
}
.left-panel {
grid-row: 1 / 2;
}
.image {
width: 200px;
transition: transform 0.9s ease-in-out;
transition-delay: 0.6s;
}
.panel .content {
padding-right: 15%;
transition: transform 0.9s ease-in-out;
transition-delay: 0.8s;
}
.panel h3 {
font-size: 1.2rem;
}
.panel p {
font-size: 0.7rem;
padding: 0.5rem 0;
}
.btn.transparent {
width: 110px;
height: 35px;
font-size: 0.7rem;
}
.container:before {
width: 1500px;
height: 1500px;
transform: translateX(-50%);
left: 30%;
bottom: 68%;
right: initial;
top: initial;
transition: 2s ease-in-out;
}
.container.sign-up-mode:before {
transform: translate(-50%, 100%);
bottom: 32%;
right: initial;
}
.container.sign-up-mode .left-panel .image,
.container.sign-up-mode .left-panel .content {
transform: translateY(-300px);
}
.container.sign-up-mode .right-panel .image,
.container.sign-up-mode .right-panel .content {
transform: translateY(0px);
}
.right-panel .image,
.right-panel .content {
transform: translateY(300px);
}
.container.sign-up-mode .login-signup {
top: 5%;
transform: translate(-50%, 0);
}
}
#media (max-width: 570px) {
form {
padding: 0 1.5rem;
}
.image {
display: none;
}
.panel .content {
padding: 0.5rem 1rem;
}
.container {
padding: 1.5rem;
}
.container:before {
bottom: 72%;
left: 50%;
}
.container.sign-up-mode:before {
bottom: 28%;
left: 50%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="Style.css" />
<title>Sign in & Sign up Form</title>
</head>
<script src="https://kit.fontawesome.com/64d58efce2.js" crossorigin="anonymous" ></script>
<body>
<div class="container">
<div class="forms-container">
<!---------------------------- this is for login form ------------------------------------->
<div class="login-signup">
<form action="Logsuccess" class="log-in-form" method="get">
<h2 class="title">Log-in</h2>
<div class="input-field">
<i class="fas fa-user"></i>
<input type="text" name="username" placeholder="Username" id = "user" class = "text-danger"/>
</div>
<br>
<div class="input-field">
<i class="fas fa-lock"></i>
<input type="password" name="password" placeholder="Password" id = "pass" class = "text-danger"/>
</div>
<br>
<input type="submit" value="Login" class="btn solid" />
<p class="social-text">Or Sign in with social platforms</p>
<div class="social-media">
<i class="fab fa-facebook-f"> </i>
<i class="fab fa-twitter"> </i>
<i class="fab fa-google"> </i>
<i class="fab fa-linkedin-in"></i>
</div>
</form>
<!---------------------------- this is for signup form ------------------------------------->
<!-- <form action="#" class="sign-up-form" method="post" onsubmit="return validation()"> -->
<!-- <form action="RegSuccess" class="sign-up-form" method="post">-->
<form action="RegConfirm.php" class="sign-up-form" method="post" onSubmit="return Register()">
<h2 class="title">Sign up</h2>
<div class="input-field">
<i class="fas fa-user"></i>
<input type="text" name="Username" placeholder="Username" id = "user" class = "text-danger"/>
</div>
<br>
<div class="input-field">
<i class="fas fa-envelope"></i>
<input type="email" name="email" placeholder="Email" id = "emailAddress" class = "text-danger"/>
</div>
<br>
<div class="input-field">
<i class="fas fa-lock"></i>
<input type="password" name="Password" placeholder="Password" id = "pass" class = "text-danger"/>
</div>
<br>
<input type="submit" class="btn" value="Sign up" />
</form>
</div>
</div>
<!---------------------------- this is in login page for asking to signup------------------------------------->
<div class="panels-container">
<div class="panel left-panel">
<div class="content">
<h3>Don't Have An Account ?</h3>
<p>
Your are always welcome to join us!!!
</p>
<button class="btn transparent" id="sign-up-btn"> Sign up </button>
</div>
<img src="img/log.svg" class="image" alt="" />
</div>
<!---------------------------- this is in signup page for asking to login------------------------------------->
<div class="panel right-panel">
<div class="content">
<h3>Are You One of Us ?</h3>
<p>
Let's Log In Then !!!
</p>
<button class="btn transparent" id="sign-in-btn"> Log in </button>
</div>
<img src="img/register.svg" class="image" alt="" />
</div>
</div>
</div>
<script>
//---------------------------- this is javascript for the buttons -------------------------------------//
const sign_in_btn = document.querySelector("#sign-in-btn");
const sign_up_btn = document.querySelector("#sign-up-btn");
const container = document.querySelector(".container");
sign_up_btn.addEventListener("click", () => {
container.classList.add("sign-up-mode");
});
sign_in_btn.addEventListener("click", () => {
container.classList.remove("sign-up-mode");
});
//---------------------------- start of javascript for validation -------------------------------------//
function Register()
{
return validation();
}
function validation()
{
var user = document.getElementById('user').value;
var emailAddress = document.getElementById('emailAddress').value;
var pass = document.getElementById('pass').value;
console.log(user)
if (user == null || user == "")
{
alert ("Username cannot be empty");
return false;
}
else if(user.length < 3 || user.length > 30)
{
alert ("Username must be at least 3 characters long.");
return false;
}
else
{
return true;
}
console.log(emailAddress)
if (emailAddress == null || emailAddress == "")
{
alert ("Email cannot be empty");
return false;
}
else if(emailAddress.indexOf('#') <= 0)
{
alert (" # symbol is on invalid position");
return false;
}
else
{
document.getElementById('emailAddress').innerHTMl = "";
}
console.log(pass)
if (pass == null || pass == "")
{
alert ("Password cannot be empty");
return false;
}
else if(pass.length <= 4 || pass.length >= 20)
{
alert ("Password must be at least 4 characters long.");
return false;
}
else
{
document.getElementById('pass').innerHTMl = "";
}
}
//---------------------------- end of javascript for validation -------------------------------------//
</script>
</body>
</html>

You have duplicated IDs so I add 's' for each ID in signup form also when you use return It's something like you break the function. This should work for you
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="main.css" />
<title>Sign in & Sign up Form</title>
</head>
<script src="https://kit.fontawesome.com/64d58efce2.js" crossorigin="anonymous"></script>
<body>
<div class="container">
<div class="forms-container">
<!---------------------------- this is for login form ------------------------------------->
<div class="login-signup">
<form action="Logsuccess" class="log-in-form" method="post">
<h2 class="title">Log-in</h2>
<div class="input-field">
<i class="fas fa-user"></i>
<input type="text" name="username" placeholder="Username" id="luser" class="text-danger" />
</div>
<br>
<div class="input-field">
<i class="fas fa-lock"></i>
<input type="password" name="password" placeholder="Password" id="lpass" class="text-danger" />
</div>
<br>
<input type="button" value="Login" class="btn solid" onclick="Register('login')" />
<p class="social-text">Or Sign in with social platforms</p>
<div class="social-media">
<i class="fab fa-facebook-f"> </i>
<i class="fab fa-twitter"> </i>
<i class="fab fa-google"> </i>
<i class="fab fa-linkedin-in"></i>
</div>
</form>
<!---------------------------- this is for signup form ------------------------------------->
<!-- <form action="#" class="sign-up-form" method="post" onsubmit="return validation()"> -->
<!-- <form action="RegSuccess" class="sign-up-form" method="post">-->
<form action="RegConfirm.php" class="sign-up-form" method="post" o>
<h2 class="title">Sign up</h2>
<div class="input-field">
<i class="fas fa-user"></i>
<input type="text" name="Username" placeholder="Username" id="suser" class="text-danger" />
</div>
<br>
<div class="input-field">
<i class="fas fa-envelope"></i>
<input type="email" name="email" placeholder="Email" id="semailAddress" class="text-danger" />
</div>
<br>
<div class="input-field">
<i class="fas fa-lock"></i>
<input type="password" name="Password" placeholder="Password" id="spass" class="text-danger" />
</div>
<br>
<input type="button" class="btn" value="Sign up" onclick="Register('signup')" />
</form>
</div>
</div>
<!---------------------------- this is in login page for asking to signup------------------------------------->
<div class="panels-container">
<div class="panel left-panel">
<div class="content">
<h3>Don't Have An Account ?</h3>
<p>
Your are always welcome to join us!!!
</p>
<button class="btn transparent" id="sign-up-btn"> Sign up </button>
</div>
<img src="img/log.svg" class="image" alt="" />
</div>
<!---------------------------- this is in signup page for asking to login------------------------------------->
<div class="panel right-panel">
<div class="content">
<h3>Are You One of Us ?</h3>
<p>
Let's Log In Then !!!
</p>
<button class="btn transparent" id="sign-in-btn"> Log in </button>
</div>
<img src="img/register.svg" class="image" alt="" />
</div>
</div>
</div>
<script>
//---------------------------- this is javascript for the buttons -------------------------------------//
const sign_in_btn = document.querySelector("#sign-in-btn");
const sign_up_btn = document.querySelector("#sign-up-btn");
const container = document.querySelector(".container");
sign_up_btn.addEventListener("click", () => {
container.classList.add("sign-up-mode");
});
sign_in_btn.addEventListener("click", () => {
container.classList.remove("sign-up-mode");
});
//---------------------------- start of javascript for validation -------------------------------------//
function Register(formType) {
return validation(formType);
}
function validation(formType) {
if (formType == "login") {
var user = document.getElementById("luser").value;
var pass = document.getElementById("lpass").value;
} else {
var user = document.getElementById("suser").value;
var pass = document.getElementById("spass").value;
var emailAddress = document.getElementById("semailAddress").value;
}
var errors = [];
// var user = document.getElementById('suser').value;
// var emailAddress = document.getElementById('semailAddress').value;
// var pass = document.getElementById('spass').value;
console.log(user)
if (user == null || user == "") {
errors.push("Username is required");
// return false;
} else if (user.length < 3 || user.length > 30) {
errors.push("Username must be at least 3 characters long.");
// return false;
}
if (formType == "signup") {
console.log(emailAddress)
if (emailAddress == null || emailAddress == "") {
errors.push("Email cannot be empty");
//return false;
} else if (emailAddress.indexOf('#') <= 0) {
errors.push(" # symbol is on invalid position");
} else {
document.getElementById('semailAddress').innerHTMl = "";
}
}
console.log(pass)
if (pass == null || pass == "") {
errors.push("Password cannot be empty");
// return false;
} else if (pass.length <= 4 || pass.length >= 20) {
errors.push("Password must be at least 4 characters long.");
// return false;
} else {
document.getElementById('spass').innerHTMl = "";
}
if (errors.length > 0) {
alert(errors.join("\n"));
return false;
} else {
return true;
}
}
//---------------------------- end of javascript for validation -------------------------------------//
</script>
</body>
</html>

Problem with adding JavaScript code to similar elements

I tried to add JavaScript function to similar element but unfortunately it doesn't work.
I also tried modifying JavaScript code by using querySelectorAll and Foreach but it didn't worked, It add the class but when it come to removing class it broke down and console just kept throwing undefined errors.
const containerDivs = document.querySelectorAll('.box.center');
containerDivs.forEach(containerDiv => {
const leftContainer = containerDiv.querySelector('.left_container');
const arrow = containerDiv.querySelector('.arr_container');
const cancel = containerDiv.querySelector('.cancel');
arrow.addEventListener("click", ({ target: arrow }) => {
arrow.classList.add("active_arr");
if (leftContainer.classList.contains("off")) {
leftContainer.classList.remove("off");
leftContainer.classList.add("active");
}
});
cancel.addEventListener("click", ({ target: cancel }) => {
cancel.classList.add("active_arr");
if (leftContainer.classList.contains("active")) {
leftContainer.classList.remove("active");
leftContainer.classList.add("off")
}
});
});
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background: linear-gradient(to right, #2c5346, #203a43, #0f2027);
}
.center{
display: flex;
justify-content: center;
align-items: center;
}
.main{
height: 100vh;
}
.box{
width: 250px;
height: 250px;
box-shadow: 0 10px 20px rgba(0,0,0,0.288);
border-radius: 23px;
flex-direction: column;
color: white;
position: relative;
overflow: hidden;
}
.box img{
width: 100px;
height: 100px;
border-radius: 50px;
}
.user_name{
margin-bottom: 5px;
font-size: 2rem;
}
.skill{
color: rgba(225,225,225,0.555);
}
/*arrow*/
.arr_container .cancel{
position: absolute;
width: 50px;
height: 50px;
background: white;
bottom: 0;
right: 0;
border-radius: 23px 0 23px 0;
color: rgb(70,70,70);
font-size: 1.6rem;
cursor: pointer;
transition: all .4s;
}
.arr_container{
position: absolute;
width: 50px;
height: 50px;
background: white;
bottom: 0;
right: 0;
border-radius: 23px 0 23px 0;
color: rgb(70,70,70);
font-size: 1.6rem;
cursor: pointer;
transition: all .4s;
}
.arr_container i{
transform: rotate(45deg);
}
.active_arr{
transform: translate(80%, 80%);
}
.left_container{
position: absolute;
background: #0f2027;
width: 100%;
height: 100%;
border-radius: 23px;
padding: 40px 0 0 20px;
transition: all .4s;
}
.off{
transform: translate(-80%,-80%) rotate(90deg);
}
.active{
transform: translate(0) rotate(0);
}
.left_container p{
margin-bottom: 15px;
font-size: 1.2rem
}
.left_container .skill div{
display: inline-block;
color: rgb(155,155,155);
border:1px solid rgb(155,155,155);
padding: 5px 10px;
font-size: .9rem;
margin: 4px 4px 4px 0;
}
.left_container .icons{
font-size: 1.6rem;
margin-top: 10px;
}
.left_container .icons i{
color: #cfcfcf;
cursor: pointer;
margin-right: 10px;
transition: all .4s;
}
.left_container .icons i:hover{
color: #2c5346;
}
.cancel{
right: 0px;
bottom: 0px;
font-size: 1.5rem;
color: rgb(70,70,70);
position: absolute;
width: 50px;
height: 50px;
background: white;
justify-content: center;
align-items: center;
border-radius: 23px 0 23px 0;
}
.cancel .fas{
position: absolute;
right: 1rem;
bottom: 1rem;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="cards.css">
<title>cards</title>
</head>
<body>
<div class="main center">
<div class="box center">
<img src="2bb723986d0546f2c26bcc27f712f0e0.jpg">
<div>
<p class="user_name">Mor Maz</p>
<p class="skill">Front-end Developer</p>
</div>
<div class="arr_container center">
<i class="fas fa-arrow-right"></i>
</div>
<div class="left_container off">
<p>Skill</p>
<div class="skill">
<div>Html</div>
<div>Css</div>
<div>React</div>
<div>Node Js</div>
</div>
<div class="icons">
<i class="fab fa-github"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-facebook"></i>
</div>
<div class="cancel">
<i class="fas fa-times"></i>
</div>
</div>
</div>
<div class="box center">
<img src="2bb723986d0546f2c26bcc27f712f0e0.jpg">
<div>
<p class="user_name">Mor Maz</p>
<p class="skill">Front-end Developer</p>
</div>
<div class="arr_container center">
<i class="fas fa-arrow-right"></i>
</div>
<div class="left_container off">
<p>Skill</p>
<div class="skill">
<div>Html</div>
<div>Css</div>
<div>React</div>
<div>Node Js</div>
</div>
<div class="icons">
<i class="fab fa-github"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-facebook"></i>
</div>
<div class="cancel">
<i class="fas fa-times"></i>
</div>
</div>
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.5.1.js"
integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
crossorigin="anonymous"
></script>
<script src="cards.js"></script>
<!-- <script>
$(document).ready(function(){
$(".arr_container").click(function(){
$(".left_container").addClass("active")
})
})
</script>
<script>
$(".cancel").click(function(){
$(".left_container").removeClass("active")
})
</script> -->
</body>
</html>
I will appreciate any kind of help
thank you

The classnames and CSS are a mess and you're only adding active_arr to ar and you're only removing active_arr from cl. You're also only selecting one left_container
You should not reach up to change parents if possible; you should iterate parents, iterate their children, etc
This should get you started.
const containerDivs = document.querySelectorAll('.box.center');
containerDivs.forEach(containerDiv => {
const leftContainer = containerDiv.querySelector('.left_container');
const arrow = containerDiv.querySelector('.arr_container');
const cancel = containerDiv.querySelector('.cancel');
arrow.addEventListener("click", ({ target: arrow }) => {
});
cancel.addEventListener("click", ({ target: cancel }) => {
});
});

How to go to one or another page according to the chosen option

I am in the development of a form and I want to know how I can go to one or another page, according to the option chosen in a radio button, so far I have the following form with two radio buttons:
.sh_k .sh_sl {
background-color: #edf7f8;
color: #282828;
font-size: 14px;
margin-bottom: 20px;
padding: 20px;
}
.sh_k .sh_sn {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-pack: justify;
justify-content: space-between;
}
.sh_k .sh_st {
padding: 0 20px;
width: 60%;
}
.sh_k .sh_sz {
width: 100%;
}
.sh_u9 {
width: 100%!important;
}
.sh_cq {
font-size: 16px!important;
margin-bottom: 10px;
}
.bpv_cq {
display: inline-block;
font-family: Lettera Text Std;
margin: 0;
padding: 0;
}
h5.bpv_cq {
font-size: 14px;
font-weight: 700;
}
.sh_vm {
-ms-flex-pack: justify;
justify-content: space-between;
}
.bpv_cq.bpv_bpx {
color: #282828;
}
.sh_qj:last-child {
margin-right: 0;
}
.sh_qj {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.sh_vb {
width: 50%!important;
}
.sh_un {
margin-top: 20px!important;
width: 31%;
}
.b3n_ag9 .b3n_lq {
border: 2px solid #0c3970;
border-radius: 50%;
box-sizing: border-box;
cursor: pointer;
display: inline-block;
height: 20px;
margin: 0 10px 0 0;
position: relative;
transition: border-color .2s ease;
vertical-align: middle;
width: 20px;
}
.b3n_ag9 label {
cursor: pointer;
}
.b3n_ag9 span {
color: #3b3f3b;
letter-spacing: 1px;
vertical-align: middle;
}
.b3n_ag9 input {
appearance: none;
}
.b3n_ag9 .b3n_lq.b3n_lk:before {
opacity: 1;
transform: scale(1);
}
.b3n_ag9 .b3n_lq:before {
background-color: #63666A;
border-radius: 50%;
color: #63666A;
content: "";
display: block;
height: 12px;
opacity: 0;
position: absolute;
right: 2px;
top: 2px;
transform: scale(0);
transition: opacity .2s ease,transform .2s ease;
width: 12px;
}
.b3n_ag9 .b3n_lq.b3n_lk, .b3n_ag9 .b3n_lq:hover {
border-color: #63666A;
}
.b3n_ag9 input:checked:after {
content: ' ';
width: 12px;
height: 12px;
border-radius: 50px;
position: absolute;
background: blue;
top: 2px;
left: 2px;
font-size: 30px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
<section class="content">
<div class="box">
<div class="box-body">
<form class="sh_k" id="form">
<div class="sh_sn">
<div class="sh_u9">
<h5 class="sh_cq bpv_cq bpv_bpx">
<span class="bpv_bpz">
Select a option
</span>
</h5>
</div>
<div class="sh_qj sh_vm sh_vb">
<div class="sh_un b3n_ag9">
<label for="dnaelaboracion">
<div id="elaboracion-radio" class="b3n_lq">
<input name="dna" id="dnaelaboracion" type="radio" value="elaboracion">
</div>
<span>Elaboration</span>
</label>
</div>
<div class="sh_un b3n_ag9">
<label for="dnarevision">
<div id="revision-radio" class="b3n_lq">
<input name="dna" id="dnarevision" type="radio" value="revision">
</div>
<span>Revision</span>
</label>
</div>
</div>
</div>
<div class="sh_p0 sh_wl">
<button id="submit" type="submit" class="lu_g5 lu_l2">Next</button>
</div>
</form>
</div>
</div>
</section>
</div>
</body>
</html>
What I want to achieve is the following:
If I select Elaboration, it will go to elaboration.html, if I select Revision it will go to revision.html after pressing the next button.
I hope someone can give me an orientation to complete this form.

The way I would do this is by storing the URI in the radio button value attribute and then retrieving it with an event listener.
<!-- HTML -->
<form id="form">
<div>
<label for="dnaelaboracion">
<div id="elaboracion-radio">
<input name="dna" id="dnaelaboracion" type="radio" value="page1.html">
</div>
<span>Elaboration</span>
</label>
</div>
<div>
<label for="dnarevision">
<div id="revision-radio">
<input name="dna" id="dnarevision" type="radio" value="page2.html">
</div>
<span>Revision</span>
</label>
</div>
<button id="submit" type="submit">Next</button>
</form>
<!-- JS -->
<script>
const button = document.getElementById("submit");
button.addEventListener("click", function(event) {
event.preventDefault();
window.location.href = document.querySelector('input[name="dna"]:checked').value;
});
</script>
If you don't like using the value attribute for this purpose, you could also store it in a data attribute.

Cannot show circle elements in ReactJS front-end

I am creating ReactJS front-end and I want to draw 4 circles from App.js:
<span className="dot">Option 1</span>
<span className="dot">Option 2</span>
<span className="dot">Option 3</span>
<span className="dot">Option 4</span>
This is the definition of a circle class in App.css:
.dot {
height: 25px;
width: 25px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
}
However, when I start the app, I only see the text Option 1, Option 2, etc. without circles.
Update:
Below I provide the whole code of App.js:
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
constructor(props) {
super(props);
this.state = {
fullname: "",
emailaddress: "",
password: "",
editor: "",
message: "",
terms: false,
test: ""
};
this.handleChange = this.handleChange.bind(this);
//this.handleSubmit = this.handleSubmit.bind(this);
}
componentWillMount() {
this.fetchData();
}
fetchData = () => {
fetch("http://localhost:8000", {
method: "GET",
dataType: "JSON",
headers: {
"Content-Type": "application/json; charset=utf-8",
}
})
.then((resp) => {
return resp.json()
})
.then((data) => {
this.setState({ prediction: data.prediction })
console.log(data.prediction, "data content")
})
.catch((error) => {
console.log(error, "catch the hoop")
})
}
handleChange(event) {
const target = event.target;
const value = target.type === "checkbox" ? target.checked : target.value;
const name = target.name;
this.setState({
[name]: value
});
}
// handleSubmit(event) {
// event.preventDefault();
// console.log(this.state);
// }
render() {
return (
<div className="App">
<header>
<div className="container">
<nav className="navbar">
<div className="navbar-brand">
<span className="navbar-item">Forms in React</span>
</div>
</nav>
</div>
</header>
<div className="container">
<div className="columns">
<div className="column is-9">
<form className="form" onSubmit={this.fetchData}>
<div className="field">
<label className="label">Name</label>
<div className="control">
<input
className="input"
type="text"
name="fullname"
value={this.state.fullname}
onChange={this.handleChange}
/>
</div>
</div>
<div className="field">
<label className="label">Departure hour [0-23]</label>
<div className="control">
<input
className="input"
type="number"
min={0}
max={23}
name="emailaddress"
value={this.state.emailaddress}
onChange={this.handleChange}
/>
</div>
</div>
<div className="field">
<label className="label">Password</label>
<div className="control">
<input
className="input"
type="password"
name="password"
value={this.state.password}
onChange={this.handleChange}
/>
</div>
</div>
<div className="field">
<label className="label">Pick your editor</label>
<div className="control">
<div className="select">
<select
value={this.state.editor}
name="editor"
onChange={this.handleChange}
>
<option value="vscode">VsCode</option>
<option value="atom">Atom</option>
</select>
</div>
</div>
</div>
<div className="field">
<label className="label">What do you like about React</label>
<div className="control">
<textarea
className="textarea"
name="message"
value={this.state.message}
onChange={this.handleChange}
/>
</div>
</div>
<div className="field">
<div className="control">
<label className="checkbox">
<input
name="terms"
type="checkbox"
checked={this.state.terms}
onChange={this.handleChange}
/>
I agree to the{" "}
terms and conditions
</label>
</div>
</div>
<div className="field">
<div className="control">
<label className="label">
Do you test your React code?
</label>
<label className="radio">
<input
type="radio"
name="test"
onChange={this.handleChange}
value="Yes"
checked={this.state.test === "Yes"}
/>
Yes
</label>
<label className="radio">
<input
type="radio"
name="test"
onChange={this.handleChange}
value="No"
checked={this.state.test === "No"}
/>
No
</label>
</div>
</div>
<div className="field">
<div className="control">
<input
type="submit"
value="Submit"
className="button is-primary"
/>
</div>
</div>
</form>
</div>
<div className="column is-3">
<pre>
<code>
<p>Full Name: {this.state.prediction}</p>
<p>Email Address: {this.state.emailaddress}</p>
<p>Password: {this.state.password}</p>
<p>Choice in Editor: {this.state.editor}</p>
<p>Why React: {this.state.message}</p>
<p>Terms and Condition: {this.state.terms}</p>
<p>Do you test?: {this.state.test}</p>
</code>
</pre>
</div>
<span className="dot">AAAAAA</span>
<span className="dot">BBBBBB</span>
<span className="dot">CCCCCC</span>
<span className="dot">DDDDDD</span>
</div>
</div>
</div>
);
}
}
The complete code of App.css:
#import url(https://fonts.googleapis.com/css?family=Roboto:700,300);
body {
background-color: #333;
}
.App {
font-size: 1em;
font-weight: 300;
}
.App {
font-family: "Roboto", arial, sans-serif;
color: #fefefe;
border-style: solid;
border-width: 10px;
border-color: rgb(254, 254, 254);
border-radius: 10px 10px 10px 10px;
background-image: -moz-linear-gradient( -90deg, rgb(236, 111, 102) 0%, rgb(243, 161, 131) 100%);
background-image: -webkit-linear-gradient( -90deg, rgb(236, 111, 102) 0%, rgb(243, 161, 131) 100%);
background-image: -ms-linear-gradient( -90deg, rgb(236, 111, 102) 0%, rgb(243, 161, 131) 100%);
width: 90%;
min-width: 60%;
max-width: 70%;
margin: 0 auto;
padding: 25px;
}
.App form {
margin: 0 auto;
text-align: center;
}
.App .container {
margin: 10px;
}
.container {
width: 100%;
margin-top: 50px;
position: relative;
text-align: center;
}
.App input[type="text"],
.App input[type="number"],
.App input[type="password"],
.App input[type="textarea"],
.App input[type="submit"]:focus {
outline: 0;
}
.App input[type="text"],
.App input[type="number"],
.App input[type="password"] {
font-weight: 700;
font-size: 1.4em;
padding: 10px;
border-width: 2px;
border-color: rgba(247, 247, 247, .3);
border-style: solid;
}
.App input[type="text"]:focus,
.App input[type="number"]:focus,
.App input[type="password"]:focus {
background: white;
transition: all 0.3s ease;
color: #222;
}
.App input[type="radio"] {
-webkit-appearance: none;
background-color: #fefefe;
display: inline-block;
position: relative;
padding: 6px;
margin-left: -6px;
margin-top: 25px;
cursor: pointer;
}
.App input[type="submit"] {
font-weight: 700;
font-size: 1.8em;
color: #111;
background: #fefefe;
box-shadow: 0px 4px 0px 0px #d26a60;
border-style: none;
padding: 10px 50px;
margin: 25px 0 15px 0;
position: relative;
display: inline-block;
transition: all .1s linear;
}
.App input[type="submit"]:active {
box-shadow: 0 2px 0 #d26a60;
transform: translateY(3px);
-webkit-transform: translateY(3px);
-ms-transform: translateY(3px);
.dot {
border: 1px solid;
border-radius: 50%;
width: 25px;
height: 25px;
display: inline-block;
}
}

You have your .dot class defined inside your .App input[type="submit"]:active rule.
.App input[type="submit"]:active {
box-shadow: 0 2px 0 #d26a60;
transform: translateY(3px);
-webkit-transform: translateY(3px);
-ms-transform: translateY(3px);
.dot {
border: 1px solid;
border-radius: 50%;
width: 25px;
height: 25px;
display: inline-block;
}
}
Move the .dot class outside of it instead:
.App input[type="submit"]:active {
box-shadow: 0 2px 0 #d26a60;
transform: translateY(3px);
-webkit-transform: translateY(3px);
-ms-transform: translateY(3px);
}
.dot {
border: 1px solid;
border-radius: 50%;
width: 25px;
height: 25px;
display: inline-block;
}

You must declare a border thickness and style in your CSS at a minimum for the circle to show up.
.circle {
border: 1px solid; /* <--- Here
border-radius: 50%;
width: 25px;
height: 25px;
display: inline-block;
}
https://codesandbox.io/s/1vn55mw8ql
POST EDIT EDIT: now that you included the rest of your code the typos should be corrected too (missing }.

Codepen sign up/log in

I have tried to get this sign up thing into Notepad. I'm hopeless and whatever I tried didn't work. I would appreciate if someone could take a look at the code and explain what each code file is going to look like (html,css ect).
Here is the link to the website: http://codepen.io/jack-doyle/pen/XXYXWp
Below you will find what I've copied so far.
Thank you for looking into it.
(function() {
var signup = $('.container--static .button--signup');
var login = $('.container--static .button--login');
var signupContent = $('.container--sliding .slider-content.signup');
var loginContent = $('.container--sliding .slider-content.login');
var slider = $('.container--sliding');
signup.on('click', function() {
loginContent.css('display', 'none');
signupContent.css('display', 'initial');
slider.animate({
'left': '30%'
}, 350, 'easeOutBack');
});
login.on('click', function() {
signupContent.css('display', 'none');
loginContent.css('display', 'initial');
slider.animate({
'left': '70%'
}, 350, 'easeOutBack');
});
})();
#import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500,700);
#import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
body {
background: url(https://images.unsplash.com/photo-1443890923422-7819ed4101c0?crop=entropy&fit=crop&fm=jpg&h=650&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1375) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
font-family: 'Montserrat';
overflow: auto;
}
a,
a:focus,
a:visited,
a:active {
text-decoration: none;
color: inherit;
}
.container {
padding: 5%;
border-radius: 3px;
}
.container.container--static {
width: 80%;
min-width: 600px;
height: 40%;
min-height: 250px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: #000;
color: #eee;
opacity: 0.6;
}
.container.container--sliding {
width: 35%;
height: 50%;
min-height: 300px;
background-color: #fefefe;
position: absolute;
top: 50%;
left: 65%;
transform: translate(-50%, -50%);
box-shadow: 3px -2px 6px 0px rgba(0, 0, 0, 0.4);
}
.container.container--sliding .slider-content.signup {
display: none;
}
.info-box {
width: 40%;
margin: 5% auto;
}
.info-box.left {
float: left;
}
.info-box.right {
float: right;
}
.heading {
font-family: 'Montserrat';
font-size: 1.2em;
}
.heading.alt {
margin-bottom: 10%;
text-transform: uppercase;
color: #E26A6A;
}
.info-text {
font-family: 'Roboto';
font-size: 0.7em;
font-weight: 300;
letter-spacing: 1px;
}
.info-text.alt {
color: #aaa;
}
.button {
width: 35%;
margin-top: 15px;
padding: 2% 5%;
background-color: transparent;
color: #eee;
border: 2px solid #ccc;
border-radius: 3px;
font-family: 'Montserrat';
font-size: 0.7em;
text-transform: uppercase;
cursor: pointer;
}
.button.alt {
margin-bottom: 15px;
background-color: #E26A6A;
border: 0;
}
.button:focus {
outline: 0;
}
form {
margin-bottom: 10%;
}
form input {
display: block;
width: 100%;
margin-bottom: 15px;
padding: 5px;
border: 0;
border-bottom: 2px solid #ddd;
font-family: 'Montserrat';
}
form input:focus {
outline: 0;
}
<html>
<head>
<script type="text/javascript" src="hey.js"></script>
<link rel="stylesheet" href="css.css">
</head>
<body>
<!-- Static container -->
<div class="container container--static">
<!-- Signup prompt -->
<div class="info-box left">
<h2 class="heading">Don't have an account?</h2>
<p class="info-text">Ethical celiac hashtag taxidermy squid. Wayfarers distillery narwhal, kombucha jean shorts selvage meggings.</p>
<button class="button button--signup">Sign up</button>
</div>
<!-- Login prompt -->
<div class="info-box right">
<h2 class="heading">Have an account?</h2>
<p class="info-text">Ethical celiac hashtag taxidermy squid. Wayfarers distillery narwhal, kombucha jean shorts selvage meggings.</p>
<button class="button button--login">Login</button>
</div>
</div>
<!-- Sliding container -->
<div class="container container--sliding">
<!-- Login -->
<div class="slider-content login">
<h2 class="heading alt">Log In</h2>
<form id="login">
<input class="email" type="text" placeholder="Email">
<input class="password" type="password" placeholder="Password">
</form>
<button class="button button--login alt">Log In</button>
<p class="info-text alt">Forgot password?</p>
</div>
<!-- Signup -->
<div class="slider-content signup">
<h2 class="heading alt">Sign Up</h2>
<form id="signup">
<input class="name" type="text" placeholder="Full Name">
<input class="email" type="text" placeholder="Email">
<input class="password" type="password" placeholder="Password">
</form>
<button class="button button--signup alt">Sign Up</button>
</div>
</div>

First place your html, js, and css code in the same directory. If you are going to move the file from codepen to Notepad you will need to import jQuery, jQuery UI and load your javascript file last.
In your html file place these scripts after your last div:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="hey.js"></script>
</body>
</html>