11
respostas

função event.preventDefault(); não funciona

Referente ao curso JavaScript : Programando na linguagem da web, no capítulo Conhecendo o querySelector e adicionando novos pacientes e atividade O Elemento input

por William Santos Gigliozzi
| 499.5k xp | 16 posts
Analista de TI

Olá pessoal,

A função event.preventDefault() está sendo ignorada..alguém tem ideia do que pode estar errado?

var botao = document.querySelector("#adicionar-paciente");

botao.addEventListener("click", function(event) { 

    event.preventDefault(); // impede o comportamento padrão da tag 'form'/

// capturando o que foi digitado pelo usuário nos campos
var campoNome = document.querySelector("#campo-nome");
var campoPeso = document.querySelector("#campo-peso");
var campoAltura = document.querySelector("#campo-altura");

// criando uma tr nova com os dados digitados pelo usuário nos campos 
var pacienteNovo = "<tr class='paciente'>"+
                    "<td class='info-nome'>" + campoNome.value + "</td>"+
                    "<td class='info-peso'>" + campoPeso.value + "</td>"+
                    "<td class='info-altura'>" + campoAltura.value + "</td>"+
                    "<td class='info-imc'></td>"+
                    "</tr>";

var tabela = document.querySelector("table"); // primeiro elemento
tabela.innerHTML = tabela.innerHTML + pacienteNovo; // recebe a tabela atual + o novo paciente

campoNome.value =     "";
campoPeso.value =     "";
campoAltura.value = "";

});
11 respostas
por Rafael Silva Nercessian
| 1050.9k xp | 1530 posts
Instrutor

Oi William, tudo bem?

Estive analisando seu código, pensei em algo que não sei se poderá ajudar. Será que se você alterar "click" por "submit" daria certo?

Abs

por William Santos Gigliozzi
| 499.5k xp | 16 posts
Analista de TI

Tudo bem Rafael!

Tentei a sugestão mas a página continua recarregando depois de clicar no botão..

por Estudante
| 313.6k xp | 3 posts

Como tá seu formulario? Veja no console qual erro está acontecendo, pode ser que não tenha o ID no html.

por William Santos Gigliozzi
| 499.5k xp | 16 posts
Analista de TI

O console não acusa nada.

<!doctype html>
<html lang="pt-br">
    <head>
        <meta charset="UTF-8">
        <title>Meus pacientes</title>
        <link rel="stylesheet" type="text/css" href="reset.css">
        <link rel="stylesheet" type="text/css" href="alura.css">
    </head>
    <body>
        <header>
            <div class="container">
                <h1 id="titulo">Meus pacientes</h1>
            </div>
        </header>
        <main class="container">
            <section>
                <h2>Meus pacientes</h2>
                <table>
                    <tr>
                        <th>Nome</th>
                        <th>Peso(kg)</th>
                        <th>Altura(m)</th>
                        <th>IMC</th>
                    </tr>
                    <tr class="paciente">
                        <td class="info-nome" id="nome-1">Leonardo</td>
                        <td class="info-peso" id="peso-1">57</td>
                        <td class="info-altura" id="altura-1">1.67</td>
                        <td class="info-imc" id="imc-1"></td>
                    </tr>
                    <tr class="paciente">
                        <td class="info-nome" id="nome-2">Paulo</td>
                        <td class="info-peso" id="peso-2">100</td>
                        <td class="info-altura" id="altura-2">2.00</td>
                        <td class="info-imc" id="imc-2"></td>
                    </tr>
                    <tr class="paciente">
                        <td class="info-nome" id="nome-2">Stwart</td>
                        <td class="info-peso" id="peso-2">110</td>
                        <td class="info-altura" id="altura-2">1.75</td>
                        <td class="info-imc" id="imc-2"></td>
                    </tr>
                        <tr class="paciente">
                        <td class="info-nome" id="nome-2">Johnathan</td>
                        <td class="info-peso" id="peso-2">98</td>
                        <td class="info-altura" id="altura-2">1.79</td>
                        <td class="info-imc" id="imc-2"></td>
                    </tr>
                </table>
                <button id="calcula-imcs" class="botao ">Calcular Imcs</button>
            </section>
            <section>
                <h2>Adicionar novo paciente</h2>    
                <form>
                    <fieldset>
                        <label for="nome">Nome:</label>
                        <input id="campo-nome" type="text" placeholder="digite o nome do seu paciente">
                    </fieldset>
                    <fieldset class="campo-medio">
                        <label for="peso">Peso:</label>
                        <input id="campo-peso" type="text" placeholder="digite o peso do seu paciente">
                    </fieldset>
                    <fieldset class="campo-medio">
                        <label for="altura">Altura:</label>
                        <input id="campo-altura" type="text" placeholder="digite a altura do seu paciente">
                    </fieldset>
                    <button id="adicionar-paciente" class="botao bto-principal">Adicionar</button>
                </form>
            </section>
        </main>
        <script src="percorre.js"></script> 
        <script src="calcula-imc.js"></script> 
        <script src="adiciona.js"></script>
    </body>
