How to get and set multiple value from html using jquery Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of How to get and set multiple value from html using jquery without wasting too much if your time.

The question is published on by Tutorial Guruji team.

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>

Answer

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);
});
We are here to answer your question about How to get and set multiple value from html using jquery - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji