Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Follow
Facebook Twitter Instagram Youtube
Contact

Button not showing console log function

byMR
January 31, 2023

This may be a simple question, but i am a "starter" in javascript, and i managed to do a simple form just the way i wanted it to be, (on the look side of things), i was trying to do a alert box, but in the middle of testing i saw that when trying to do a console log, it wasn’t showing up in the console the message, if anyone know what is the problem, i would appreciate 🙂

Here are the codes: (in order, javascript, css, html)

const cadForm = document.getElementById('Formulario');

function alert(){
    Swal.fire({
        icon: 'error',
        title: 'Ops..',
        text: 'Pelo visto a placa do veiculo não está cadastrada.',
        footer: '<a href="">Gostaria de cadastrar?</a>'
      })
}

if (cadForm){
    cadForm.addEventListener("submit", async (e) => {
    
        console.log("Success");
    })
}
/* ===== 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;
}
<!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">

    <!--<title>Responsive Regisration Form </title>--> 
</head>
<body>
    <div class="container">
        <header>Faça seu Cadastro</header>

        <form action="#">
            <div class="form first" id="Formulario">
                <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>Ocupação</label>
                            <select >
                                <option disabled selected>Você é um autonomo?</option>
                                <option>Sim</option>
                                <option>Não</option>
                            </select>
                        </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>Placa do Veículo</label>
                            <input type="text" placeholder="Caso seja autonomo" >
                        </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>

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

>Solution :

Your id was on a div, not on a form

You also have to preventDefault() if you want to see the console.log, otherwise the site will reload

const cadForm = document.getElementById('Formulario');

function alert(){
    Swal.fire({
        icon: 'error',
        title: 'Ops..',
        text: 'Pelo visto a placa do veiculo não está cadastrada.',
        footer: '<a href="">Gostaria de cadastrar?</a>'
      })
}

if (cadForm){
    cadForm.addEventListener("submit", async (e) => {
        e.preventDefault()
        console.log("Success");
    })
}
/* ===== 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;
}
<!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">

    <!--<title>Responsive Regisration Form </title>--> 
</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>Ocupação</label>
                            <select >
                                <option disabled selected>Você é um autonomo?</option>
                                <option>Sim</option>
                                <option>Não</option>
                            </select>
                        </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>Placa do Veículo</label>
                            <input type="text" placeholder="Caso seja autonomo" >
                        </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>
byMR
Published
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Read more

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading