3

Tenho a seguinte codificação e gostaria de limpar o formulário de todos os campos que tiver o mesmo name. Porém não sei o porque que não limpa os campos
PS: Quais propriedades do input text eu posso usar para esse tipo de coisa?

function limpaCampos() {
  document.getElementsByName("form_txt").value = ''; // Limpa o campo
      console.log(document.getElementsByName("form_txt").value);
}
<html>
  <body>
    <input id="01" type="text" name="form_txt"/>
    <input id="01" type="text" name="form_txt"/>
    <input type="button" onclick="limpaCampos();"/>
  </body>
</html>

3 Respostas 3

3

Não sei exatamente se há algum modo de alterar todos os elementos de uma só vez. Uma maneira que eu sei de resolver é alterar individualmente em um loop.

No exemplo abaixo, armazeno todos os elementos do HTML que contém o mesmo name em uma variável, e utilizei um forEach nesta variável para limpar cada um deles, um por vez.

function limpaCampos() {
  var elements = document.getElementsByName("form_txt");
  elements.forEach(element => {
    console.log(element);
    element.value = '';
  })
}
<html>
  <body>
    <input id="01" type="text" name="form_txt"/>
    <input id="02" type="text" name="form_txt"/>
    <button type="button" onclick="limpaCampos();">Limpar</button>
  </body>
</html>

1
  • 1
    Entendi, muito obrigado @guastallaigor!!!
    – Sora
    17/05/2018 às 19:09
2

Pode usar um for para percorrer todos os campos e mudar o value para vazio:

function limpaCampos() {
  var campos = document.getElementsByName("form_txt");
  for(var x=0; x<campos.length; x++){
     campos[x].value= '';
  }
}
<input id="01" type="text" value="abc" name="form_txt"/>
<input id="01" type="text" value="def" name="form_txt"/>
<input type="button" value="limpar" onclick="limpaCampos();"/>

Notei também que usa o mesmo id nos dois campos. Isso é incorreto. Um id deve ser único na página.

Por outro lado também não entendi o uso do mesmo name em mais de um input tipo text, exceto se você quisesse criar um array, daí o name teria que ser: name="form_txt[]":

function limpaCampos() {
  var campos = document.getElementsByName("form_txt[]");
  for(var x=0; x<campos.length; x++){
     campos[x].value= '';
  }
}
<input id="01" type="text" value="abc" name="form_txt[]"/>
<input id="01" type="text" value="def" name="form_txt[]"/>
<input type="button" value="limpar" onclick="limpaCampos();"/>

1
  • Entendi, muito obrigado @dvd !!!
    – Sora
    17/05/2018 às 19:09
1

Dessa forma funciona, quando você pega pelo name, o retorno é um vetor.

 function limpaCampos() {
      var x = document.getElementsByName("form_txt");
      for (i = 0; i < x.length; i++) {
              x[i].value = "";
      }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<input id="01" type="text" name="form_txt"/>
    <input id="01" type="text" name="form_txt"/>
    <input type="button" onclick="limpaCampos();"/>

1
  • Entendi, é da mesma forma que os outros, só que em vez de foreach é um for com um vetor, obrigado !!
    – Sora
    17/05/2018 às 19:11

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

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .