CODEWITHSUNDEEP
javascriptjquery
Caverman
Caverman

Reputation: 3739

Not able to get values from a NodeList?

I have an MVC project that I'm storing record ID values in hidden fields. Then when the user updates the page I use querySelectorAll to put them all into a List. From there I need to loop through the list and call an AJAX function to update the database.

When I initially created it I used Array.from to put the objects into an Array and from there just loop through that array to call my Ajax. Thing is I found out that this does not work in IE11. I typically use Chrome but the customer base is IE11.

This is what I used to get it to work in Chrome. It gets all the hidden fields with an ID='RID', then converts to an Array, and then loop that Array.

let listItems = document.querySelectorAll('input[type="hidden"]#RID');
console.log(listItems);

var bidRID = Array.from(listItems, function (el) { return el.value })   
for (var i = 0, l = bidRID.length; i < l; i++) { 
    ....AJAX CALL....
    data: { rid: bidRID[i], prefOrder: i },
}

I have been searching for what I can do in IE11 and trying some different things but can't seem to figure out what to do here.

I looked at the list in the Debug tools and it's a list of hidden fields as expected. So, I thought I could possible loop through that list of objects and get the "value" but the things I've tried are coming back blank or NULL. 

let listItems = document.querySelectorAll('input[type="hidden"]#RID');

for (var i = 0, l = listItems.length; i < l; i++) {
    alert(listItems[i].val);
};

also tried

for (var i = 0, l = listItems.length; i < l; i++) {
    alert(listItems[i].innerHTML);
};

and

for (var i = 0, l = listItems.length; i < l; i++) {
    alert(listItems[i].NodeValue);
};

Here is a screenshot of what the NodeList looks like when viewing it from the console.

enter image description here

Upvotes: 0

Views: 280

Answers (1)

Asons
Asons

Reputation: 87303

First off, id's should be unique, second, with javascript you use .value to get an input value.

A note, when combine type, id and attribute selector, do like this 'input#RID[type="hidden"]', though since id's is unique one really only need the id #RID.

Since they all have a name attribute, you can use that instead of the id, either combined with [type="hidden"] or w/o.

let listItems = document.querySelectorAll('input[type="hidden"][name="RID"]');

for (var i = 0; i < listItems.length; i++) {
    console.log(listItems[i].value);
};

Stack snippet

let listItems = document.querySelectorAll('input[type="hidden"][name="RID"]');

for (var i = 0; i < listItems.length; i++) {
  console.log(listItems[i].value);
};
<input type="hidden" name="RID" value="1">
<input type="hidden" name="RID" value="2">
<input type="hidden" name="RID" value="3">
<input type="hidden" name="RID" value="4">
<input type="hidden" name="RID" value="5">

If they for an unknown reason still have the same id, you can target them with the attribute selector, like this

let listItems = document.querySelectorAll('input[type="hidden"][id="RID"]');

for (var i = 0; i < listItems.length; i++) {
  console.log(listItems[i].value);
};
<input type="hidden" id="RID" value="1">
<input type="hidden" id="RID" value="2">
<input type="hidden" id="RID" value="3">
<input type="hidden" id="RID" value="4">
<input type="hidden" id="RID" value="5">

Upvotes: 1

Related Questions