Calculating cumulative price on checkbox checked event and changing on select option - javascript

I have a set of check boxes that each and every one is related to a specific row which contains a two drop-downs and a quantity spinner. The first drop-down is for selecting an item and second one for selecting a size of that item based on price. The spinner is for selecting the quantity of the item needed.
I need to count the total price of selected items when a check-box is checked, and on change of the drop-down boxes. Finally, the accumulative price should be displayed in a label for each click.
What I have tried so far is here..
function priceCounting(prcField, qtyField) {
var sum = 0;
var qty = parseInt(qtyField);
$(".chkbxPkgCat:checked").each(function(){
var untPrc = parseFloat(prcField.pop());
sum = sum+ (qty * untPrc);
$(".lblAccumPrice1").text(sum);
});
}
On change of check-box, I am calling the function as follows..
$(".chkbxPkgCat").change(function(){
var itm = $(this).parent().parent().next().next().find(".form-control").val();
var qty = $(this).parent().parent().next().next().next().find(".form-control").text();
priceCounting(itm,qty);
});
Also, this is for item drop down on change event..
$("#itemSlct").change(function () {
priceCounting($("#itemSlct option:selected").text(), $("#itmQty").val());
});
Same way, I am calling this on-change of spinner and the price dropdown.
But I am not getting the correct accumulative price generated and also I need to deduct the price if it is unchecked a check-box which is checked previously. Anyone can be helpful with this please?

Related

Calculate Value of form fields & update Total

I have a form where i need to auto calculate value for checked row.
http://codepen.io/anon/pen/dOBaNN?editors=1010
I am calculating the value for the text field on keyup function but need to do following
Keep All text fields disabled
Second i need to enable only text field related to the checkbox checked
Third Calculate sum for only Checked text field
Right now i am able to calculate value for all checkbox not sure how to map checked checbox to related input and calculate values accordingly.
tried few thing but it keep breaking
1) Too disable your text fields set the disabled property to true.
$(".auto-sum").each(function () {
$(this).prop('disabled', true);
});
2) Enable inputs with checkboxes
$('input[type=checkbox]').on('change', function() {
var id = $(this).val();
var active = $(this).prop('checked');
$('.auto-sum[name=Amount' + id + ']').attr('disabled', !active);
calculateSum();
});
3) Skip disabled inputs when calculating
$(".auto-sum").each(function () {
if ($(this).prop('disabled')) return;
[...]
});
I updated your codepen: http://codepen.io/anon/pen/VmJgxM?editors=1011

Calculate value of text input where checkbox is selected

I am trying to get the value of a text input where the select box next to it is selected.
I've got to somehow join the checkbox and text-input together, so it knows only calculate the value of the text input where the checkbox on the same table row is selected.
An issue is also the fact that none of my checkboxes get the attribute of 'checked' when selected either, so I've not been able to target those which are :checked too.
I suspect my method so far is going a little too over the top so any suggestions are welcome.
http://rlpetproducts2.designlocker.co.uk/index.php?route=product/product&product_id=251
$('table.table-bordered input[type="checkbox"]').change(function () {
$(this).toggleClass('jordan');
});
$('#button-cart').hover(function () {
var sum = 0;
$('table.table-bordered input[type="checkbox"]:checked').each(function() {
$('table.table-bordered input[type="text"].jordan').each(function() {
sum += Number($(this).val());
});
});
console.log(sum);
});
The Goal: on 'Add to Basket' click, check at least one of the selected options is selected (else alert), if one is selected, calculate the total quantity from the inline input fields (where checkbox is selected) (for now simply alert the quantity total).
In this example, the value to be alerted would be 5.
Untested but it should work like this:
$('#button-cart').hover(function () {
var parent, sum = 0;
$('table.table-bordered input[type="checkbox"]:checked').each(function() {
// get current row
parent = $(this).closest('tr');
// in row find input and add the value
sum += parseFloat(parent.find('input[type="text"].jordan').val());
});
console.log(sum);
});

update select box when div is click with same id and value

i have a list of size and quantity that is inside the select box and a table,
everytime the user select on size and quantity the table is being highlighted
here is the jsfiddle link for my code
http://jsfiddle.net/19ehdn54/9/
what i want to do now is when user try to click on the table list the select box of size and quantity should change also, i've tried adding this code
$('#qty2 td').click(function() {
$('#qty2 .highlight td').removeClass('highlight2')
var textvalue = this.id;
$('select#size').val(textvalue).change();
});
the select box for sizes is updating but the quantity is not, and only the bottom table part is clickable,
any help is much appreciated. thanks!
I just found an answer to this and add this code
jQuery('#qty2 td').click(function() {
var e = jQuery(this);
var elementID = jQuery(this).attr('id');
var parentID = jQuery(this).parent().attr('id');
//remove class attribute to td
jQuery('#qty2 td').removeAttr('class');
//set highlight class to clicked column
e.addClass('highlight2');
jQuery('#size').val(elementID);
jQuery('#qty').val(parentID);
});

