How to clear html form fields?

Asked

Viewed 57,975 times

1

javascript variables that reference each field of my form

var checkbox = $('input:checkbox[name^=check]:checked');
    var categoriaVeiculo = $("#codCategoriaVeiculo").val();
    var descricaoVeiculo = $("#descricaoVeiculo").val();
    var placaVeiculo = $("#placaVeiculo").val();
    var chassiVeiculo = $("#chassiVeiculo").val();
    var anoFabricacaoVeiculo = $("#anoFabricacaoVeiculo").val();
    var ativo = $("input:radio[name='ativo']");
    var value = ativo.filter(":checked").val();
    var codPessoa = $("#codigoPessoa").val();
javascript jquery html

  • You can do form.reset(); Is that what you’re looking for? If you can’t explain the question better?

  • The question is far from clear so that it can be answered properly.

4 answers

6

You can wear it so I think that’s what you want if it’s not say

document.getElementById('campo').value=''; // Limpa o campo

1

In Jquery there is no reset method, but you can call the javascript native:

$('form').submit(function(){
    $(this)[0].reset();
});

1

You would need to use Javascript if you needed to reset a variable or clear a specific field, as proposed in reply from César Souza. If you need to clear all fields, use a input type='reset'.

input {
  margin: 2px;
  padding: 6px;
  width: 250px
}

input[type='text'],
input[type='email'],
input[type='password']{
  border: 1px solid #333;
}

input[type='reset']{
  border: none;
  background: #3498db;
  color: #fff;
  padding: 6px;
  width: 265px
}
<form action='#'>
  <input type='text' placeholder='Nome de usuário'/>
  <input type='email' placeholder='Email'/>
  <input type='password' placeholder='Senha'/>
  
  <input type='reset' value='Limpar todos os campos'/>
</form>

Make it clear to the user that by clicking that button all fields will be reset. Or, do a check before performing the action, as in the following example:

document.getElementById('confirm').onreset = function(){
  return confirm("Gostaria de resetar todos os campos?");  
};
input[type='text']{
  border: 1px solid #ccc;
  padding: 6px;
  width: 200px
}

input[type='reset']{
  background: #9b59b6;
  border: none;
  color: #fff;
  padding: 6px 18px
}
<form id='confirm'>
  <input type='text'/>
  <input type='reset' value='Limpar'/>
</form>

In both examples the CSS has no relevance and was used only to make the view more 'presentable'.

0

In your code you said that the variables refer to the fields, but in fact they refer only to the values, the most correct would be to use something like var [SUA VARIAVEL] = $("[SEU SELETOR]");, example:

var checkbox = $('input:checkbox[name^=check]:checked');
var categoriaVeiculo = $("#codCategoriaVeiculo");
var descricaoVeiculo = $("#descricaoVeiculo");
var placaVeiculo = $("#placaVeiculo");
var chassiVeiculo = $("#chassiVeiculo");
var anoFabricacaoVeiculo = $("#anoFabricacaoVeiculo");
var ativo = $("input:radio[name='ativo']");
var value = ativo.filter(":checked");
var codPessoa = $("#codigoPessoa");

To take the value of the variable codPessoa, call it that:

console.log(codPessoa.val());

or

alert(codPessoa.val());

To clear the field you can use, something like .val(""), example:

codPessoa.val("");

Browser other questions tagged javascript jquery html

You are not signed in. Login or sign up in order to post.