Calculate value of text input where checkbox is selected - javascript

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);
});

Related

Copy value to another input with a button

I have two input number fields that show total with some jQuery.
Calculate total:
$('form#lines-form-1 :input[type="number"]').change(function() {
var tot = 0;
$('form#lines-form-1 :input[type="number"]').each(function() {
tot += +this.value;
});
$('#tot-qty').text(tot);
});
JSFiddle: https://jsfiddle.net/q3z4w98o/2/
After entering some numbers on form A press Total to show results.
When clicked Copy how to transfer the total value to Form B's first input field?
E.g.
input1 has value 1
input2 has value 1
total = 2
click Copy
input3 gets a value of 2
Use the following code JS Fiddle:
$("button.copy-btn").click(function() {
$('input[name="i3"]').val($("#tot-qty").text());
})
This bit copies the text value inside the #tot-qty span and sets the i3 input value to that when clicking the "Copy" button.

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

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?

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

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));
});
});

add and remove a certain value from a text field

each checkbox that i check, i fill the input with it's id
now, how can i retrieve this id that i put inside the input if the user uncheck the checkbox?
exp:
estate SC,SP was checked;
input recieve SC,SP value in this format = SC,SP
but the user uncheck the checkbox with SC value, then SC should be removed from the input.
this is what i'm doing to fill the input with the checkboxes.
var separador = ",";
var estadosS = "";
$(".checkboxEstados").live("click", function(){
if($(this).is(":checked")){
estadosS += (estadosS == "") ? "" : separador;
estadosS += $(this).attr("id");
$("#holdEstados").val(estadosS);
}else{
// now i'm just cleaning all the input,
// but i need to clean only the checkbox that was unchecked
$("#holdEstados").val("");
}
});
dont know if i was clear, any question, be my guest.
Thanks.
An easy way to solve this is to avoid parsing and removing parts of the data. Instead of trying to remove 'SC', instead regenerate the entire contents of the text field each time any checkbox is selected.
When a checkbox click event is detected, deleted the contents of the text input field, scan all of the selected checkboxes, and include their IDs in the text input field.
You're logic can be greatly simplified. Simply grab each checkbox that is checked when the click event fires:
$(".checkboxEstados").live("click", function() {
var aryIds = new Array();
$(".checkboxEstados:checked").each(function() {
aryIds.push($(this).attr("id"));
});
$("#holdEstados").val(aryIds.toString());
});
Here's a working fiddle.
I would store the value in an array and add and remove values from it and then write the array to the output instead of trying to parse the text each time:
var estadosS = [];
$(".checkboxEstados").live("click", function(){
var index;
if($(this).is(":checked")){
// append the id to the list
estadosS.push($(this).attr("id"));
}else{
index = estadosS.indexOf($(this).attr("id"));
if(index > -1) {
estadosS.splice(index, 1);
}
}
$("#holdEstados").val(estadosS.join(separador));
});
If all you are aiming to do is get a list of the checked values from all the check boxes, you could do:
$('.checkboxEstados:checked').each(function(){
alert($(this).val());
});
And that should return all the check box items that have been checked. Then you don't have to worry about adding and removing data from a text box. I'm just alerting the value, you would want to store them into an object or something more useful.

Categories