Shopping Cart PLUS & MINUS Calculate the total

Multi tool use
Multi tool use












-1















I have a shopping cart and i need to get the value of Item increse ( + and - )
and add it to the item price.



Shopping Cart +/- Control



enter image description here



In my view Code goes like this.






<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<td class="cart-qty nostretch text-center">
<div class="spinner" data-addclass-on-smdown="spinner-sm">
<button type="button" class="btn btn-icon rounded-circle" id="btnMinus"><i data-feather="minus"></i>-</button>
<input type="number" class="form-control" value="1" min="1" max="999" id="numberCol">
<button type="button" class="btn btn-icon rounded-circle" d="btnPlus"><i data-feather="plus"></i>+</button>
</div>
</td>
<td class="cart-price text-right">
<span class="roboto-condensed bold" id="primaryTotal">Rs:@item.ItemPrice</span>
</td>
}





and also i have tried to get the No.Of item in On change function .. but it's not success.I need when someone increse or decrese item then need to calculate the price accoding to it.



My JQuery



 $(document).ready(function () {
$("#btnMinus, #btnPlus").click(function (e) {
alert($("#numberCol").val());
$("#primaryTotal").val('@item.ItemPrice'+);
debugger;
});
});









share|improve this question

























  • The view code you posted seems to be incorrect. You have a closing bracket, but no open bracket. Also you cannot have a td tag without a table row and table. Post the correct relevant piece of code. Also I am still not able to 100% understand your expected behavior.

    – Shyju
    Jan 1 at 5:23













  • also, you are not changing anything in $("#numberCol"), what is your expected output?

    – Just code
    Jan 1 at 5:29


















-1















I have a shopping cart and i need to get the value of Item increse ( + and - )
and add it to the item price.



Shopping Cart +/- Control



enter image description here



In my view Code goes like this.






<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<td class="cart-qty nostretch text-center">
<div class="spinner" data-addclass-on-smdown="spinner-sm">
<button type="button" class="btn btn-icon rounded-circle" id="btnMinus"><i data-feather="minus"></i>-</button>
<input type="number" class="form-control" value="1" min="1" max="999" id="numberCol">
<button type="button" class="btn btn-icon rounded-circle" d="btnPlus"><i data-feather="plus"></i>+</button>
</div>
</td>
<td class="cart-price text-right">
<span class="roboto-condensed bold" id="primaryTotal">Rs:@item.ItemPrice</span>
</td>
}





and also i have tried to get the No.Of item in On change function .. but it's not success.I need when someone increse or decrese item then need to calculate the price accoding to it.



My JQuery



 $(document).ready(function () {
$("#btnMinus, #btnPlus").click(function (e) {
alert($("#numberCol").val());
$("#primaryTotal").val('@item.ItemPrice'+);
debugger;
});
});









share|improve this question

























  • The view code you posted seems to be incorrect. You have a closing bracket, but no open bracket. Also you cannot have a td tag without a table row and table. Post the correct relevant piece of code. Also I am still not able to 100% understand your expected behavior.

    – Shyju
    Jan 1 at 5:23













  • also, you are not changing anything in $("#numberCol"), what is your expected output?

    – Just code
    Jan 1 at 5:29
















-1












-1








-1








I have a shopping cart and i need to get the value of Item increse ( + and - )
and add it to the item price.



Shopping Cart +/- Control



enter image description here



In my view Code goes like this.






<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<td class="cart-qty nostretch text-center">
<div class="spinner" data-addclass-on-smdown="spinner-sm">
<button type="button" class="btn btn-icon rounded-circle" id="btnMinus"><i data-feather="minus"></i>-</button>
<input type="number" class="form-control" value="1" min="1" max="999" id="numberCol">
<button type="button" class="btn btn-icon rounded-circle" d="btnPlus"><i data-feather="plus"></i>+</button>
</div>
</td>
<td class="cart-price text-right">
<span class="roboto-condensed bold" id="primaryTotal">Rs:@item.ItemPrice</span>
</td>
}





and also i have tried to get the No.Of item in On change function .. but it's not success.I need when someone increse or decrese item then need to calculate the price accoding to it.



