Input Value When Checkbox is Checked in JQuery

JavaScript
1

Hi, I need some help with some JQuery. I have a calculation form where the code is detailed below. The calculator works so that the user inputs a quantity for a item and things like delivery cost and the price are calculated for each item. Then, there is also an overall total delivery cost and total cost box for all items.

I also have a ‘pickup’ ID Checkbox on the form. I’m trying to make it so that if the ‘pickup’ ID Checkbox is checked, the Delivery Costs for all items input a value of 0 which is the default value anyway. Then all remaining calculations proceed as normal. For instance, something like if pickup box is checked, item ‘batdelivery’ = 0 and the same for item ‘wickdelivery’ = 0. Then ‘delivery’ total = 0.

I tried using the .prop method and getdocumentId with an IF statement but only succeeding in blanking out the 0 while the calculation still proceeded. Here’s my code:

var batCost = 0, batDelivery = 0;
var wickCost = 0, wickDelivery = 0;
function calc() {
  var taxAmount = (batCost + wickCost) *10/100;
  $('#delivery').val('$' + (batDelivery + wickDelivery).toFixed(2));
  $('#gtotal').val('$' + (batCost + wickCost + batDelivery + wickDelivery).toFixed(2));
  $('#total').val('$' + (batCost + wickCost).toFixed(2));
  $('#batd').val('$' + (batDelivery).toFixed(2));
  $('#wicd').val('$' + (wickDelivery).toFixed(2));

}
$( document ).ready(function() {
  $('#batq').keyup(function() {
    numBats = $('#batq').val();
    batCost = numBats * 5;
    batDelivery = 0;
    if (numBats > 0) {
      batDelivery = 2.00 + (numBats - 1) * 1.00
    $('#bat').val('$' + (batCost + batDelivery).toFixed(2));
    }
    calc();
  });
  $('#wicq').keyup(function() {
    numWicks = $('#wicq').val();
    wickCost = numWicks * 10;
    $('#wickets').val('$' + wickCost.toFixed(2));
    wickDelivery = 0;
    if (numWicks > 0) {
      wickDelivery = 4.00 + (numWicks - 1) * 2.00
    $('#wickets').val('$' + (wickCost + wickDelivery).toFixed(2));
    }
    calc();
  });
});

Any help would be greatly appreciated. Thank you.

2

if pickup box is checked, item ‘batdelivery’ = 0 and the same for item ‘wickdelivery’ = 0. Then ‘delivery’ total = 0.

You can check the checkbox’s ‘:checked’ pseudo-selector with jQuery to determine state.

var pickup = $('#pickup');
if (pickup.is(':checked')) {
    //zero out values here.
}
3

Hi vgarcia, Thank you for your response. I amended my code by including:

function calc() {
var pickup = $('#pickup');
if (pickup.is(':checked')) {
    batDelivery = 0;
    wickDelivery = 0;
}

It works in a sense. It makes the value 0 when checked. However, it only works when you modify the quantity for #batq and #wicq. I’m trying to make it dynamic so that batDelivery and wickDelivery equal 0 when #pickup is checked and whatever value when unchecked. For instance, in #batq you may have a quantity of 5, when you select the #pickup, checkbox it doesn’t change when it needs to.0. Same if you had 0, when unchecked it should equal 5.

Thank you for your help. Ventura.

4

Hi, I’m sorry but I forgot to add > onclick=“calc();” to the HTML. Now it resets the value to ‘0’ when the checkbox is checked straight away. The only problem is that when the checkbox is unchecked, it still stays at 0.

For example, the delivery cost may be 50 and when pickup # is checked, it goes back to 0. However, when unchecked again, it stays at 0 instead of going back to 50. I think I need some kind of else statement maybe but not sure. Any help would be great. Thank you, Ventura.

5

If I were you I’d move my costs to model-style objects. Example:

function OrderItem (quantity, priceEach, baseDelivery, additionalDelivery) {
    this.quantity = quantity || 0;
    this.price = priceEach || 0;
    this.baseDelivery = baseDelivery || 0;
    this.additionalDelivery = additionalDelivery || 0;
}
OrderItem.prototype = {
    subtotal: function () {
        return this.quantity * this.price;
    },
    deliveryCharge: function (isPickup) {
        if (isPickup || this.quantity < 1) {
            return 0;
        }
        return this.baseDelivery + ((this.quantity - 1) * this.additionalDelivery);
    },
    total: function (isPickup) {
        return (this.subtotal() + this.deliveryCharge(isPickup)).toFixed(2);
    }
};

Now we have a good base that does all our calculations and stores our costs. We can subclass for bat and wick. Here’s bat:

function BatItem(quantity) {
    OrderItem.apply(this, arguments);
    this.priceEach = 5;
    this.baseDelivery = 2;
    this.additionalDelivery = 1;
}

Then rewrite your functions to use that object.

$('#batq').keyup(function() {
    var quantity = parseInt($(this).val(), 10);
    var batLineItem = new BatItem(quantity);
    //get the value of the pickup checkbox, pass it to our object.
    var isPickup = $('#pickup').is(':checked');
    $('#bat').val('$' + batLineItem.total(isPickup).toString());
    calc();
  });

Lots of code duplication is now gone. Do similar for wick and you have much more reusable code.

Also, reacting only on the keyup event may cause you issues. For example, the event doesn’t fire in Chrome if you choose an autocomplete selection instead of typing it in. Look into the change or input event instead or in addition to keyup.

6

Hi vgarcia, Thank you so much for your help with this. I really appreciate your time and efforts. I was thinking my code would need to be restructured so I’m delighted to have this alternative. I’m away from my computer tonight but will let you know how I go as soon as I get onto this. Thank you again, Ventura.

7

Hi vgarcia, Thank you again for the code. I tried to implement it but I could not get it working. Do you need to call these functions at all through html? Also, this line if (isPickup || this.quantity < 1) { returned an error. It’s something to do with the < 1.

I’m sorry but I’m a real novice with this. Does this all go in the one JQuery function? That’s where I put it. Where are the below ID’s written:

 $('#delivery').
  $('#gtotal').
  $('#total').

I really like the design of your code and hope to get it working. Any further help would be great. Thank you, Ventura.