CODEWITHSUNDEEP
javascriptjqueryajaxinput
Xabby
Xabby

Reputation: 437

How to calculate the total value of each section separately: Jquery

I have more than 10 section that included three inputs in each section as follows:

<div class="product_quantity">
    <div class="color-quantity">
        <input onkeydown="return myFunction(event);" name="custom_small" class="custom_small" type="text">
        <input onkeydown="return myFunction(event);" name="custom_medium" class="custom_medium" type="text">
        <input onkeydown="return myFunction(event);" name="custom_large" class="custom_large" type="text">
    </div>

    <div class="color-quantity">
        <input onkeydown="return myFunction(event);" name="white_small" class="custom_small" type="text">
        <input onkeydown="return myFunction(event);" name="white_medium" class="custom_medium" type="text">
        <input onkeydown="return myFunction(event);" name="white_large" class="custom_large" type="text">
    </div>
</div>

I am calculating the product quantity from each section but its giving me the whole amount of products on the basis of amount entered in every input. but i want the amount of products in section separately

I am using jQuery to do so please check the code and recommend the changes as required: 

jQuery(".color-quantity input").each(function () {
    if (this.value) {
        quantity += (this.value) * 1;
        classname = jQuery(this).attr('class');
        arr.push(classname);
    }

    if (quantity == '') {
        quantity = 0;

    }
});

Upvotes: 0

Views: 308

Answers (2)

Ibrahim Khan
Ibrahim Khan

Reputation: 20740

You can get total off each section as an array like following.

var arr = $('.color-quantity').map(function () {
    var total = 0;
    $('input', this).each(function () {
        total += this.value * 1;
    });

    //do some stuff 
    if (total < 50) {
        $('.btn-cart').removeAttr("onclick");
    }

    return total;
}).get();

console.log(arr)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="color-quantity">
    <input type="text" value="1">
    <input type="text" value="2">
    <input type="text" value="3">
</div>

<div class="color-quantity">
    <input type="text" value="4">
    <input type="text" value="5">
    <input type="text" value="6">
</div>

Upvotes: 1

David784
David784

Reputation: 7464

You might try a nested loop. first loop through the color-quantity divs, then through the inputs. like this:

jQuery(".color-quantity").each(function () {
    var quantity = 0;
    $(this).find('input').each(function() {
        if (this.value) {
            quantity += (this.value) * 1;
            classname = jQuery(this).attr('class');
            arr.push(classname);
        }

        if (quantity == '') {
            quantity = 0;
        }

    });
    // here is where you can get the total value for each div
});

Upvotes: 0

Related Questions