HTML Form getting disappear when i am clicking on tab? - javascript

I am trying to create a container that contains two forms.I want to show only one form at a time. Each form can be accessed when clicking on their respective tab and hide the other form.
But when i tried doing this i ended up in a situation where when i am clicking on the other tab to access the 2nd form then both of my form disappeared and only tabs remains their on the screen.
The desired output will be i should be able to toggle between the form.
I Had tried to debug but didn't got where i am going wrong.
Here is my javascript, HTML and CSS code:
const tabs = document.querySelectorAll(".tab");
const forms = document.querySelectorAll(".form-div");
const removeActiveTab = () =>{
tabs.forEach(tab => tab.classList.remove("active"));
};
const removeActiveForm = () => {
forms.forEach(form => form.classList.remove("current"));
};
function setActiveForm(tab){
removeActiveForm();
forms.forEach(form => {
if (tab.classList.contains(form.dataset['form'])){
form.classList.add('current')
}
});
}
function setActiveTab(tab){
if(!tab.classList.contains("active")){
removeActiveTab();
tab.classList.add("active");
}
}
tabs.forEach(tab => {
tab.addEventListener("click", () =>{
setActiveTab(tab);
setActiveForm(tab);
});
});
*{
margin : 0;
padding: 0;
box-sizing: border-box;
}
html,
body{
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
background-color: #e6eeff;
}
.main-div{
background-color:#1a2a4d;
padding: 3rem;
width: 700px;
}
.tabs{
display: flex;
}
.tab{
flex: 1;
text-align: center;
color: #fff;
cursor: pointer;
border: 2px solid #02a1fd;
transition: background 300ms;
}
.tab:hover{
background-color: #02a1fd;
}
.tab:nth-child(1){
border-radius: 25px 0 0 25px;
}
.tab:nth-child(2){
border-radius: 0 25px 25px 0;
}
.tab h2{
padding: .5rem 1rem;
}
.active{
background-color: #02a1fd;
}
.form-div{
display: none;
opacity: 0;
}
.current{
display: block;
animation: fadeIn 500ms ease-in forwards;
}
.form-div h1{
text-align: center;
color: #fff;
padding: 1rem 0;
}
.input{
padding: .5rem 1rem;
}
.input label{
padding: 0.3rem 0.6rem;
font-size: 1.3rem;
color: #fff;
}
.req{
color: #02a1fd;
}
.input input{
width: 100%;
padding: .3rem;
font-size: 1.3rem;
background-color: transparent;
color: #fff;
border: 1px solid #fff;
outline: 0;
}
.input input:focus{
border: 1px solid #02a1fd;
}
.form-submit{
padding: .5rem 1rem;
}
.form-submit input{
padding: 1rem;
width: 100%;
font-size: 1.5rem;
background-color: #02a1fd;
border: 0;
color: #fff;
}
.form-submit input:hover{
background-color: #02886d;
}
#keyframes fadeIn{
from{
opacity: 0;
}
to{
opacity: 1;
}
}
<!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>Document</title>
</head>
<body>
<div class="main-div">
<div class="tabs">
<div class="tab encryption active"><h2>Encryption</h2></div>
<div class="tab decryption"><h2>Decryption</h2></div>
</div>
<div class="form-div current" data-form="Encryption">
<h1>Encryption</h1>
<form action="#">
<div class="input">
<label for="plaintext">Enter Plain text </label>
<input type="text" id="plaintext">
</div>
<div class="input">
<label for="password">Enter password </label>
<input type="password" id="password">
</div>
<div class="form-submit">
<input type="submit" value="encryption">
</div>
</form>
</div>
<div class="form-div" data-form="Decryption">
<h1>Decryption</h1>
<form action="#">
<div class="input">
<label for="decryptiontext">Enter Encrypted text </label>
<input type="text" id="decryptiontext">
</div>
<div class="input">
<label for="password">Enter password </label>
<input type="password" id="password">
</div>
<div class="input">
<label for="key">Enter key </label>
<input type="number" id="key">
</div>
<div class="form-submit">
<input type="submit" value="decryption">
</div>
</form>
</div>
</div>
<script src="main.js"></script>
</body>
</html>
Thanks in advance