</html>
por Rodrigo Eduardo
| 76.4k xp | 2 posts

Talvez assim?

<form>
    <button type="submit">Enviar</button>
</form>

<script>
document.querySelector('form').addEventListener('submit', event => {
    event.preventDefault();
    code....
})
por Matheus Henrique Castiglioni
| 5304.5k xp | 9004 posts
Instrutor Senior Software Engineer

William no seu botão esta faltando você definir o tipo dele como button:

<button id="adicionar-paciente" class="botao bto-principal" type="button">Adicionar</button>

Acredito que ao realizar essa modificação o problema deve resolver.

por William Santos Gigliozzi
| 499.5k xp | 16 posts
Analista de TI

Matheus, obrigado pela sugestão mas não funcionou.

por William Santos Gigliozzi
| 499.5k xp | 16 posts
Analista de TI

Rodrigo, obrigado! Mas a sua sugestão também não funcionou..

por William Santos Gigliozzi
| 499.5k xp | 16 posts
Analista de TI

Agora está funcionando =) ; não por quê mas está..

por Wagner Souza
| 55k xp | 51 posts
Front-end developer

Olá William,

Notei nos comentários do seu código o seguinte

event.preventDefault(); // impede o comportamento padrão da tag 'form'/

Isso está errado. event.preventDefault(); vai impedir a ação que é executada por default no element selecionado. Ou seja, qual a ação padrão de um link? Ir para o href dele, certo? event.preventDefault(); tira essa ação.

Se você quer impedir que o formulário seja enviado, seu listener deve estar no formulário e não no button. E o type do button precisa ser submit para que ele envie o formulário.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <form action="/test">
        <button type="submit">click me</button>
    </form>

    <script>
        var form = document.querySelector('form');

        form.addEventListener('submit', function( event ) {
            event.preventDefault();
        });
    </script>
</body>
</html>
por Matheus Henrique Castiglioni
| 5304.5k xp | 9004 posts
Instrutor Senior Software Engineer

Estranho William era para ter resolvido, você pode dar uma olhada no exemplo que eu fiz, só o fator de você trocaro tipo do botão para type="button" ja era para o formulário não ser mais submetido:

Veja exemplo:

https://jsfiddle.net/mahenrique94/11t997u0/2/

Ai basta apenas adicionar um listener no click do botão para realizar o que você precisa, veja exemplo:

https://jsfiddle.net/mahenrique94/11t997u0/1/

Não é necessário realizar o event.preventDefault() no submit do form pois a idéia dele é fazer com que os elementos não tenham o comportamento padrão que no caso do button do tipo submit seria submeter o formulário, ou seja, ao declarar o mesmo você esta dizendo para o navegador que ao clicar no botão não submeta o formulário, veja exemplo:

https://jsfiddle.net/mahenrique94/11t997u0/3/

Manda para mim seu projeto, eu dou uma olhada o que estava acontecendo pois o event.preventDefault() era para funcionar sim.

A título de curiosidade além do preventDefault existe o stopPropagation dê uma pesquisada sobre ele, o return false do jquery utiliza ele:

// jQuery
return false;

// Javascript
event.stopPropagation();
event.preventDefault();

Os dois códigos acima são equivalentes.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software