0

Como posso imprimir os dados de um formulário através de um retorno de uma função?

const formularioDeDados = document.getElementById('formulario');
function obterDadosDaTela(){
    const nome = document.getElementById('nome').value;
    const idade = document.getElementById('idade').value;
    const sexo = document.getElementById('sexo').value;
    const convenio = document.getElementById('convenio').value;
    return {
        nome,
        idade,
        sexo,
        convenio
    }
}
formularioDeDados.addEventListener('submit', function(event){
    // imprimirFormulario??
})
<form action="" id="formulario">
    <label for="nome">Nome:</label>
    <input type="text" id="nome" />
    <br />
    <label for="idade">Idade:</label>
    <input type="number" maxlength="2" id="idade" />
    <br />
    <label for="sexo">Sexo:</label>
    <input type="text" id="sexo" />
    <br />
    <label for="convenio">Convenio:</label>
    <input type="text" id="convenio" />
    <br />
    <button type="submit">Enviar</button>
</form>

1 Resposta 1

0

Consegui corrigir, adicionei um preventDefault() na função de addEventListener, e adicionei um console, dentro da mesma após o preventDefault().

const formularioDeDados = document.getElementById('formulario');
function obterDadosDaTela(){
    const nome = document.getElementById('nome').value;
    const idade = document.getElementById('idade').value;
    const sexo = document.getElementById('sexo').value;
    const convenio = document.getElementById('convenio').value;
    return {
        nome,
        idade,
        sexo,
        convenio
    }
}
formularioDeDados.addEventListener('submit', function(event){
    event.preventDefault();
    console.log(obterDadosDaTela());
})
<form action="" id="formulario">
    <label for="nome">Nome:</label>
    <input type="text" id="nome" />
    <br />
    <label for="idade">Idade:</label>
    <input type="number" maxlength="2" id="idade" />
    <br />
    <label for="sexo">Sexo:</label>
    <input type="text" id="sexo" />
    <br />
    <label for="convenio">Convenio:</label>
    <input type="text" id="convenio" />
    <br />
    <button type="submit">Enviar</button>
</form>

Fui .. !

Você deve fazer log-in para responder a esta pergunta.