How to get and set multiple value from html using jquery

Question

I want to make a array list of combining two value from .productids this class and .quantity this class. I already tried like bellow. But problem with this jquery is the productids class value push able to push each productids value but for .quantity its always pushing first value which is 1 which is like ["47:1","48:1"] but it should be like that: ["47:1","48:2"].

Below is the sample code

$("#CheckOutBtn").on("click", function () {
var paymentMethodId = $("#paymentMethod").val();
var selectAddressId = $("#selectAddress").val();

var data = [];
$(".product-row").find(".productids").each(function () {

var qty = $(".product-row").find(".quantity");

data.push($(this).val() + ":" + qty.val());

});

console.log(data);


});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<tr class="product-row">
    <td class="product-col">
        <figure class="product-image-container">
            <a href="product.html" class="product-image">
                <img src="#" alt="product">
            </a>
        </figure>
        <h2 class="product-title">
            <a href="#">Xiaomi Redmi 9a 2/32 price in bangladesh</a>
        </h2>
    </td>
    <td>৳9999.00</td>
    <td>
        <input type="hidden" class="productids" value="47"/>
        <input class="vertical-quantity form-control quantity" value="1" type="text">
    </td>
    <td>৳9999</td>
</tr>
<tr class="product-action-row">
    <td colspan="4" class="clearfix">
        <!--<div class="float-left">
                <a href="#" class="btn-move">Move to Wishlist</a>
            </div>-->
        <!-- End .float-left -->

        <div class="float-right">

            <a href="#" title="Remove product" class="btn-remove"><span class="sr-only">Remove</span></a>
        </div><!-- End .float-right -->
    </td>
</tr>
<tr class="product-row">
    <td class="product-col">
        <figure class="product-image-container">
            <a href="product.html" class="product-image">
                <img src="#" alt="product">
            </a>
        </figure>
        <h2 class="product-title">
            <a href="#">Xiaomi Radmi note 9 4GB/64GB, Price in Bangladesh</a>
        </h2>
    </td>
    <td>৳19999.00</td>
    <td>
        <input type="hidden" class="productids" value="48"/>
        <input class="vertical-quantity form-control quantity" value="2" type="text">
    </td>
    <td>৳19999</td>
</tr>
<tr class="product-action-row">
    <td colspan="4" class="clearfix">
        <!--<div class="float-left">
                <a href="#" class="btn-move">Move to Wishlist</a>
            </div>-->
        <!-- End .float-left -->

        <div class="float-right">

            <a href="#" title="Remove product" class="btn-remove"><span class="sr-only">Remove</span></a>
        </div><!-- End .float-right -->
    </td>
</tr>

That should be a .map() instead of an .each() + .push() — Andreas
– Andreas, Commented Apr 7, 2021 at 8:39
$(".product-row").find(".quantity"); selects every element with a .quantity class that is a child of any element with a .product-row class. You only want the .quantity of the current .product-row, also known as this — Andreas
– Andreas, Commented Apr 7, 2021 at 8:40

yeyene · Accepted Answer · 2021-04-07 08:46:57Z

1

How about looping each of product-row and get the two values?

$("#CheckOutBtn").on("click", function() {
    var paymentMethodId = $("#paymentMethod").val();
    var selectAddressId = $("#selectAddress").val();

    var data = [];
    $(".product-row").each(function() {
        var pid = $(this).find(".productids").val();
        var qty = $(this).find(".quantity").val();

        data.push(pid + ":" + qty);
    });
    console.log(data);
});

answered Apr 7, 2021 at 8:46

yeyene

7,4001 gold badge24 silver badges29 bronze badges

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

1 Comment

Andreas Over a year ago

Why do you create twice as much jQuery objects as necessary? Store $(this) in a variable and use that to get the values.

Collectives™ on Stack Overflow

How to get and set multiple value from html using jquery

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related