Get and print data from a JavaScript form

Question

Get and print data from a JavaScript form

Navigation

#1 by (0 votes)

0

How can I print data from a form via a function return?

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>

javascript

asked by anonymous 06.06.2018 / 20:03

1 answer

how to return value of the FetchAPI request inside a variable? ng-repeat does not show blank values

score 0 · Accepted Answer

I was able to fix it, I added a preventDefault () function in addEventListener, and added a console, inside it after 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>

I went ..!