How can i get input values in loop using jquery?

Question

I search more times but not get any idea,

Here is HTML:

       {% for pr in productlist %}
       <div class="grid-container">
          <span>
            <label> {{ pr.productname }} </label>
            <label name="mylist" class="prprice" id="prprice"> {{ pr.price1 }} </label>
          </span>
          <section class="sec">
            <input type="number" name="mylist" class="prnumber" id="prnumber">
          </section>
      </div>
      {% endfor %}

I can get price (id : prprice) one by one in loop via : price = parseFloat($(this).parents('span').find('label:eq(1)').text());

It is my full jQuery also :

$(document).ready(function() 
 {
    $("#tabSum").click(function(){
        var price = 0;
        var number = 0;

        $(".grid-container").each(function() {
            
            price = parseFloat($(this).parents('span').find('label:eq(1)').text());
            
            number = parseFloat($('.sec').find("input[name='mylist']").val()); <-- problem
     });  
 });

My problem is that i want get all number (id : prnumber) elements one by one (like price) but it returned first element only, what is wrong here?

This is true (hence a comment and not an answer), but you still generate invalid markup. — Andreas
– Andreas, Commented Mar 8, 2021 at 8:41
For example add the product id to the element id like id="prprice_{{pr.id}}" or even set no id if you never use it — Thallius
– Thallius, Commented Mar 8, 2021 at 8:46

Frenchy · Accepted Answer · 2021-03-08 10:46:46Z

1

to avoid looping you could do :

$(document).ready(function() 
 {
    $("#tabSum").click(function(){
       var prices = $("label.prprice").map((i,e) => parseFloat($(e).text())).get();

       var numbers = $("input.prnumber").map((i,e) => parseFloat($(e).val())).get();
     });
 });

so you trap all prices in array prices and all numbers in array numbers in the same order

after if you want to have the result price * number, just loop over array:

  var mult =[]
  for (let i = 0; i < prices.length; i++) {
     if(Number.isNaN(numbers[i]) continue;//avoid NaN values, test for prices too if needed
     mult[i] = prices[i] * numbers[i];
  }

to have sum after

 var sum = mult.reduce((a, b) => a + b );

edited Mar 8, 2021 at 10:46

answered Mar 8, 2021 at 9:00

Frenchy

17.1k3 gold badges21 silver badges42 bronze badges

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

7 Comments

Frenchy Over a year ago

replace text by val, i dont see how are stocked your number

hami Over a year ago

thanks, worked. If i want to use list that selected by checkboxes how to write price and numbers? i can get list via // $("input[name='mylistch']:checked").each(function() ) but don't know how to filter.

Frenchy Over a year ago

$("input[name='mylistch']:checked").each(function() {.console.log($(this) .attr("id"));} display id for example

hami Over a year ago

Also how can get sum of all mult in list?

Frenchy Over a year ago

@hami you use reduce to do the sum of an array

|

Thallius · Accepted Answer · 2021-03-08 09:00:30Z

0

You forgot $this so it will always find the first element

$(document).ready(function() 
{
    $("#tabSum").click(function(){
        var price = 0;
        var number = 0;

        $(".grid-container").each(function() {
        
            price = parseFloat($(this).parents('span').find('label:eq(1)').text());
        
            number = parseFloat($(this).find("input[name='mylist']").val()); <-- problem
         });  
     });
});

This should work (untested)

answered Mar 8, 2021 at 9:00

Thallius

2,6112 gold badges19 silver badges41 bronze badges

1 Comment

hami Over a year ago

this is good but you forget how to address to prnumber , result of this is NaN

Collectives™ on Stack Overflow

How can i get input values in loop using jquery?

2 Answers 2

7 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related