CODEWITHSUNDEEP
javascriptjqueryhtmlonchangejquery-calculation
Hunkeone
Hunkeone

Reputation: 505

Calculations and triggering onchange with writing result to html

I need to have #totalcost always filled. There're some javascript calculations and result is written to #total cost. I've tried to place it on JSFiddle but I had no success with triggering function onload. for each change of .number input field .localTotal is set as localTotal * number value. In 2 words I need .localTotal and #totalcost always be filled

.localTotal with .price*.quantity and #totalcost with sum of all .localTotals

here's HTML

<div class="row"> <div class="col-xs-5">
<span class="glyphicon glyphicon-remove remove" style="cursor:pointer;"></span> Ventura L15220</div>
<div class="col-xs-3 price">2020.20</div>
<div class="col-xs-4"><input type="number" class="form-control quantity" value="1"></div>
<div class="localTotal"></div></div>

<div class="row"> 
<div class="col-xs-5"><span class="glyphicon glyphicon-remove remove" style="cursor:pointer;"></span> Ventura L15220</div>
<div class="col-xs-3 price">30300.20</div><div class="col-xs-4"><input type="number" class="form-control quantity" value="1"></div>
<div class="localTotal"></div></div>

<div class="col-xs-4 head " id="totalcost"></div>

And javascript

 function changeQuantity(){
        $(".quantity").trigger("change");
        console.log("done")

        $('.quantity').change(calculateTotal);
        function calculateTotal(){
            $quantity=$(this);

            $price=$quantity.closest('.row').find('.price').text();
            $quantityValue=$quantity.val();
            $localTotal=$quantity.closest('.row').find('.localTotal');
            $localTotalValue=$quantityValue*$price;
            $quantity.closest('.row').find('.localTotal').text($localTotalValue);
            console.log($localTotalValue);
            var sumToTotal = 0;
            var totalSum=document.getElementById('totalcost');
            $('.localTotal').each(function(){
                sumToTotal += parseFloat($(this).text());
            });
            totalSum.innerHTML=sumToTotal+' грн';
        }

    }

changeQuantity() is triggered onload but in spite of $(".quantity").trigger("change"); #totalcost and .localTotal aren't filled :c

Upvotes: 0

Views: 597

Answers (1)

Jeffrey W.
Jeffrey W.

Reputation: 4169

I think you're getting things a bit mixed up. You're binding a change event on .quantity yet you're triggering a change event on .number. Also I don't know why, but why are you mixing up jQuery selectors and 'normal' selectors?

I'm not sure what you're trying to do exactly but here's how it works:

$(".quantity").on('change', function() {
    /* 
     * Your code
     * replace your 'getElementById('total cost') => $("#totalcost")
     * replace your 'totalSum.innerHTML' => totalSum.text(sumToTotal + ' грн');
     */
});

Now when .quantity changes your callback gets fired. This could be done by triggering the change event manually: $('.quantity').trigger('change');

Also I'm not sure what you mean by 'always filled'. I think we're missing some context :)

EDIT

I hope you don't mind but I refactored your code a little bit

$(".quantity").on('change', function() {
  var context = $(this).closest('.row');
  // Calculate amount
  var amount = parseFloat(context.find(".price").text()) * parseFloat($(this).text());

  // Set the amount
  context.find('.localTotal').text(amount);

  var total = 0;
  $('.localTotal').each(function(el) {
    total += parseFloat($(this).text());
  });
  $("#totalcost").text(total);
});

Upvotes: 2

Related Questions