How to get multiple values from input field in jquery?

Question

I want to get input field values which are in foreach loop using jquery . Here is the html structure

    @foreach ($products as $product)
        <div class = "form-row"> 
           <input type="text" name="quantity" class="form-control quantity"value="{{$product->quantity }}">
           <input type="text" name="price" class="form-control price"value="{{$product->price}}">
         </div>
    @endforeach

I'm trying to get value in this way

     var quantity = $('.quantity').val();
     var price= $('.price').val();

But In this way, I get only first-row value. How can get all rows value using jquery?

Mamun · Accepted Answer · 2021-04-19 13:31:18Z

2

You have to loop through all the elements to get the values from them.

You can try jQuery's .map() and .get() to get all the values in an array.

Demo:

var quantityArr = $('.quantity').map(function(){
  return +this.value;
}).get();
console.log(quantityArr);
// if you want the value comma separated then join the array
var quantityCommaSeperatedString = quantityArr.join(',');
console.log(quantityCommaSeperatedString);

var priceArr = $('.price').map(function(){
  return +this.value;
}).get();
console.log(priceArr);
// if you want the value comma separated then join the array
var priceCommaSeperatedString = priceArr.join(',');
console.log(priceCommaSeperatedString);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" name="quantity" class="form-control quantity"value="1">
<input type="text" name="price" class="form-control price"value="10">

<input type="text" name="quantity" class="form-control quantity"value="2">
<input type="text" name="price" class="form-control price"value="20">

<input type="text" name="quantity" class="form-control quantity"value="3">
<input type="text" name="price" class="form-control price"value="30">

Update: As mentioned in the comment: get values by row

$('.form-row').click(function(){
  var quantity = $(this).find('.quantity').val();
  console.log(quantity);
  var price = $(this).find('.price').val();
  console.log(price);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "form-row">
  <input type="text" name="quantity" class="form-control quantity"value="1">
  <input type="text" name="price" class="form-control price"value="10">
</div>

<div class = "form-row">
  <input type="text" name="quantity" class="form-control quantity"value="2">
  <input type="text" name="price" class="form-control price"value="20">
</div>

<div class = "form-row">
  <input type="text" name="quantity" class="form-control quantity"value="3">
  <input type="text" name="price" class="form-control price"value="30">
</div>

edited Apr 19, 2021 at 13:31

answered Apr 19, 2021 at 11:58

Mamun

69k9 gold badges51 silver badges62 bronze badges

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

4 Comments

ihprince Over a year ago

What if I only I want to get specific rows quantity, Suppose, I click on 2nd row then I'll get 2nd row quantity value , If I click on 5th row then I will get only 5th row quantity value. How to do that?

Mamun Over a year ago

@ihprince, I can't see any row in the HTML. Please update the HTML for that scenario...

ihprince Over a year ago

Updated the HTML . If $products have 10 products then the div will be shown in 10 rows.

Mamun Over a year ago

@ihprince, added another anoswer, please check:)

Collectives™ on Stack Overflow

How to get multiple values from input field in jquery?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related