get all values from textboxes via JQuery

Question

I have a set of textboxes which I want to iterate in order to get a list of their values. So I used the following appraoch:

var locations = [];
$("input[type=text]").each(i => {
    var obj = $(this);
    locations.push(obj.value)
});

When I debug that, obj is the main-window, not the current element within my DOM. Thus obj.value just returns undefined.

However when I just use $("input[type=text]").val() only the very first value is returned.

Read about this in arrow functions developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… — j08691
– j08691, Commented Nov 30, 2020 at 14:46
You can change your all input names like this; locations[]. When you fetch them on backend all will come in an array. — oguzhancerit
– oguzhancerit, Commented Nov 30, 2020 at 14:46
@j08691 Wow, that was simple. Thanks for the hint. Feel free to get an easy accept... — MakePeaceGreatAgain
– MakePeaceGreatAgain, Commented Nov 30, 2020 at 14:48

oguzhancerit · Accepted Answer · 2020-11-30 14:52:52Z

1

You can use snippet in below. map function gets all input values one by one with the function in it.

$("#print").on("click",function(){
  var values = $("input[name='location[]']")
              .map(function(){return $(this).val();}).get()
              
  console.log(values);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type='text' name='location[]'>
<input type='text' name='location[]'>
<input type='text' name='location[]'>
<input type='text' name='location[]'>

<a href='#' id='print'>print</a>

edited Nov 30, 2020 at 14:52

answered Nov 30, 2020 at 14:50

oguzhancerit

1,5821 gold badge18 silver badges29 bronze badges

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

1 Comment

MakePeaceGreatAgain Over a year ago

Nice, I like the map-call. That´s exactly what I was looking for.

FSodic · Accepted Answer · 2020-11-30 14:55:31Z

0

Maybe this is help you,

var locations = [];
$("input[type=text]").each(function(i){
  var aaa = $(this).val();
  locations.push(aaa);
});

answered Nov 30, 2020 at 14:55

FSodic

735 bronze badges

Comments

MakePeaceGreatAgain · Accepted Answer · 2020-11-30 14:58:38Z

0

As of the docs an arrow-function "does not have its own binding for this". So we replace the arrow-function by a classic function-expression:

$("input[type=text]").each(function(i) {
    var obj = $(this);
    locations.push(obj.value)
});

edited Nov 30, 2020 at 14:58

answered Nov 30, 2020 at 14:52

MakePeaceGreatAgain

37.4k6 gold badges67 silver badges126 bronze badges

Collectives™ on Stack Overflow

get all values from textboxes via JQuery

3 Answers 3

1 Comment

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Related