My JQuery



 $(document).ready(function () {
$("#btnMinus, #btnPlus").click(function (e) {
alert($("#numberCol").val());
$("#primaryTotal").val('@item.ItemPrice'+);
debugger;
});
});









share|improve this question
















I have a shopping cart and i need to get the value of Item increse ( + and - )
and add it to the item price.



Shopping Cart +/- Control



enter image description here



In my view Code goes like this.






<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<td class="cart-qty nostretch text-center">
<div class="spinner" data-addclass-on-smdown="spinner-sm">
<button type="button" class="btn btn-icon rounded-circle" id="btnMinus"><i data-feather="minus"></i>-</button>
<input type="number" class="form-control" value="1" min="1" max="999" id="numberCol">
<button type="button" class="btn btn-icon rounded-circle" d="btnPlus"><i data-feather="plus"></i>+</button>
</div>
</td>
<td class="cart-price text-right">
<span class="roboto-condensed bold" id="primaryTotal">Rs:@item.ItemPrice</span>
</td>
}





and also i have tried to get the No.Of item in On change function .. but it's not success.I need when someone increse or decrese item then need to calculate the price accoding to it.



My JQuery



 $(document).ready(function () {
$("#btnMinus, #btnPlus").click(function (e) {
alert($("#numberCol").val());
$("#primaryTotal").val('@item.ItemPrice'+);
debugger;
});
});





<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<td class="cart-qty nostretch text-center">
<div class="spinner" data-addclass-on-smdown="spinner-sm">
<button type="button" class="btn btn-icon rounded-circle" id="btnMinus"><i data-feather="minus"></i>-</button>
<input type="number" class="form-control" value="1" min="1" max="999" id="numberCol">
<button type="button" class="btn btn-icon rounded-circle" d="btnPlus"><i data-feather="plus"></i>+</button>
</div>
</td>
<td class="cart-price text-right">
<span class="roboto-condensed bold" id="primaryTotal">Rs:@item.ItemPrice</span>
</td>
}





<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<td class="cart-qty nostretch text-center">
<div class="spinner" data-addclass-on-smdown="spinner-sm">
<button type="button" class="btn btn-icon rounded-circle" id="btnMinus"><i data-feather="minus"></i>-</button>
<input type="number" class="form-control" value="1" min="1" max="999" id="numberCol">
<button type="button" class="btn btn-icon rounded-circle" d="btnPlus"><i data-feather="plus"></i>+</button>
</div>
</td>
<td class="cart-price text-right">
<span class="roboto-condensed bold" id="primaryTotal">Rs:@item.ItemPrice</span>
</td>
}






javascript jquery html asp.net asp.net-mvc






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Jan 1 at 5:34







TechGuy

















asked Jan 1 at 4:44









TechGuyTechGuy

2,081103556




2,081103556













  • The view code you posted seems to be incorrect. You have a closing bracket, but no open bracket. Also you cannot have a td tag without a table row and table. Post the correct relevant piece of code. Also I am still not able to 100% understand your expected behavior.

    – Shyju
    Jan 1 at 5:23













  • also, you are not changing anything in $("#numberCol"), what is your expected output?

    – Just code
    Jan 1 at 5:29





















  • The view code you posted seems to be incorrect. You have a closing bracket, but no open bracket. Also you cannot have a td tag without a table row and table. Post the correct relevant piece of code. Also I am still not able to 100% understand your expected behavior.

    – Shyju
    Jan 1 at 5:23













  • also, you are not changing anything in $("#numberCol"), what is your expected output?

    – Just code
    Jan 1 at 5:29



















The view code you posted seems to be incorrect. You have a closing bracket, but no open bracket. Also you cannot have a td tag without a table row and table. Post the correct relevant piece of code. Also I am still not able to 100% understand your expected behavior.

– Shyju
Jan 1 at 5:23







The view code you posted seems to be incorrect. You have a closing bracket, but no open bracket. Also you cannot have a td tag without a table row and table. Post the correct relevant piece of code. Also I am still not able to 100% understand your expected behavior.

