Cleaning Up Form Fields

Asked

Viewed 1,739 times

3

I have the following encoding and would like to clear the form of all fields that have the same name. But I don’t know why you don’t clear the fields
PS: What properties of input text I can use for this kind of thing? 

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>

javascript html5

3 answers

3


I don’t know exactly if there is any way to change all the elements at once. One way I know to resolve is to change individually into one loop.

In the example below, I store all the HTML elements that contain the same name in a variable, and use a forEach in this variable to clear each of them one at a time.

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

    Got it, thanks a lot @guastallaigor!!!

2

Can use a for to go through all fields and change the value for empty:

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();"/>

I also noticed that you use the same id in both fields. This is incorrect. A id should be unique on the page.

On the other hand also did not understand the use of the same name in more than one input guy text, except if you wanted to create an array, hence the name would have to be: 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();"/>

  • Got it, thanks a lot @dvd !!!

1

This way it works, when you take the name, the return is an array.

 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();"/>

  • I get it, it’s the same way as the others, only instead of foreach it’s a for with a vector, thank you !!

Browser other questions tagged javascript html5

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