How to get value of an HTML element nested inside other HTML elemnts?

Question

I have HTML elements as shown below

<div id="container">
    <div>
        <span>
            <input type="text" id="item1" value="AA"/>
        </span>
    </div>
    <div>
        <span>
            <input type="text" id="item2" value="BB"/>
        </span>
    </div>
    <div>
        <span>
            <input type="text" id="item3" value="CC"/>
        </span>
    </div>
</div>

I need to extract array of values like [AA,BB,CC] and IDs like [1,2,3] -from item1,item2,item3 using JavaScript and Jquery .How to do the same?

Answer 1

Loop the inputs, pull the values, parse the item value. Something like this:

var ids = [];
var values = [];

$("input").each(function(){
   var input = $(this);
   var value = input.val();
   var id = input.attr("id").replace("item", "");

   ids.push(id);
   values.push(value);
});

Here is a working example (warning: two alert popups)

Notice the the input value is obtained using input.val() , this will ensure that the value retrieved is the current value as entered by the user. If you wanted the attribute value (which will not be changed simply by the user typing something else) you could use input.attr("value") instead

---

If you have other input elements on the page that you do not want to include then you need to be more specific with you selector. For example, if all the desired input elements are with the id="container" element, then you can use this instead:

$("#container input").each(...

Answer 2

Try this:

var vals = [];
var ids = [];
$("#container input").each(function(){
    vals.push($(this).val());
    ids.push($(this).attr("id").replace("item", ""));
});

Here is the jsfiddle:

Answer 3

var arr = $('#container').find('input').map(function(){
  return $(this).val();
}).get();

var ids = $('#container').find('input').map(function(){
  return $(this).attr('id').replace('item','');
}).get();

http://jsfiddle.net/mohammadAdil/Qhm5J/1/

Answer 4

Try

var idarray = [];
var valuearray = [];

$("#container input").each(function(){
   var $this = $(this);
   idarray.push($this.attr("id").substring(4));
   valuearray.push($this.val());
});

console.log(idarray);
console.log(valuearray);

Demo: Fiddle

Answer 5

var ids = $("input[id^='item']").map(function(i,e){
    return e.id;
});

var values = $("input[id^='item']").map(function(i,e){
    return $(e).val();
});

console.log(ids);
console.log(values);

Working Example: http://jsfiddle.net/RLsCX/

Answer 6

Please refer http://jsfiddle.net/2dJAN/8/

var ids = []
var values = []
$('#container input[type=text]').each(function() {
ids.push($(this).attr('id'));
values.push($(this).val())
})
alert(ids)
alert(values)

Answer 7

var arrId = [], arrVal = [];
$("input[type='text']").each(function(){//find input text
  if(this.id && this.id.indexOf("item")===0){//check id starts with item
    arrId.push(this.id.replace("item",""));//push id
    arrVal.push(this.value);//push value
  }
});

http://jsfiddle.net/jGNy7/

Answer 8

Try this:

$(document).ready(function() {
    var valuesArray = []
        , idsArray = [];
    $('#container').children().each(function() {
        valuesArray.push($(this).children().children().val());
        idsArray.push($(this).children().children().prop('id').substr(4));
    });
    alert(valuesArray);
    alert(idsArray);
});