– Shyju
Jan 1 at 5:23















also, you are not changing anything in $("#numberCol"), what is your expected output?

– Just code
Jan 1 at 5:29







also, you are not changing anything in $("#numberCol"), what is your expected output?

– Just code
Jan 1 at 5:29














1 Answer
1






active

oldest

votes


















1














You need to get the value somewhere for the price, so I set up a data-price and added a pair of spans to make it easier to format. You had a typo on the id for one element so I fixed that. I also added a table/tbody to make it easier to test my sample. IF you have a lot of these in a table, you will need to NOT use id's and use classes relative to the clicks instead. I also addressed issues with "count" where entry could be made to 1.67 for instance and rounded it to an integer.



I added super simple validation that Math.round() way. Note how I put the price in using the view model - but set a default for this example, remove that prior to use.



Do NOT rely on this for actual values, it is super easy to hack for free stuff, so do that server side.






function calculateValues(e) {
console.log("recalc");
let item = $('#numberCol');
let itemCount = Math.round(item.val());
item.val(itemCount);
let total = $("#primaryTotal");
let price = total.find(".price");
let priceValue = price.data("price") * 1;
let totalValue = priceValue * itemCount;
price.text(totalValue.toFixed(2));
// console.log("recalc val", priceValue, itemCount, totalValue);

}
$(function() {
//setup a fake value remove for real code
$("#primaryTotal").find(".price").data("price", 123.45);
$("#btnMinus").add("#btnPlus").on('click', function(e) {
//console.log('plus minus', this.id);
let num = $('#numberCol');
let numValue = Math.round(num.val()) * 1;
if (numValue < num.attr("min")) {
numValue = num.attr("min") * 1;
num.val(Math.round(numValue));
}
if (numValue > num.attr("max")) {
numValue = num.attr("max") * 1;
num.val(Math.round(numValue));
}
if (this.id === "btnMinus") {
numValue--;
} else {
numValue++;
}
num.val(numValue).trigger('change');
// console.log('plus minus val', numValue);
//calculateValues(e);
});
$("#numberCol").on('change', calculateValues);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="mytable">
<tbody>
<td class="cart-qty nostretch text-center">
<div class="spinner" data-addclass-on-smdown="spinner-sm">
<button type="button" class="btn btn-icon rounded-circle" id="btnMinus"><i data-feather="minus"></i>-</button>
<input type="number" class="form-control" value="1" min="1" max="999" id="numberCol" />
<button type="button" class="btn btn-icon rounded-circle" id="btnPlus"><i data-feather="plus"></i>+</button>
</div>
</td>
<td class="cart-price text-right">
<span class="roboto-condensed bold" id="primaryTotal"><span>Rs:</span><span class="price" data-price="@item.ItemPrice">@item.ItemPrice</span>
</td>
</tbody>
</table>








share|improve this answer























    Your Answer






    StackExchange.ifUsing("editor", function () {
    StackExchange.using("externalEditor", function () {
    StackExchange.using("snippets", function () {
    StackExchange.snippets.init();
    });
    });
    }, "code-snippets");

    StackExchange.ready(function() {
    var channelOptions = {
    tags: "".split(" "),
    id: "1"
    };
    initTagRenderer("".split(" "), "".split(" "), channelOptions);

    StackExchange.using("externalEditor", function() {
    // Have to fire editor after snippets, if snippets enabled
    if (StackExchange.settings.snippets.snippetsEnabled) {
    StackExchange.using("snippets", function() {
    createEditor();
    });
    }
    else {
    createEditor();
    }
    });

    function createEditor() {
    StackExchange.prepareEditor({
    heartbeatType: 'answer',
    autoActivateHeartbeat: false,
    convertImagesToLinks: true,
    noModals: true,
    showLowRepImageUploadWarning: true,
    reputationToPostImages: 10,
    bindNavPrevention: true,
    postfix: "",
    imageUploader: {
    brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
    contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
    allowUrls: true
    },
    onDemand: true,
    discardSelector: ".discard-answer"
    ,immediatelyShowMarkdownHelp:true
    });


    }
    });














    draft saved

    draft discarded


















    StackExchange.ready(
    function () {
    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53993055%2fshopping-cart-plus-minus-calculate-the-total%23new-answer', 'question_page');
    }
    );

    Post as a guest















    Required, but never shown

























    1 Answer
    1






    active

    oldest

    votes








    1 Answer
    1






    active

    oldest

    votes









    active

    oldest

    votes






    active

    oldest

    votes









    1














    You need to get the value somewhere for the price, so I set up a data-price and added a pair of spans to make it easier to format. You had a typo on the id for one element so I fixed that. I also added a table/tbody to make it easier to test my sample. IF you have a lot of these in a table, you will need to NOT use id's and use classes relative to the clicks instead. I also addressed issues with "count" where entry could be made to 1.67 for instance and rounded it to an integer.



    I added super simple validation that Math.round() way. Note how I put the price in using the view model - but set a default for this example, remove that prior to use.



    Do NOT rely on this for actual values, it is super easy to hack for free stuff, so do that server side.






    function calculateValues(e) {
    console.log("recalc");
    let item = $('#numberCol');
    let itemCount = Math.round(item.val());
    item.val(itemCount);
    let total = $("#primaryTotal");
    let price = total.find(".price");
    let priceValue = price.data("price") * 1;
    let totalValue = priceValue * itemCount;
    price.text(totalValue.toFixed(2));
    // console.log("recalc val", priceValue, itemCount, totalValue);

    }
    $(function() {
    //setup a fake value remove for real code
    $("#primaryTotal").find(".price").data("price", 123.45);
    $("#btnMinus").add("#btnPlus").on('click', function(e) {
    //console.log('plus minus', this.id);
    let num = $('#numberCol');
    let numValue = Math.round(num.val()) * 1;
    if (numValue < num.attr("min")) {
    numValue = num.attr("min") * 1;
    num.val(Math.round(numValue));
    }
    if (numValue > num.attr("max")) {
    numValue = num.attr("max") * 1;
    num.val(Math.round(numValue));
    }
    if (this.id === "btnMinus") {
    numValue--;
    } else {
    numValue++;
    }
    num.val(numValue).trigger('change');
    // console.log('plus minus val', numValue);
    //calculateValues(e);
    });
    $("#numberCol").on('change', calculateValues);
    });

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <table id="mytable">
    <tbody>
    <td class="cart-qty nostretch text-center">
    <div class="spinner" data-addclass-on-smdown="spinner-sm">
    <button type="button" class="btn btn-icon rounded-circle" id="btnMinus"><i data-feather="minus"></i>-</button>
    <input type="number" class="form-control" value="1" min="1" max="999" id="numberCol" />
    <button type="button" class="btn btn-icon rounded-circle" id="btnPlus"><i data-feather="plus"></i>+</button>
    </div>
    </td>
    <td class="cart-price text-right">
    <span class="roboto-condensed bold" id="primaryTotal"><span>Rs:</span><span class="price" data-price="@item.ItemPrice">@item.ItemPrice</span>
    </td>
    </tbody>
    </table>








    share|improve this answer




























      1














      You need to get the value somewhere for the price, so I set up a data-price and added a pair of spans to make it easier to format. You had a typo on the id for one element so I fixed that. I also added a table/tbody to make it easier to test my sample. IF you have a lot of these in a table, you will need to NOT use id's and use classes relative to the clicks instead. I also addressed issues with "count" where entry could be made to 1.67 for instance and rounded it to an integer.



      I added super simple validation that Math.round() way. Note how I put the price in using the view model - but set a default for this example, remove that prior to use.



      Do NOT rely on this for actual values, it is super easy to hack for free stuff, so do that server side.






      function calculateValues(e) {
      console.log("recalc");
      let item = $('#numberCol');
      let itemCount = Math.round(item.val());
      item.val(itemCount);
      let total = $("#primaryTotal");
      let price = total.find(".price");
      let priceValue = price.data("price") * 1;
      let totalValue = priceValue * itemCount;
      price.text(totalValue.toFixed(2));
      // console.log("recalc val", priceValue, itemCount, totalValue);

      }
      $(function() {
      //setup a fake value remove for real code
      $("#primaryTotal").find(".price").data("price", 123.45);
      $("#btnMinus").add("#btnPlus").on('click', function(e) {
      //console.log('plus minus', this.id);
      let num = $('#numberCol');
      let numValue = Math.round(num.val()) * 1;
      if (numValue < num.attr("min")) {
      numValue = num.attr("min") * 1;
      num.val(Math.round(numValue));
      }
      if (numValue > num.attr("max")) {
      numValue = num.attr("max") * 1;
      num.val(Math.round(numValue));
      }
      if (this.id === "btnMinus") {
      numValue--;
      } else {
      numValue++;
      }
      num.val(numValue).trigger('change');
      // console.log('plus minus val', numValue);
      //calculateValues(e);
      });
      $("#numberCol").on('change', calculateValues);
      });

      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <table id="mytable">
      <tbody>
      <td class="cart-qty nostretch text-center">
      <div class="spinner" data-addclass-on-smdown="spinner-sm">
      <button type="button" class="btn btn-icon rounded-circle" id="btnMinus"><i data-feather="minus"></i>-</button>
      <input type="number" class="form-control" value="1" min="1" max="999" id="numberCol" />
      <button type="button" class="btn btn-icon rounded-circle" id="btnPlus"><i data-feather="plus"></i>+</button>
      </div>
      </td>
      <td class="cart-price text-right">
      <span class="roboto-condensed bold" id="primaryTotal"><span>Rs:</span><span class="price" data-price="@item.ItemPrice">@item.ItemPrice</span>
      </td>
      </tbody>
      </table>








      share|improve this answer


























        1












        1








        1







        You need to get the value somewhere for the price, so I set up a data-price and added a pair of spans to make it easier to format. You had a typo on the id for one element so I fixed that. I also added a table/tbody to make it easier to test my sample. IF you have a lot of these in a table, you will need to NOT use id's and use classes relative to the clicks instead. I also addressed issues with "count" where entry could be made to 1.67 for instance and rounded it to an integer.



        I added super simple validation that Math.round() way. Note how I put the price in using the view model - but set a default for this example, remove that prior to use.



        Do NOT rely on this for actual values, it is super easy to hack for free stuff, so do that server side.






        function calculateValues(e) {
        console.log("recalc");
        let item = $('#numberCol');
        let itemCount = Math.round(item.val());
        item.val(itemCount);
        let total = $("#primaryTotal");
        let price = total.find(".price");
        let priceValue = price.data("price") * 1;
        let totalValue = priceValue * itemCount;
        price.text(totalValue.toFixed(2));
        // console.log("recalc val", priceValue, itemCount, totalValue);

        }
        $(function() {
        //setup a fake value remove for real code
        $("#primaryTotal").find(".price").data("price", 123.45);
        $("#btnMinus").add("#btnPlus").on('click', function(e) {
        //console.log('plus minus', this.id);
        let num = $('#numberCol');
        let numValue = Math.round(num.val()) * 1;
        if (numValue < num.attr("min")) {
        numValue = num.attr("min") * 1;
        num.val(Math.round(numValue));
        }
        if (numValue > num.attr("max")) {
        numValue = num.attr("max") * 1;
        num.val(Math.round(numValue));
        }
        if (this.id === "btnMinus") {
        numValue--;
        } else {
        numValue++;
        }
        num.val(numValue).trigger('change');
        // console.log('plus minus val', numValue);
        //calculateValues(e);
        });
        $("#numberCol").on('change', calculateValues);
        });

        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <table id="mytable">
        <tbody>
        <td class="cart-qty nostretch text-center">
        <div class="spinner" data-addclass-on-smdown="spinner-sm">
        <button type="button" class="btn btn-icon rounded-circle" id="btnMinus"><i data-feather="minus"></i>-</button>
        <input type="number" class="form-control" value="1" min="1" max="999" id="numberCol" />
        <button type="button" class="btn btn-icon rounded-circle" id="btnPlus"><i data-feather="plus"></i>+</button>
        </div>
        </td>
        <td class="cart-price text-right">
        <span class="roboto-condensed bold" id="primaryTotal"><span>Rs:</span><span class="price" data-price="@item.ItemPrice">@item.ItemPrice</span>
        </td>
        </tbody>
        </table>








        share|improve this answer













        You need to get the value somewhere for the price, so I set up a data-price and added a pair of spans to make it easier to format. You had a typo on the id for one element so I fixed that. I also added a table/tbody to make it easier to test my sample. IF you have a lot of these in a table, you will need to NOT use id's and use classes relative to the clicks instead. I also addressed issues with "count" where entry could be made to 1.67 for instance and rounded it to an integer.



        I added super simple validation that Math.round() way. Note how I put the price in using the view model - but set a default for this example, remove that prior to use.



        Do NOT rely on this for actual values, it is super easy to hack for free stuff, so do that server side.






        function calculateValues(e) {
        console.log("recalc");
        let item = $('#numberCol');
        let itemCount = Math.round(item.val());
        item.val(itemCount);
        let total = $("#primaryTotal");
        let price = total.find(".price");
        let priceValue = price.data("price") * 1;
        let totalValue = priceValue * itemCount;
        price.text(totalValue.toFixed(2));
        // console.log("recalc val", priceValue, itemCount, totalValue);

        }
        $(function() {
        //setup a fake value remove for real code
        $("#primaryTotal").find(".price").data("price", 123.45);
        $("#btnMinus").add("#btnPlus").on('click', function(e) {
        //console.log('plus minus', this.id);
        let num = $('#numberCol');
        let numValue = Math.round(num.val()) * 1;
        if (numValue < num.attr("min")) {
        numValue = num.attr("min") * 1;
        num.val(Math.round(numValue));
        }
        if (numValue > num.attr("max")) {
        numValue = num.attr("max") * 1;
        num.val(Math.round(numValue));
        }
        if (this.id === "btnMinus") {
        numValue--;
        } else {
        numValue++;
        }
        num.val(numValue).trigger('change');
        // console.log('plus minus val', numValue);
        //calculateValues(e);
        });
        $("#numberCol").on('change', calculateValues);
        });

        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <table id="mytable">
        <tbody>
        <td class="cart-qty nostretch text-center">
        <div class="spinner" data-addclass-on-smdown="spinner-sm">
        <button type="button" class="btn btn-icon rounded-circle" id="btnMinus"><i data-feather="minus"></i>-</button>
        <input type="number" class="form-control" value="1" min="1" max="999" id="numberCol" />
        <button type="button" class="btn btn-icon rounded-circle" id="btnPlus"><i data-feather="plus"></i>+</button>
        </div>
        </td>
        <td class="cart-price text-right">
        <span class="roboto-condensed bold" id="primaryTotal"><span>Rs:</span><span class="price" data-price="@item.ItemPrice">@item.ItemPrice</span>
        </td>
        </tbody>
        </table>








        function calculateValues(e) {
        console.log("recalc");
        let item = $('#numberCol');
        let itemCount = Math.round(item.val());
        item.val(itemCount);
        let total = $("#primaryTotal");
        let price = total.find(".price");
        let priceValue = price.data("price") * 1;
        let totalValue = priceValue * itemCount;
        price.text(totalValue.toFixed(2));
        // console.log("recalc val", priceValue, itemCount, totalValue);

        }
        $(function() {
        //setup a fake value remove for real code
        $("#primaryTotal").find(".price").data("price", 123.45);
        $("#btnMinus").add("#btnPlus").on('click', function(e) {
        //console.log('plus minus', this.id);
        let num = $('#numberCol');
        let numValue = Math.round(num.val()) * 1;
        if (numValue < num.attr("min")) {
        numValue = num.attr("min") * 1;
        num.val(Math.round(numValue));
        }
        if (numValue > num.attr("max")) {
        numValue = num.attr("max") * 1;
        num.val(Math.round(numValue));
        }
        if (this.id === "btnMinus") {
        numValue--;
        } else {
        numValue++;
        }
        num.val(numValue).trigger('change');
        // console.log('plus minus val', numValue);
        //calculateValues(e);
        });
        $("#numberCol").on('change', calculateValues);
        });

        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <table id="mytable">
        <tbody>
        <td class="cart-qty nostretch text-center">
        <div class="spinner" data-addclass-on-smdown="spinner-sm">
        <button type="button" class="btn btn-icon rounded-circle" id="btnMinus"><i data-feather="minus"></i>-</button>
        <input type="number" class="form-control" value="1" min="1" max="999" id="numberCol" />
        <button type="button" class="btn btn-icon rounded-circle" id="btnPlus"><i data-feather="plus"></i>+</button>
        </div>
        </td>
        <td class="cart-price text-right">
        <span class="roboto-condensed bold" id="primaryTotal"><span>Rs:</span><span class="price" data-price="@item.ItemPrice">@item.ItemPrice</span>
        </td>
        </tbody>
        </table>





        function calculateValues(e) {
        console.log("recalc");
        let item = $('#numberCol');
        let itemCount = Math.round(item.val());
        item.val(itemCount);
        let total = $("#primaryTotal");
        let price = total.find(".price");
        let priceValue = price.data("price") * 1;
        let totalValue = priceValue * itemCount;
        price.text(totalValue.toFixed(2));
        // console.log("recalc val", priceValue, itemCount, totalValue);

        }
        $(function() {
        //setup a fake value remove for real code
        $("#primaryTotal").find(".price").data("price", 123.45);
        $("#btnMinus").add("#btnPlus").on('click', function(e) {
        //console.log('plus minus', this.id);
        let num = $('#numberCol');
        let numValue = Math.round(num.val()) * 1;
        if (numValue < num.attr("min")) {
        numValue = num.attr("min") * 1;
        num.val(Math.round(numValue));
        }
        if (numValue > num.attr("max")) {
        numValue = num.attr("max") * 1;
        num.val(Math.round(numValue));
        }
        if (this.id === "btnMinus") {
        numValue--;
        } else {
        numValue++;
        }
        num.val(numValue).trigger('change');
        // console.log('plus minus val', numValue);
        //calculateValues(e);
        });
        $("#numberCol").on('change', calculateValues);
        });

        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <table id="mytable">
        <tbody>
        <td class="cart-qty nostretch text-center">
        <div class="spinner" data-addclass-on-smdown="spinner-sm">
        <button type="button" class="btn btn-icon rounded-circle" id="btnMinus"><i data-feather="minus"></i>-</button>
        <input type="number" class="form-control" value="1" min="1" max="999" id="numberCol" />
        <button type="button" class="btn btn-icon rounded-circle" id="btnPlus"><i data-feather="plus"></i>+</button>
        </div>
        </td>
        <td class="cart-price text-right">
        <span class="roboto-condensed bold" id="primaryTotal"><span>Rs:</span><span class="price" data-price="@item.ItemPrice">@item.ItemPrice</span>
        </td>
        </tbody>
        </table>






        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered Jan 2 at 12:30









        Mark SchultheissMark Schultheiss

        24.1k85181




        24.1k85181
































            draft saved

            draft discarded




















































            Thanks for contributing an answer to Stack Overflow!


            • Please be sure to answer the question. Provide details and share your research!

            But avoid



            • Asking for help, clarification, or responding to other answers.

            • Making statements based on opinion; back them up with references or personal experience.


            To learn more, see our tips on writing great answers.




            draft saved


            draft discarded














            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53993055%2fshopping-cart-plus-minus-calculate-the-total%23new-answer', 'question_page');
            }
            );

            Post as a guest















            Required, but never shown





















































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown

































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown







            dteS1yF,B6YRp2EkKhS0,IMIHAE0w
            yT4eTlCYnGPZP,3EY iX2SXGLJoAl,D0lDwL,nTMLgjwm

            Popular posts from this blog

            Monofisismo

            Angular Downloading a file using contenturl with Basic Authentication

            Olmecas