Shopping Cart PLUS & MINUS Calculate the total

Multi tool use
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
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;
});
});
javascript jquery html asp.net asp.net-mvc
add a comment |
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
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;
});
});
javascript jquery html asp.net asp.net-mvc
The view code you posted seems to be incorrect. You have a closing bracket, but no open bracket. Also you cannot have atd
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
add a comment |
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
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;
});
});
javascript jquery html asp.net asp.net-mvc
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
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
javascript jquery html asp.net asp.net-mvc
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 atd
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
add a comment |
The view code you posted seems to be incorrect. You have a closing bracket, but no open bracket. Also you cannot have atd
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
add a comment |
1 Answer
1
active
oldest
votes
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>
add a comment |
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
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
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>
add a comment |
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>
add a comment |
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>
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>
answered Jan 2 at 12:30
Mark SchultheissMark Schultheiss
24.1k85181
24.1k85181
add a comment |
add a comment |
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.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
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
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