How to clear html form fields? [closed]

Question

How to clear html form fields? [closed]

Navigation

#1 by (3 votes)
#2 by (1 votes)
#3 by (1 votes)
#4 by (0 votes)

1

javascript variables that reference each field in 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 html jquery

asked by anonymous 27.02.2015 / 20:54

4 answers

AJAX request gives error and status "canceled" How to search by ID in MySQL

score 3 · Answer 1

3

You can use it so I think that's what you want if you do not tell me

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

27.02.2015 / 20:57

score 1 · Answer 2

1

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

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

27.02.2015 / 20:59

score 1 · Answer 3

You would need to use Javascript if you needed to reset a variable or clear a specific field, as proposed in César Souza's answer . If you need to clear all fields, use 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 on that button all fields will be reset. Or, make 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, CSS has no relevance and was used only to make the view more 'presentable'.

score 0 · Answer 4

In your code you said that the variables refer to fields, but in fact they refer only to 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 get the value of the variable codPessoa , call it:

console.log(codPessoa.val());

or

alert(codPessoa.val());

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

codPessoa.val("");