How to get the value of an input using the name javascript attribute

Question

How to get the value of an input using the name javascript attribute

Navigation

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

3

I was testing some code and realized that I was not able to get the value of a input through the attribute name document.getElementsByName().value , but with id working normally. Is it possible to get the value using name ? If so, how should I do it?

Through the name

function t() {
  var t1 = document.getElementsByName("01").value;
  var t2 = document.getElementsByName("02");
  
  t2.value = t1;
};

<input type='text' name='01'/><br>
<button onclick='t()'>CONFIRMAR</button><br>
<textarea id='02'></textarea>

Through the id:

function t() {
  var t1 = document.getElementById("01").value;
  var t2 = document.getElementById("02");
  
  t2.value = t1;
};

<input type='text' id='01'/><br>
<button onclick='t()'>CONFIRMAR</button><br>
<textarea id='02'></textarea>

javascript html

asked by anonymous 05.08.2018 / 06:40

3 answers

1

In this code there is an error, in your HTML, textarea has no attribute name , only id , set to "02" , but in your Javascript you try to find it by name really never will find. But even if you correct this error, there is one more problem. As they said, the getElementsByName function returns a list of elements, that is, you need to find the element you want, in this case it is at index 0, but if you have another element as the same property name ( of the same TAG, or different) before it, you will get an error, because index 0 will not be the element you want.

The most interesting thing is that you use the native functions document.querySelector or document.querySelectorAll to make more specific CSS selections. In your case you can use document.querySelector('input[name="01"]') instead of document.getElementsByName("01") , which will return a NodeElement and you can access the value property. This selection guarantees that the result will be an element of TAG input and attribute name="01" , which getElementsByName does not.

Here is the corrected example

function t() {
  var t1 = document.querySelector('input[name="01"]');
  var t2 = document.querySelector('textarea[name="02"]');
  
  t2.value = t1.value;
};

<input type='text' name='01'/><br>
<button onclick='t()'>CONFIRMAR</button><br>
<textarea name='02'></textarea>

Remembering that if you do not want to specify the TAG of the element in the CSS selection, you can use asterisk, like this: '*[name="01"]' . More examples of CSS selections you can see in W3Scools: CSS Attribute Selectors and CSS Selectors

06.08.2018 / 00:52

0

document.getElementsByName returns a NodeList of elements, so it does not have the property .value
Use document.getElementsByName("01")[0].value and t5[0].value

05.08.2018 / 06:45

Spring Model 4.3.1 Is there any way to connect Python to a Websocket as if it were a client?

score 3 · Accepted Answer

The element you want to get must have a name attribute:

<input type='text' id='01' name="campo" value="foo">
                             ↑

Since the document.getElementsByName method returns a node list (list of nodes), you must get one of the list elements through an index, which starts with zero ( [0] ) , where [0] is the first element of the page, [1] the second and so on:

var el = document.getElementsByName("campo");
console.log(el[0].id);
console.log(el[1].id);

<input type='text' id='01' name="campo">
<input type='text' id='02' name="campo">

The document.getElementsByName can be useful for use with radio buttons , since in a group of them, each member has the same name :

<p>
  <input type="radio" name="sexo" value="M"> Masculino
</p>
<p>
  <input type="radio" name="sexo" value="F"> Feminino
</p>

Since a id must be unique on page o, document.getElementById does not returns a node list , only the selected element. So much so that the name is in the singular ( getElement ) and not in the plural getElements