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?

musefan · Answer 1 · 2013-04-30T09:52:25.510

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(...

If OP has multiple "input" tag in his page then this will result into wrong output — asifsid88, Apr 30 '13 at 09:45
@asifsid88: yeah... and if the OP changes the inputs to labels it will also be wrong. There are lots of unknowns that could break any of these answers, we can only work with the example code shown — musefan, Apr 30 '13 at 09:46

Alepac · Answer 2 · 2013-04-30T09:44:12.130

0

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:

edited Apr 30 '13 at 09:44

answered Apr 30 '13 at 09:38

Alepac

1,833
13
24

score 0 · Answer 3 · answered Apr 30 '13 at 09:38

0

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/

answered Apr 30 '13 at 09:38

Adil Shaikh

44,509
17
89
111

Arun P Johny · Accepted Answer · 2013-04-30T09:45:45.953

0

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

edited Apr 30 '13 at 09:45

answered Apr 30 '13 at 09:40

Arun P Johny

384,651
66
527
531

instead of $this.attr("value") use $this.val() – osmanraifgunes Apr 30 '13 at 09:42
instead of using `attr()` use `prop()` Please have alook http://stackoverflow.com/questions/5874652/prop-vs-attr – asifsid88 Apr 30 '13 at 09:45
@sanalism ya, copied from the above line – Arun P Johny Apr 30 '13 at 09:46
@asifsid88 in this case `attr` is good because id is a attribute than a runtime property – Arun P Johny Apr 30 '13 at 09:47

score 0 · Answer 5 · answered Apr 30 '13 at 09:40

0

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/

answered Apr 30 '13 at 09:40

Kevin Bowersox

93,289
19
159
189

score 0 · Answer 6 · answered Apr 30 '13 at 09:40

0

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)

answered Apr 30 '13 at 09:40

vinothini

2,606
4
27
42

score 0 · Answer 7 · answered Apr 30 '13 at 09:40

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/

score 0 · Answer 8 · answered Apr 30 '13 at 09:44

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);
});

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

8 Answers8