Calculate Value of form fields & update Total - javascript

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

Related

Passing checkbox to hidden input

So i have a checkbox which is loading from php on other page and since i cannot get the values of them ive written a jquery script that was supposed to check if a checkbox was checked and if so it would mark the corresponding hidden input with value 1 or 0.
But seems like it's only working for 1 in the loop no matter what i do.
<script>
$(document).ready(function() {
var total = <?php echo $count; ?>;
for (i = 0; i < total; i++) {
$('input[type="checkbox"]').change(function(event) {
if($(this).is(":checked")){
$(".check_"+i).val(1);
console.log("added"+i);
}else{
$(".check_"+i).val(0);
console.log("removed"+i);
}
});
}
});
</script>
looks like you are registering change event handler of checkbox for multiple times instead you need to put 1 or 0 on multiple i=hidden inputs.
You don't need loop here, just add change event handler for all checkboxes having id starts with check_ and read same id to create input hidden class selector. Set the value to input hidden.
See below code -
<script>
$(document).ready(function() {
//bind change event for checkbox having id starts with "check_"
$(document).on('change','input[type="checkbox"][id^=check_]', function(event) {
var id = $(this).attr('id');// id of checkbox checked/unchecked
$("."+id).val($(this).is(':checked')?1:0); // put 1 or 0 to the matching hidden input
});
});
</script>

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?

jQuery - append string to input when changed

I have multiple select inputs on a page and I'd like to set all of them to have a particular option selected if a checkbox is checked
Once the form is submitted the inputs that have been updated will be looped through and sent to the database, so I have a function to append a string to the option value which is called on change of the select
This is all working great, however I'd like to append the updated string (to the value, not text) when the select option is changed by the checkbox being checked, but can't seem to get this to work
Fiddle https://jsfiddle.net/69zzr6xa/2/
I've tried looping through each select like so and then checking if the second option is already selected. If not, append the string, but it doesn't appear to work
$('select').each(function() {
if (!$(this).$('option').text == 'Two') {
var inputname = $(this).find(":selected")[0].value;
$(this).(":selected").val(inputname + "-updated");
}
});
I think this is what you are looking for.
function set_to_two() {
$('option:nth-child(2)').each(function(){
$(this).prop('selected', true);
if( $(this).val().indexOf('-updated') < 0 ){
$(this).val( $(this).val() + "-updated" );
}
});
set_updated();
}

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

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