如何在循环中从listitem /无序列表的输入中获取值

Question

I am trying to create a general JS to get the id and value from the input. Then, put those into a JsonObject to pass back to the server. The list is like this:

<ul id="myList" data-role="listview" data-inset="true">
    <li> Field One <input id="Field_One" /></li>
    <li> Field Two <input id="Field_Two" /></li>
    <li> Field Three <input id="Field_Three" /></li>
    <li> Field Four <input id="Field_Four" /></li>
</ul>

I could get the data for the listitem,

function Test(){
    var unorderedList = document.getElementById('myList'); 
    var ListItems = unorderedList.getElementsByTagName('li');  
    var listID

    for (var i = 0; i < ListItems.length; i++) {
        listID = ListItems[i].firstChild.data;
        //alert(listID);
    };  
}

but I couldn't go further to get the text ID or value. (well, if i have id then i can get value...).

How do I get the input id/value in the ul/il with a loop?

Answer 1

No one is saying the firstChild will be the input. In fact, it's most probably a text node.

Give it a try:

function Test() {
    var unorderedList   = document.getElementById('myList'),
        ListItems       = unorderedList.getElementsByTagName('li');  

    for (var input, i = 0; i < ListItems.length; i++) {
        input = ListItems[i].getElementsByTagName('input')[0];
        console.log(input.id, input.value);
    }
}

Code Example

Answer 2

You could use getAttribute to fetch the id. So:

 listID = ListItems[i].firstChild.getAttribute('id');

Answer 3

You could just directly get the inputs. In your example there does not appear to be a reason to get the LIs first:

http://jsfiddle.net/ysL5B/

function Test(){
    var unorderedList = document.getElementById('myList'); 
    var ListItems = unorderedList.getElementsByTagName('input');  

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