The problem is in the below line -
if (tab.classList.contains(form.dataset['form'])){
Here you are checking if class list in the tab has the data-form value.
But the classes are in lower case (decryption, encryption), but data-form value is in capitals (Decryption, Encryption). That's the reason the condition never matches and the current class is never added to form.
You can either change the case, so that it matches or convert case to lower while matching as below -
if (tab.classList.contains(form.dataset['form'].toLowerCase())) {
Final Code -
const tabs = document.querySelectorAll(".tab");
const forms = document.querySelectorAll(".form-div");
const removeActiveTab = () => {
tabs.forEach(tab => tab.classList.remove("active"));
};
const removeActiveForm = () => {
forms.forEach(form => form.classList.remove("current"));
};
function setActiveForm(tab) {
removeActiveForm();
forms.forEach(form => {
if (tab.classList.contains(form.dataset['form'].toLowerCase())) {
form.classList.add('current')
}
});
}
function setActiveTab(tab) {
if (!tab.classList.contains("active")) {
removeActiveTab();
tab.classList.add("active");
}
}
tabs.forEach(tab => {
tab.addEventListener("click", () => {
debugger;
setActiveTab(tab);
setActiveForm(tab);
});
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
background-color: #e6eeff;
}
.main-div {
background-color: #1a2a4d;
padding: 3rem;
width: 700px;
}
.tabs {
display: flex;
}
.tab {
flex: 1;
text-align: center;
color: #fff;
cursor: pointer;
border: 2px solid #02a1fd;
transition: background 300ms;
}
.tab:hover {
background-color: #02a1fd;
}
.tab:nth-child(1) {
border-radius: 25px 0 0 25px;
}
.tab:nth-child(2) {
border-radius: 0 25px 25px 0;
}
.tab h2 {
padding: .5rem 1rem;
}
.active {
background-color: #02a1fd;
}
.form-div {
display: none;
opacity: 0;
}
.current {
display: block;
animation: fadeIn 500ms ease-in forwards;
}
.form-div h1 {
text-align: center;
color: #fff;
padding: 1rem 0;
}
.input {
padding: .5rem 1rem;
}
.input label {
padding: 0.3rem 0.6rem;
font-size: 1.3rem;
color: #fff;
}
.req {
color: #02a1fd;
}
.input input {
width: 100%;
padding: .3rem;
font-size: 1.3rem;
background-color: transparent;
color: #fff;
border: 1px solid #fff;
outline: 0;
}
.input input:focus {
border: 1px solid #02a1fd;
}
.form-submit {
padding: .5rem 1rem;
}
.form-submit input {
padding: 1rem;
width: 100%;
font-size: 1.5rem;
background-color: #02a1fd;
border: 0;
color: #fff;
}
.form-submit input:hover {
background-color: #02886d;
}
#keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="main-div">
<div class="tabs">
<div class="tab encryption active">
<h2>Encryption</h2>
</div>
<div class="tab decryption">
<h2>Decryption</h2>
</div>
</div>
<div class="form-div current" data-form="Encryption">
<h1>Encryption</h1>
<form action="#">
<div class="input">
<label for="plaintext">Enter Plain text </label>
<input type="text" id="plaintext">
</div>
<div class="input">
<label for="password">Enter password </label>
<input type="password" id="password">
</div>
<div class="form-submit">
<input type="submit" value="encryption">
</div>
</form>
</div>
<div class="form-div" data-form="Decryption">
<h1>Decryption</h1>
<form action="#">
<div class="input">
<label for="decryptiontext">Enter Encrypted text </label>
<input type="text" id="decryptiontext">
</div>
<div class="input">
<label for="password">Enter password </label>
<input type="password" id="password">
</div>
<div class="input">
<label for="key">Enter key </label>
<input type="number" id="key">
</div>
<div class="form-submit">
<input type="submit" value="decryption">
</div>
</form>
</div>
</div>
</body>
</html>


An alternative way to do the job - just set the style display from block to none (and vice versa) :
$("#enx").click(function(){
document.getElementById("eny").style.display = "block";
document.getElementById("dey").style.display = "none";
});
$("#dex").click(function(){
document.getElementById("eny").style.display = "none";
document.getElementById("dey").style.display = "block";
});
*{
margin : 0;
padding: 0;
box-sizing: border-box;
}
html,
body{
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
background-color: #e6eeff;
}
.main-div{
background-color:#1a2a4d;
padding: 3rem;
width: 700px;
}
.tabs{
display: flex;
}
.tab{
flex: 1;
text-align: center;
color: #fff;
cursor: pointer;
border: 2px solid #02a1fd;
transition: background 300ms;
}
.tab:hover{
background-color: #02a1fd;
}
.tab:nth-child(1){
border-radius: 25px 0 0 25px;
}
.tab:nth-child(2){
border-radius: 0 25px 25px 0;
}
.tab h2{
padding: .5rem 1rem;
}
.active{
background-color: #02a1fd;
}
.form-div{
display: none;
opacity: 0;
}
.current{
display: block;
animation: fadeIn 500ms ease-in forwards;
}
.form-div h1{
text-align: center;
color: #fff;
padding: 1rem 0;
}
.input{
padding: .5rem 1rem;
}
.input label{
padding: 0.3rem 0.6rem;
font-size: 1.3rem;
color: #fff;
}
.req{
color: #02a1fd;
}
.input input{
width: 100%;
padding: .3rem;
font-size: 1.3rem;
background-color: transparent;
color: #fff;
border: 1px solid #fff;
outline: 0;
}
.input input:focus{
border: 1px solid #02a1fd;
}
.form-submit{
padding: .5rem 1rem;
}
.form-submit input{
padding: 1rem;
width: 100%;
font-size: 1.5rem;
background-color: #02a1fd;
border: 0;
color: #fff;
}
.form-submit input:hover{
background-color: #02886d;
}
#keyframes fadeIn{
from{
opacity: 0;
}
to{
opacity: 1;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!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>Document</title>
</head>
<body>
<div class="main-div">
<div class="tabs">
<div id=enx class="tab encryption active"><h2>Encryption</h2></div>
<div id=dex class="tab decryption"><h2>Decryption</h2></div>
</div>
<div id=eny class="form-div current" data-form="Encryption">
<h1>Encryption</h1>
<form action="#">
<div class="input">
<label for="plaintext">Enter Plain text </label>
<input type="text" id="plaintext">
</div>
<div class="input">
<label for="password">Enter password </label>
<input type="password" id="password">
</div>
<div class="form-submit">
<input type="submit" value="encryption">
</div>
</form>
</div>
<div id=dey class="form-div current" style="display:none;" data-form="Decryption">
<h1>Decryption</h1>
<form action="#">
<div class="input">
<label for="decryptiontext">Enter Encrypted text </label>
<input type="text" id="decryptiontext">
</div>
<div class="input">
<label for="password">Enter password </label>
<input type="password" id="password">
</div>
<div class="input">
<label for="key">Enter key </label>
<input type="number" id="key">
</div>
<div class="form-submit">
<input type="submit" value="decryption">
</div>
</form>
</div>
</div>
</body>
</html>

Related

How to run a function based of a value of a options input field

So, this may be a simple question, but i'm still having trouble doing it, i am trying to make a function (from sweetalert) run only if the user select the option with the value 1 in the form, but i want the function to run, before the user clicks the submit button. But i can't figure a way to do so, most of the answers that i found doesn't work, at least, not for me. if anyone know what is the problem, i would appreciate.
Here are the codes: (in order, javascript, css, html)
const cadForm = document.getElementById('Formulario');
var r = document.getElementById("autonomo");
function alert(){
Swal.fire({
icon: 'info',
title: 'Opa!',
text: 'Pelo visto você trabalha como autonomo, nesse caso, é necessário cadastrar o veiculo ultilizado.',
footer: 'Gostaria de cadastrar?'
})
}
function sucess(){
Swal.fire({
icon: 'success',
title: 'Sucesso',
text: 'Seu Cadastro foi realizado com sucesso'
})
}
if (cadForm){ // This is working, when the user press the submit, a sweetalert box pops up
cadForm.addEventListener("submit", async (e) => {
sucess();
})
}
if (cadForm) { // this is not working
cadForm.addEventListener("r == 1", async (e) => {
alert();
})
}
/* ===== Google Font Import - Poppins ===== */
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;300;400;500;600&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(90deg,#ef1570 ,#fea858);
}
.container{
position: relative;
max-width: 900px;
width: 100%;
border-radius: 6px;
padding: 30px;
margin: 0 15px;
background-color: #fff;
box-shadow: 0 5px 10px rgba(0,0,0,0.1);
}
.container header{
position: relative;
font-size: 20px;
font-weight: 600;
color: #333;
}
.container header::before{
content: "";
position: absolute;
left: 0;
bottom: -2px;
height: 3px;
width: 27px;
border-radius: 8px;
background-color: #4070f4;
}
.container form{
position: relative;
margin-top: 16px;
min-height: 490px;
background-color: #fff;
overflow: hidden;
}
.container form .form{
position: absolute;
background-color: #fff;
transition: 0.3s ease;
}
.container form .form.second{
opacity: 0;
pointer-events: none;
transform: translateX(100%);
}
form.secActive .form.second{
opacity: 1;
pointer-events: auto;
transform: translateX(0);
}
form.secActive .form.first{
opacity: 0;
pointer-events: none;
transform: translateX(-100%);
}
.container form .title{
display: block;
margin-bottom: 8px;
font-size: 16px;
font-weight: 500;
margin: 6px 0;
color: #333;
}
.container form .fields{
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
form .fields .input-field{
display: flex;
width: calc(100% / 3 - 15px);
flex-direction: column;
margin: 4px 0;
}
.input-field label{
font-size: 12px;
font-weight: 500;
color: #2e2e2e;
}
.input-field input, select{
outline: none;
font-size: 14px;
font-weight: 400;
color: #333;
border-radius: 5px;
border: 1px solid #aaa;
padding: 0 15px;
height: 42px;
margin: 8px 0;
}
.input-field input :focus,
.input-field select:focus{
box-shadow: 0 3px 6px rgba(0,0,0,0.13);
}
.input-field select,
.input-field input[type="date"]{
color: #707070;
}
.input-field input[type="date"]:valid{
color: #333;
}
.container form button, .backBtn{
display: flex;
align-items: center;
justify-content: center;
height: 45px;
max-width: 200px;
width: 100%;
border: none;
outline: none;
color: #fff;
border-radius: 5px;
margin: 25px 0;
background: linear-gradient(90deg,#ef1570 ,#fea858);
transition: all 0.3s linear;
cursor: pointer;
}
.container form .btnText{
font-size: 14px;
font-weight: 400;
}
form button:hover{
background: linear-gradient(90deg,#d2759c ,#efc399);
}
form button i,
form .backBtn i{
margin: 0 6px;
}
form .backBtn i{
transform: rotate(180deg);
}
form .buttons{
display: flex;
align-items: center;
}
form .buttons button , .backBtn{
margin-right: 14px;
}
#media (max-width: 750px) {
.container form{
overflow-y: scroll;
}
.container form::-webkit-scrollbar{
display: none;
}
form .fields .input-field{
width: calc(100% / 2 - 15px);
}
}
#media (max-width: 550px) {
form .fields .input-field{
width: 100%;
}
}
.swal2-footer a {
text-decoration: none;
color: #4070f4;
}
.hero-content a{
color: white;
}
<!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>FretNet - Cadastro</title>
<link rel="shortcut icon" href="./bxs-truck.svg" type="image/svg+xml">
<!----======== CSS ======== -->
<link rel="stylesheet" href="assets/css/register.css">
<!----===== Iconscout CSS ===== -->
<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css">
</head>
<body>
<div class="container">
<header>Faça seu Cadastro</header>
<form action="#" id="Formulario">
<div class="form first">
<div class="details personal">
<span class="title">Insira seus dados</span>
<div class="fields">
<div class="input-field">
<label>Nome Completo</label>
<input type="text" placeholder="Insira seu nome" >
</div>
<div class="input-field">
<label>Data de nascimento</label>
<input type="date" placeholder="Insira sua data de nascimento" >
</div>
<div class="input-field">
<label>Email</label>
<input type="text" placeholder="Insira seu email" >
</div>
<div class="input-field">
<label>Numero de telefone</label>
<input type="number" placeholder="Digite seu telefone" >
</div>
<div class="input-field">
<label>Gênero</label>
<select >
<option disabled selected>Selecione seu Gênero</option>
<option>Masculino</option>
<option>Feminino</option>
<option>Outros</option>
</select>
</div>
<div class="input-field">
<label>Senha</label>
<input type="text" placeholder="Digite uma senha">
</div>
</div>
</div>
<div class="details ID">
<span class="title">Dados Judiciais</span>
<div class="fields">
<div class="input-field">
<label>Cpf</label>
<input type="text" placeholder="Insira seu Cpf" >
</div>
<div class="input-field">
<label>RG</label>
<input type="number" placeholder="Digite seu RG" >
</div>
<div class="input-field">
<label>N° de Registro da CNH</label>
<input type="text" placeholder="Insira no numero da Cnh" >
</div>
<div class="input-field">
<label>Ocupação</label>
<select id="autonomo">
<option disabled selected>Você é um autonomo?</option>
<option value="1" >Sim</option>
<option value="2">Não</option>
</select>
</div>
<div class="input-field">
<label>Data de Emissão</label>
<input type="date" placeholder="Insira a data de emissão" >
</div>
<div class="input-field">
<label>Data de validade</label>
<input type="date" placeholder="Insira a Data de validade" >
</div>
</div>
<button class="nextBtn" id="cadastro" type="submit" value="Cadastro">
<span class="btnText">Submit</span>
<i class="uil uil-navigator"></i>
</button>
</div>
</div>
</form>
</div>
<script src="assets/js/sweetalert2.js"></script>
<script src="assets/js/sweetalert.js"></script>
<!--<script src="script.js"></script>-->
</body>
</html>

how to loop so that when character reaches certain length it shifts up

I am trying to do a for loop so that when the character limit reaches 21 it shifts up.
The issues, I am running into are as follows:
input stops after a certain amount of presses, which is not what I want.
Every time a line shifts up the next line spaces get wider.
This is what I want the outcome to look like:
Expected result output of screen behaviour with for loop:
|---------------|
|111111111111111|
|111111111111111|
|111111111111111|
|111111111111111|
|---------------|
/*********************
Setting up varlaibles*
**********************/
let result;
let calculation;
let num1;
let num2;
/*****************************************
Function for numbers to display on-screen*
******************************************/
function buttonPress(numbers) {
result = document.querySelector('.answer');
let input = result.innerHTML += numbers
console.log(input)
if (input.length >= 21) {
for (let i = 0; i < input.length; i++) {
result.innerHTML += "\n";
document.querySelector('.answer').style.marginTop = "-1rem";
}
}
}
body {
margin: auto 15rem;
box-sizing: border-box;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
.base {
margin-top: 2rem;
background-color: #0C1021;
width: 19.8rem;
height: 40rem;
border-radius: 1.5rem;
}
.header {
display: flex;
flex-direction: row;
}
.time {
font-size: 10px;
color: white;
margin-top: 1rem;
margin-left: 2rem;
}
.icons {
margin-left: 11.3rem;
margin-top: 0.2rem;
}
.icons img {
width: 13px;
margin-top: 10px;
padding-left: 5px;
}
.battery {
filter: brightness(0) invert(1);
}
span {
display: block;
width: 6%;
border-top: 3px solid white;
margin-left: 1rem;
margin-top: 2rem;
}
.hl {
margin-top: 3px;
}
.hl2 {
cursor: pointer;
margin-top: 2px;
}
.calc-header {
display: flex;
flex-direction: row;
}
.calc-header h2 {
position: absolute;
margin-left: 6rem;
color: white;
margin-top: -23px;
}
.screen {
margin-left: 0rem;
/* changed */
margin-top: 149px;
}
.calc {
width: 5px;
color: white;
}
.answer {
color: white;
font-size: 32px;
text-align: right;
/* added */
}
button {
border: none;
cursor: pointer;
}
.row {
margin-top: -359px;
position: absolute;
}
.col {
padding: 1px;
}
.col-op,
.col-op-end,
.col-num {
width: 75.3px;
height: 70px;
}
.col-eq-end {
width: 155px;
height: 68px;
}
.col-op,
.col-op-end {
background-color: #093A52;
color: #01A6CB;
}
.col-num {
background-color: #0B1A2C;
color: white;
}
#border-left {
border-radius: 0px 0px 0px 23px;
}
.col-eq-end {
background-color: #01A6CB;
color: white;
}
#border-right {
border-radius: 0px 0px 23px 0px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/main.css" />
<script src="js/main.js" defer></script>
<script src="js/time.js" defer></script>
<title>Calculator</title>
</head>
<body>
<header>
<div class="base">
<div class="header">
<div class="time"></div>
</div>
<div class="dummy-nav">
<span></span>
<span class="hl"></span>
<span class="hl2"></span>
</div>
<div class="calc-header">
<h2>Calculator</h2>
</div>
<div class="screen">
<div class="calc"></div>
<div class="answer"></div>
</div>
</header>
<main>
<div class="row">
<div class="col">
<button class="col-op clear" onclick="buttonPress('c')">C</button>
<button class="col-op" onclick="buttonPress('()')">()</button>
<button class="col-op" onclick="buttonPress('%')">%</button>
<button class="col-op" onclick="buttonPress('/')">/</button>
</div>
<div class="col">
<button class="col-num" onclick="buttonPress(1)">1</button>
<button class="col-num" onclick="buttonPress(2)">2</button>
<button class="col-num" onclick="buttonPress(3)">3</button>
<button class="col-op-end" onclick="buttonPress('x')">x</button>
</div>
<div class="col">
<button class="col-num" onclick="buttonPress(4)">4</button>
<button class="col-num" onclick="buttonPress(5)">5</button>
<button class="col-num" onclick="buttonPress(6)">6</button>
<button class="col-op-end" onclick="buttonPress('+')">+</button>
</div>
<div class="col">
<button class="col-num" onclick="buttonPress(7)">7</button>
<button class="col-num" onclick="buttonPress(8)">8</button>
<button class="col-num" onclick="buttonPress(9)">9</button>
<button class="col-op-end" onclick="buttonPress('-')">-</button>
</div>
<div class="col">
<button class="col-num" id="border-left" onclick="buttonPress(0)">0</button>
<button class="col-num" onclick="buttonPress('.')">.</button>
<button class="col-eq-end" id="border-right" onclick="buttonPress('=')">=</button>
</div>
</div>
</main>
</body>
</html>

I am getting refresh after executing submit button in login form

I make a simple login page using html and css and javascripts.
But when i submit and in case of some javascript lines execution after few seconds the page refresh automatically.when i submit form it shows desiered output but is few seconds webpage refresh.
HTML code
<!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>intern.local</title>
<link rel="stylesheet"><link rel="stylesheet" href="./index.css">
<script src="./index.js"></script>
</head>
<body>
<div class="outer">
<div class="inner one"
id="box_one">
<h1 class="main">
Welcome to intern.local
</h1>
<h3 id='login_1'>
Enter details and login to continue.
</h3>
</div>
<div class="inner two"
id="box_two">
<div class="head">
<h1> Welcome</h1>
<h2>Please Login</h2>
<div class="error">
Please Enter valid Password.
</div>
<div id="login"
class="login">
<form class="login_form" onsubmit="validate()">
<input type="text"
pattern="^\w+([\.-]?\w+)*#docquity.com"
id="uname"
class="inp uname"
name="uname"
placeholder="Username" required><br>
<input type="password"
minlength="6"
id="pass"
class="inp pwd"
name="pass"
placeholder="Password" required>
<small id="pass_error"></small>
<input type="submit"
id="smt"
value="Submit"
class="btn sbmt">
</form>
</div>
</div>
</div>
</div>
</body>
</html>
css code
body {
margin:0px;
height:100%;
border: none;
padding:0px;
}
.inner{
float:left;
width: 50%;
height: 100vh;
}
.one {
background-color:cornsilk;
}
.two{
/*background: rgb(63,94,251);*/
background: radial-gradient(circle, rgb(103, 126, 238) 0%, rgb(185, 74, 97) 150%);
padding: 0%;
border: 0%;
margin: 0%;
color: cornsilk;
}
.head{
height: auto;
padding-top: 15%;
}
.head h1 {
text-align: center;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
font-size: 40px;
}
.head h2{
text-align: center;
}
form {
margin: 0 auto;
}
.login {
text-align: center;
}
.inp {
border: none;
background: none;
box-shadow: 0px 2px 0px 0px white;
width: 50%;
color:blanchedalmond;
font-size: 25px;
outline: none;
margin-left: 20%;
margin-right: 20%;
margin-top: 5%;
padding-left: 2%;
}
.inp:focus:invalid{
box-shadow: 0px 2px 0px 0px red;
}
small {
color: red;
font-weight: bold;
}
.pwd {
margin-bottom: 10%;
}
.uname::placeholder, .pwd::placeholder{
color: blanchedalmond;
}
.btn {
align-items: center;
background-color: #fff;
border-radius: 24px;
border-style: none;
box-shadow: rgba(0, 0, 0, .2) 0 3px 5px -1px,rgba(0, 0, 0, .14) 0 6px 10px 0,rgba(0, 0, 0, .12) 0 1px 18px 0;
box-sizing: border-box;
color: #000102;
display: inline-flex;
height: 48px;
justify-content: center;
padding: 2px 24px;
width: 30%;
font-size: 25px;
}
.sbmt:hover{
background-color: darkslategray;
color: floralwhite;
}
.main {
margin-top: 20%;
text-align: center;
font-size: 60px;
background: -webkit-linear-gradient(rgb(171, 10, 185), rgb(209, 8, 42));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.one h3 {
text-align: center;
color:darkslategray;
}
.error_message{
background-color: red;
margin-left: 25%;
margin-right: 25%;
text-align: center;
}
.error {
display: none;
}
javascript code
function mail_velidate(mail){
var mail_pattern = /^\w+([\.-]?\w+)*#docquity.com/;
if(mail.match(mail_pattern))
{
return true;
}
else{
return false;
}
}
function password_check(pass){
var pass_regex = /^(?=.*[0-9])(?=.*[!##$%^&*])[a-zA-Z0-9!##$%^&*]{7,15}$/;
if (pass.match(pass_regex)){
return true;
}
else{
return false;
}
}
const mail = document.getElementById("uname");
document.addEventListener("DOMContentLoaded", function() {
var elements = document.getElementsByClassName("uname");
for (var i = 0; i < elements.length; i++) {
elements[i].oninvalid = function(e) {
e.target.setCustomValidity("");
if (!e.target.validity.valid) {
e.target.setCustomValidity("Give valid docquity mail id");
}
};
elements[i].oninput = function(e) {
e.target.setCustomValidity("");
};
}
})
function validate(){
var user = document.getElementById("uname").value;
var pass = document.getElementById("pass").value;
if(password_check(pass)){
document.getElementById('login').innerHTML = "<h1>Logged In</h1>";
document.getElementById('login_1').innerHTML = '<h3>Logged In successfully</h3>';
document.getElementById('box_two').style.display = 'none';
document.getElementById('box_one').style.width = '100%';
}
else{
document.getElementsByClassName("error")[0].className = "error_message";
}
}
the line of code document.getElementsByClassName("error")[0].className = "error_message"; giving me problem.

On your HTML, you need to place event.preventDefault(); like this:
<form class="login_form" onsubmit="event.preventDefault(); validate();">
event.preventDefault() will stop any default behavior when submitting. In the case of submit, it is the page reload.
https://codepen.io/tunk/pen/tjGdp

I want to replace the inp element to span element the code is working fine for 1 time only when I click 2nd time on the check btn value goes undefined

I want to replace the inp element to span element the code is working fine for 1 time only when I click 2nd time on the check btn value goes undefined
let text = document.getElementsByClassName('text');
let items = document.querySelectorAll('.items');
let checkBtn = document.querySelector('.check-icon');
// Creating a SPAN element and appending it to div
for (let i = 0; i < text.length; i++) {
checkBtn.addEventListener('click', () => {
let span = document.createElement('span');
let val = document.createTextNode(text[i].value);
span.appendChild(val);
span.setAttribute('class', 'text');
items[i].appendChild(span);
text[i].value = '' // setting the input value to empty once clicked onto the check button
text[i].parentNode.replaceChild(span, text[i]);
})
}
.mainContainer {
height: 400px;
width: 900px;
background-color: white;
margin: 200px auto;
border: 5px solid black;
border-radius: 8px;
}
.heading {
font-family: 'Roboto', sans-serif;
font-weight: bold;
text-align: center;
position: relative;
top: 15px;
}
.container {
width: 800px;
height: auto;
border: 2px solid black;
display: grid;
grid-template-columns: 230px 230px 230px 50px 50px;
align-items: center;
margin: auto;
position: relative;
top: 30px;
padding: 10px;
background-color: #007bff;
}
.items {
display: flex;
align-items: center;
justify-content: center;
font-family: 'Roboto', sans-serif;
font-weight: bold;
color: #fff;
}
.text {
width: 130px;
}
.icons {
font-size: 18px;
border: 2px solid #fff;
margin-left: 12px;
color: #007bff;
cursor: pointer;
background-color: #fff;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
}
.icons:hover {
color: #fff;
background-color: #007bff;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
</head>
<body style="background-color: #007bff">
<div class="mainContainer">
<h1 class="heading">Details Collector</h1>
<div class="container">
<div class="items">
<label class="label" for="Name">Name :</label>
<input class="text" type="text" />
</div>
<div class="items">
<label class="label" for="State">State :</label>
<input class="text" type="text" />
</div>
<div class="items">
<label class="label" for="Country">Country :</label>
<input class="text" type="text" />
</div>
<div class="check-icon icons">
<i class="fa fa-check" aria-hidden="true"></i>
</div>
<div class="plus-icon icons ">
<i class="fa fa-plus" aria-hidden="true"></i>
</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>

Second time around the span does not have a value
const container = document.querySelector(".container");
// Creating a SPAN element and appending it to div
container.addEventListener('click', (e) => {
const tgt = e.target.closest(".icons");
if (tgt) {
if (tgt.classList.contains("swapped")) return; // stop
if (tgt.classList.contains("check-icon")) {
tgt.classList.add("swapped")
let texts = document.querySelectorAll('.text');
let items = document.querySelectorAll('.items');
texts.forEach((text, i) => {
let span = document.createElement('span');
let val = document.createTextNode(text.value ? text.value : '');
span.appendChild(val);
span.classList.add('text');
items[i].appendChild(span);
if (text.value) text.value = '' // setting the input value to empty once clicked onto the check button
text.parentNode.replaceChild(span, text);
})
}
}
})
.mainContainer {
height: 400px;
width: 900px;
background-color: white;
margin: 200px auto;
border: 5px solid black;
border-radius: 8px;
}
.heading {
font-family: 'Roboto', sans-serif;
font-weight: bold;
text-align: center;
position: relative;
top: 15px;
}
.container {
width: 800px;
height: auto;
border: 2px solid black;
display: grid;
grid-template-columns: 230px 230px 230px 50px 50px;
align-items: center;
margin: auto;
position: relative;
top: 30px;
padding: 10px;
background-color: #007bff;
}
.items {
display: flex;
align-items: center;
justify-content: center;
font-family: 'Roboto', sans-serif;
font-weight: bold;
color: #fff;
}
.text {
width: 130px;
}
.icons {
font-size: 18px;
border: 2px solid #fff;
margin-left: 12px;
color: #007bff;
cursor: pointer;
background-color: #fff;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
}
.icons:hover {
color: #fff;
background-color: #007bff;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
</head>
<body style="background-color: #007bff">
<div class="mainContainer">
<h1 class="heading">Details Collector</h1>
<div class="container">
<div class="items">
<label class="label" for="Name">Name :</label>
<input class="text" type="text" />
</div>
<div class="items">
<label class="label" for="State">State :</label>
<input class="text" type="text" />
</div>
<div class="items">
<label class="label" for="Country">Country :</label>
<input class="text" type="text" />
</div>
<div class="check-icon icons">
<i class="fa fa-check" aria-hidden="true"></i>
</div>
<div class="plus-icon icons ">
<i class="fa fa-plus" aria-hidden="true"></i>
</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>

How to make a inline-block fit whole width?

I won't to make an inline block fill whole the width. Actually I am using amp. I want to make all the fields fit the whole width. But I am unable to make it. I can do it using !important. But it is a bad practice. So how I can I do it without using !important? I am using the bellow code:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script async custom-element="amp-autocomplete" src="https://www.cdn.ampproject.org/v0/amp-autocomplete-0.1.js"></script>
<script async src="https://www.cdn.ampproject.org/v0.js"></script>
<style>
.page-form {
background: url(https://mydoginsurance.com.au/images/form-bg-lg.webp) no-repeat center;
background-size: cover;
position: relative;
color: #fff;
}
.section {
padding: 63px 0;
}
.page-form .container {
position: relative;
z-index: 100;
}
.container, .container-fluid, .container-sm, .container-md, .container-lg, .container-xl {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.justify-content-center {
-ms-flex-pack: center;
justify-content: center;
}
.row {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
}
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col, .col-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm, .col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md, .col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg, .col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl, .col-xl-auto {
position: relative;
width: 100%;
padding-right: 15px;
padding-left: 15px;
}
.text-center{
text-align: center;
}
.mb-5, .my-5 {
margin-bottom: 3rem;
}
h2, .h2 {
font-size: 2.5rem;
}
.page-form .container .form-box {
padding: 0;
border: none;
background: none;
box-shadow: none;
-webkit-box-shadow: none;
}
.form-box {
background: rgba(255, 255, 255, 0.25);
border: 1px solid #eaeaea;
-webkit-box-shadow: 0 13px 29px 0 rgb(0 0 0 / 35%);
box-shadow: 0 13px 29px 0 rgb(0 0 0 / 35%);
padding: 40px;
}
.justify-content-center {
-ms-flex-pack: center;
justify-content: center;
}
.form-box .mb-4 {
position: relative;
}
.form-box .form-control {
padding: 20px 0 0 18px;
height: 54px;
border: none;
border-radius: 2px;
color: #000;
}
.form-control, input[type=text], input[type=email], input[type=tel], input[type=file], input[type=search], textarea, select {
display: block;
width: 100%;
padding: 0.6rem 0.75rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #495057;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
border-radius: 0rem;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
[type="search"] {
outline-offset: -2px;
-webkit-appearance: none;
}
</style>
</head>
<body>
<div class="page-form section" id="getquote">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8">
<div class="mb-5 text-center">
<h2>Submit your Dog info and we'll address your request ASAP</h2>
</div>
<div class="form-box">
<form action="https://mydoginsurance.com.au/choose-plan.html" method="GET" target="_top">
<div class="row justify-content-center">
<div class="col-sm-6">
<div class="mb-4">
<input type="text" name="dog_name" class="form-control" aria-labelledby="label_dog_name" required>
<label id="label_dog_name" for="dog_name">Name of Dog</label>
</div>
</div>
<div class="col-sm-6">
<div class="mb-4">
<amp-autocomplete filter="substring" min-characters="0" style="padding: 0; color: black; display: cover">
<input type="search" name="breed" class="form-control" id="tbdog" aria-labelledby="label_dog_breed" required>
<label id="label_dog_breed" for="breed">Breed of Dog</label>
<script type="application/json">
{ "items": [ "Affenpinscher", "Afghan Hound", "Airedale Terrier", "Akita" }
</script>
</amp-autocomplete>
</div>
</div>
<div class="col-sm-6">
<div class="mb-4">
<!--<input type="number" name="age" min="1" max="8" class="form-control" required>-->
<select name="age" class="form-control" aria-labelledby="label_dog_age" required>
<option></option>
<option value="0">
< 1 </option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<label id="label_dog_age" for="age">Age of Dog</label>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I have hosted the site so that you can take a closer look to it: https://hungry-swanson-e6b32d.netlify.app/

you can add width: 100% to it (the amp-autocomplete component)

Categories