For a <input type="text" id="vegs" name="fruits">, it is possible to use document.getElementbyId('vegs').value to get the input of the text box.
But is there a way to get input by using the name attribute of the <input>tag?
document.getElementsbyName('fruits').value doesn't seem to work.
-
document.getElementsByName('fruits')[0].valueHardik Shah– Hardik Shah2019-03-03 15:40:38 +00:00Commented Mar 3, 2019 at 15:40
Add a comment
|
4 Answers
document.getElementsByName returns a NodeList (which is like an array), so you need to select the first item.
There could be multiple inputs with name of fruits. If that is the case, iterate over the NodeList just like you would iterate over an array.
I made a snippet for you:
document.getElementById("button").addEventListener("click", () => {
console.log(document.getElementsByName("fruits")[0].value);
});<input type="text" id="vegs" name="fruits">
<button id="button">Click</button>If you want to use multiple inputs with the same name, you can use the snippet below.
This uses a .forEach() loop to iterate over the fruits array (I know its a NodeList, but think of it as an array. It has very similar features and will make life much easier this way).
var fruits;
document.getElementById("button").addEventListener("click", () => {
fruits = document.getElementsByName("fruits"); //fruits is now a NodeList
fruits.forEach(element => {
console.log(element.value);
});
});<input type="text" id="vegs" name="fruits">
<input type="text" id="vegs" name="fruits">
<input type="text" id="vegs" name="fruits">
<input type="text" id="vegs" name="fruits">
<button id="button">Click</button>
6 Comments
Aniket G
@MegCullen no problem. With DOM, if the
.getElements is plural, it returns a NodeList. Otherwise, it returns a single itemAniket G
@MegCullen Right. I'll make a snippet for you in my answer demonstrating that right now
Aniket G
@MegCullen ok I updated my answer. Look at the second snippet.
Aniket G
Your welcome. I'm always glad to help. Good luck with your project!
|
You can also use document.querySelector().
function show_value() {
var ret = document.querySelector("input[name='fruits']").value;
console.log(ret);
}<input type="text" id="vegs" name="fruits">
<button onclick="show_value()">Click</button>Be careful with IE10 and below behavior when using getElementsByName.
The getElementsByName method works differently in IE10 and below. There, getElementsByName() also returns elements that have an id attribute with the specified value. Be careful not to use the same string as both a name and an id.
Comments
getElementsByName(): method of the Document object returns a NodeList Collection of elements with a given name in the document
You can access the first element using [0]
function change(){
console.log(document.getElementsByName('fruits')[0].value)
}<input type="text" onchange="change()" id="vegs" name="fruits">
1 Comment
Maheer Ali
@Meg Cullen accept the answer if you are satisfied.
this will do ..
document.getElementsByName("fruits")[0].value
getElementsByName returns array of elements having name= fruits . [0] returns the first element which in your case is the only element having name=fruits..