Set Unique ID for selected rows in a table to store in localStorage

I have a window which has drop down list and an HTML table where the table rows are populated on the basis of selection made in drop down list. Once the table is populated user clicks on each row for selection and clicks "OK" button. The user can also select only two out of three rows depending on the requirement. Once the "OK" button is clicked I store the rows selected in the localStorage using the following code and also preform some actions as follows:
$('.ok').bind('click', function() {
if (somecondition) {
//some process
}
$("#selectedTblDiv tr:selected").each(function(index,row) {
fnMatch($(row).find(("td:first").html()));
localStorage.setItem("test-" + index, $(row).find(("td:first").html()));
});
fnDialogClose();
});
Here I have stored the first element of each row in localStorage with unique ID. While I am retrieving the same on page refresh I do the following process:
function fnDisplay() {
//some code to open dialog
for (var i = 0; i < localStorage.length; i++) {
//some code and process
var $select = $("#list_button");
for (var j = 0; j < localStorage.length; j++) {
if (localStorage.getItem("test-" + j)){
var t = localStorage.getItem("test-" + j);
if (t == prevIDs) {
$("#list_button > option").each(function() {
if (this.text == prevIDs) {
$(this).remove();
}
});
$('<option>').text(prevIDs).attr("disabled", true).appendTo($select);
}
}
}
}
}
Here basically fnDisplay() opens a window and on some process drop down list is populated. And from the list user selects and the details are populated in the HTML table.Onclcik of "OK" it performs some actions and also stores the user selection of table in localStorage.
Again when the user opens the window the items in the drop down are disabled which were previously selected from the table. But the items which were not selected from the drop down are still enabled for selection.
My problem is as follows:
Drop down list has
10023
10024
10025
User selects 10023 and 10024 so HTML table is populated as follows:
HTML table
vehID Name Place Summary
----- ---- ----- -------
10023 car blore 4-wheeler
10024 bike pune 2 wheeler
Now user selects the rows 10023 and 10024 and clcik "OK".
Now the window is closed and reopened so my drop down looks as followss
10023 //disabled
10024 //disabled
10025 //enabled
and my html table is empty.
Now user has a provision to select the non-selected values. ie 10025
Now 10025 is selected and HTML is populated and the same row selection and "OK" button is clicked.
Now when the user reloads the window I want all the options in drop down to be disabled as all are selected. But as localStorage is based on row selection its overwriting the stored values when new value is selected. Though I have given unique ID to each row as
localStorage.setItem("test-"+index,somethin);
The value of index is set to 0 again when a new row is selected . So my drop down list looks like this
10023 //enabled
10024 //disabled
10025 //disabled
So here 10025 is overwriting on 10023. How do I resolve this issue by giving an unique ID to each?
The problem is that you are saving each selected item separately, causing existing items to be overridden when you're adding a new item.
Instead you can store an array of items in localStorage . When you're adding a new item, you can retrieve the array and push the new item into it. Something along the following :
var items = JSON.parse(localStorage.getItem("items")) || [];
$("#selectedTblDiv tr:selected").each(function (index, row) {
items.push($(row).find(("td:first").html()));
});
localStorage.setItem("items", JSON.stringify(items));

Setting a variable using the value of multiple selects, each time any of the selects is changed

I have a list of items that I'm trying to "filter" with a set of 4 selects by matching the value of the select options to the classes I have applied to the list items. Right now, I have it working so that each time you choose a new option with any of the 4 selects, the entire list is reset, and only those items with a class that matches the value of the option you just selected is visible. I would like to have it work so that each time a new option is selected from any of the 4 selects, I could filter by the values of all 4 selects, not just the one that was just changed.
Here's what I have right now - any help is appreciated!
$(".sort-options select").change(function() {
var topics = $(this).val();
$(".list-schools li").hide().filter("." + topics).show();
});
$(".sort-options select").change(function() {
var topics = '';
$(".sort-options select").each(function() {
if ($(this).val()) { // Create combined class .opt1.opt2.opt3
topics += "."+$(this).val();
}
});
$(".list-schools li").each(function() {
$(this).toggle($(this).is(topics));
});
});

Categories