jQuery .each() with input elements

Question

//save tablet
jQuery("#savetablet"+jTablets[i].idtablets).on('click', function()
{
    alert("alertsepy2...");
    console.log(jTablets[i].idtablets);
    jQuery("#tablet"+jTablets[i].idtablets+" .detailsrow").each(function( index ) {
        $(this).each(function( index2 ) {
            console.log($(this).html());
        });
    });
});

<div class="column0"><input type="text" value="-D"></div>
<div class="column1"><input type="text" value="D"></div>
<div class="column2"><input type="text" value="D"></div>
<div class="column3"><input type="number" value="0"></div>
<div class="column4"> <input type="number" value="0"></div>
<div class="column5"> <input type="number" value="0"></div>
<div class="column6"><input type="number" value="0"></div>
<div class="column7"><input type="number" value="0"></div>
<div class="column8"><input type="number" value="0"></div>
<div class="column9"> <input type="number" value="0"></div>
<div class="column10"> <input type="number" value=""></div>
<div id="tablet17row0" class="column11">11</div>
<div class="column0"><input type="text" value="-D"></div>
<div class="column1"><input type="text" value="D"></div>
<div class="column2"><input type="text" value="D"></div>
<div class="column3"><input type="number" value="0"></div>
<div class="column4"> <input type="number" value="0"></div>
<div class="column5"> <input type="number" value="0"></div>
<div class="column6"><input type="number" value="0"></div>
<div class="column7"><input type="number" value="0"></div>
<div class="column8"><input type="number" value="0"></div>
<div class="column9"> <input type="number" value="0"></div>
<div class="column10"> <input type="number" value=""></div>
<div id="tablet17row1" class="column11">21</div>

I have the above jQuery .each() that outputs the attached HTML to the console. In this case I want to extract the val() of only the input elements either of type text or type number. Is there some way to isolate just the input elements so I can get their values out into an array?

Community · Accepted Answer · 2020-06-20 09:12:55Z

64

To extract number :

var arrNumber = new Array();
$('input[type=number]').each(function(){
    arrNumber.push($(this).val());
})

To extract text:

var arrText= new Array();
$('input[type=text]').each(function(){
    arrText.push($(this).val());
})

Edit : `.map` implementation

var arrText= $('input[type=text]').map(function(){
    return this.value;
}).get();

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered May 17, 2013 at 4:26

Karl-André Gagnon

33.9k5 gold badges53 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Deepak Yadav · Accepted Answer · 2016-09-07 11:05:41Z

5

Assume if all the input elements are inside a form u can refer the below code.

 // get all the inputs into an array.

    var $inputs = $('#myForm :input');

    // not sure if you wanted this, but I thought I'd add it.
    // get an associative array of just the values.
    var values = {};
    $inputs.each(function() {
        values[this.name] = $(this).val();
    });

edited Sep 7, 2016 at 11:05

Deepak Yadav

7,1395 gold badges33 silver badges51 bronze badges

answered May 17, 2013 at 4:26

SivaRajini

7,43522 gold badges84 silver badges129 bronze badges

Comments

vinothini · Accepted Answer · 2013-05-17 05:02:04Z

2

$.each($('input[type=number]'),function(){
  alert($(this).val());
});

This will alert the value of input type number fields

Demo is present at http://jsfiddle.net/2dJAN/33/

edited May 17, 2013 at 5:02

answered May 17, 2013 at 4:39

vinothini

2,6124 gold badges29 silver badges42 bronze badges

Comments

Aniket G · Accepted Answer · 2019-03-14 03:55:46Z

1

You can use:

$(formId).serializeArray();

edited Mar 14, 2019 at 3:55

Aniket G

3,5321 gold badge16 silver badges43 bronze badges

answered Mar 14, 2019 at 2:58

Lê Văn Chiến

1292 bronze badges

Collectives™ on Stack Overflow

jQuery .each() with input elements

4 Answers 4

Edit : `.map` implementation

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Edit : .map implementation

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related

Edit : `.map` implementation