遍历多个div并从每个div提取每个输入值

Question

I have created an html page the will dynamically add or remove inputs, all within a parent div, each having their own div to determine each seperatly. I have the logic to loop through and find these child divs, however I cannot seem to figure out how to grab the inputs from each div, only the first child div even though I am looping through all children.

Any idea how?

html:

<div id="volumeRateDiv">
<div id="volumeRateDivNew_0" class="volumeRateDivChild">
    <input id="kc_start" type="number" name="kc_start" maxlength="9" step="1" min="0" placeholder="0">
    <input id="volume_rate" type="number" name="volume_rate" maxlength="12" step=".0001" min="0" placeholder="0.0000">
    <input id="delete_VolumeRate" type="button" name="delete_VolumeRate" value="Delete" onclick="removeItem('volumeRateDivNew_0')">
</div>
<div id="volumeRateDivNew_1" class="volumeRateDivChild">
    <input id="kc_start" type="number" name="kc_start" maxlength="9" step="1" min="0" placeholder="0">
    <input id="volume_rate" type="number" name="volume_rate" maxlength="12" step=".0001" min="0" placeholder="0.0000">
    <input id="delete_VolumeRate" type="button" name="delete_VolumeRate" value="Delete" onclick="removeItem('volumeRateDivNew_1')">
</div>
</div>

Javascript:

var divs = document.getElementsByClassName("volumeRateDivChild");

for(var i = 0; i < divs.length; i++)
{
    var div = divs[i];
    alert (div.className+" - "+div.id+" - "+document.getElementById("kc_start").value );
}

Answer 1

You could add the same index number (0, 1, etc) to the end of the inputs' IDs, and then use that in the for loop, eg:

for(var i = 0; i < divs.length; i++)
{
    var div = divs[i];
    alert (div.className+" - "+div.id+" - "+document.getElementById("kc_start_" + i).value );
}

Answer 2

The first comment in your answer is correct all id's should be unique.

If you can be certain that the input you want to extract the value of is always the first child then you could do the same as this jsfiddle

<div id="volumeRateDiv">
<div id="volumeRateDivNew_0" class="volumeRateDivChild">
    <input id="kc_start" type="number" name="kc_start" maxlength="9" step="1" min="0" placeholder="0" value="0"/>
        <input id="volume_rate" type="number" name="volume_rate" maxlength="12" step=".0001" min="0" placeholder="0.0000"/>
        <input id="delete_VolumeRate" type="button" name="delete_VolumeRate" value="Delete" onclick="removeItem('volumeRateDivNew_0')"/>
</div>
<div id="volumeRateDivNew_1" class="volumeRateDivChild">
    <input id="kc_start" type="number" name="kc_start" maxlength="9" step="1" min="0" placeholder="0" value="0"/>
    <input id="volume_rate" type="number" name="volume_rate" maxlength="12" step=".0001" min="0" placeholder="0.0000"/>
        <input id="delete_VolumeRate" type="button" name="delete_VolumeRate" value="Delete" onclick="removeItem('volumeRateDivNew_1')"/>
</div>
</div>

var divs = document.getElementsByClassName("volumeRateDivChild");

for(var i = 0; i < divs.length; i++)
{
    var div = divs[i];
    alert (div.className+" - "+div.id+" - "+div.children[0].value );
}

Answer 3

First of all, as @tymeJV already had mentioned, ids of HTML elements must be unique. So you need remove them or make them unique, if you plan to use them anywhere else (not in this case).

To locate elements inside your divs you could use classes or names. You can call getElementsByClassName or getElementsByName not only on document , but on any DOM-element. It could look like this:

var divs = document.getElementsByClassName("volumeRateDivChild");

for(var i = 0; i < divs.length; i++)
{
    var div = divs[i];
    alert(div.className+" - "+div.id+" - "+div.getElementsByName("kc_start")[0].value );
}

Answer 4

Do it this way

var divs = document.getElementsByClassName("volumeRateDivChild");

for(var i = 0; i < divs.length; i++)
{
    var div = divs[i];
    alert (div.className+" - "+div.id+" - "+div.children["kc_start"].value );
}

Demo: Demo