Entrar Ainda não tem acesso?
1
resposta

teria como usar form.reset() para limpar o formulário?

Referente ao curso JavaScript: conhecendo o Browser e padrões de projeto

por Estudante
| 91.5k xp | 15 posts

eu achei confuso a maneira de como o professor abordou para limpar os campos do formulário assim que ele fosse enviado. Teria alguma forma de fazer o exemplo do professor mas usando o form.reset()? poderia ser algo nesse exemplo aqui

var campos=[
    document.querySelector('#data'),
    document.querySelector('#quantidade'),
    document.querySelector('#valor')

]
console.log(campos)

    var tbody=document.querySelector('table tbody');

document.querySelector('.form').addEventListener('submit', function(event){
    event.preventDefault();

    form.reset();


    var tr=document.createElement('tr');

    campos.forEach(function(campo){

        var td=document.createElement('td');
        td.textContent=campo.value;

        tr.appendChild(td);
    });



var tdVolume=document.createElement('td');
    tdVolume.textContent=campos[1].value * campos[2].value;
    tr.appendChild(tdVolume);

    tbody.appendChild(tr);

});
1 resposta
por Rafael Rocha
| 2750.4k xp | 5824 posts
Alura Scuba Team Time Alura | Apoio Educacional no Fórum

Olá, tudo bem com você?

Peço desculpas pela demora em lhe responder.

Podemos fazer o uso do método reset para limparmos o formulário após o envio dos dados. Para isso será necessário realizarmos uma refatoração do método _limpaFormulario() da classe NegociacaoController. Deixando o como apresentado abaixo.

_limpaFormulario() {
    let formulario = document.querySelector('.form');
    formulario.reset();
    this._inputData.focus();
}

No código acima, estamos coletando o formulário utilizando o seletor de classes, e logo após realizamos a chamada do método reset no formulário. Assim, sempre que o método _limpaFormulario for chamado, os campos preenchidos no formulário serão resetados e apontando o cursor para o campo data.

Após aplicar a mudança descrita acima, basta salvar o arquivo NegociacaoController.js. Abra o arquivo index.html adicione uma nova negociação verifique a limpeza dos dados do formulário.

Espero ter lhe ajudado. Em caso de dúvidas estou à disposição.

Não hesite em voltar ao fórum para continuar aprendendo e interagindo com a comunidade.

Abraços e bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!