Entrar Ainda não tem acesso?
2
respostas

[Dúvida] Enviar dados de um form para javascript

por Lucas Novaes Vieira
| 27.2k xp | 17 posts

Fala pessoal,

Criei um formulário, onde quero armazenar os dados inseridos para o usuário e mostrar em uma outra página html ao enviar este formulário. Porém sempre quando envio, os dados não são armazenados e os valores resetados.

<form action="userpage.html">
        <div class="campo__nome">
            <label for="nome"><strong>Nome:</strong></label>
            <input type="text" name="nome" id="nome" required>
        </div>
        <br>
        <div class="campo__nome">
            <label for="sobrenome"><strong>Sobrenome:</strong></label>
            <input type="text" name="sobrenome" id="sobrenome">
        </div>
        <br>
        <div class="campo">
            <label for="email"><strong>Email:</strong></label>
            <input type="email" name="email" id="email"> 
        </div>
        <br>
        <div class="campo">
            <label for="idade"><strong>Quantos anos você tem?</strong></label>
            <input type="number" name="idade" id="idade" required>
        </div>
        <br>
        <div class="campo">
            <label for="estudo"><strong>Qual linguagem de programação você está estudando?</strong></label>
            <select name="estudo" id="estudo" required>
                <option selected disabled value="">--Escolha</option>
                <option value="Java">Java</option>
                <option value="Kotlin">Kotlin</option>
                <option value="Node.js">NODE.JS</option>
                <option value="C#">C#</option>               
            </select>
        </div>
        <br>
        
        <input id="enviar" type="submit"></input>
    </form>


const enviar = document.querySelector('#enviar');



enviar.addEventListener("submit",function(){

    var name = document.getElementById('nome').value;
    console.log(name);
    
})

Fiz um teste para aparecer o valor do nome do usuário mas não aparece.

Agradeço o retorno.

2 respostas
por Luis Dias
| 2724.6k xp | 2468 posts
Developer PHP (⌐■_■)

Oi, Lucas


const formulario = document.querySelector('form');

formulario.addEventListener("submit", function (event) {
  event.preventDefault();
  let nome = formulario.nome.value;
  let sobrenome = formulario.sobrenome.value;
  let email = formulario.email.value;
  let idade = formulario.idade.value;
  let estudo = formulario.estudo.value;
  console.log(nome, sobrenome, email, idade, estudo);
  let enviar = confirm("Deseja enviar o formulário?");
  if (enviar) {
    formulario.submit();    
  }  
});
por Lucas Novaes Vieira
| 27.2k xp | 17 posts

Fala Luis, Primeiramente agradeço o retorno.

A maneira que me encaminhou, consegui receber os dados no JS. A ideia agora é mostrar esses valores em uma outra página HTML, porém este erro aparece: Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Página do usuário</title>
</head>
<body>
    <h1 id="dados__user"></h1>

    <script type="text/javascript" src="script.js"></script>
</body>
</html>

const formulario = document.querySelector('form');



formulario.addEventListener("submit",function(event){

    event.preventDefault();

    var nome = formulario.nome.value;
    var sobrenome = formulario.sobrenome.value;
    var email = formulario.email.value;
    var idade = formulario.idade.value;
    var estudo = formulario.estudo.value;

    console.log(nome,sobrenome,email,idade,estudo);
    
})


document.getElementById('dados__user').innerHTML = "Olá " + nome + ", você tem " + idade + "anos e já está aprendendo " + estudo + "!";