Question

I am trying to create a simple jQuery calculator but it doesn't seem to be working as I hope it to be. Basically it should calculate automatically at 0 the price from the input boxes and then multiply when the +/- are clicked.

It doesn't seem to do anything or show any errors.

jQuery(document).ready(function(){
        var qty = parseInt($('.qty').val());    
    var price = parseFloat($('#price').val());

    $("#price").each(function(){
      total += parseFloat(this.value);
    });

http://jsfiddle.net/hktxyz5z/1/

I am not sure if I am over thinking, anyone got any ideas?

Answer 1

You need to give the variable declarations inside the click event:

var qty = parseInt($('.qty').val());    
var price = parseFloat($('#price').val());

The reason is, you are statically setting the values to 0.00 at the first load. Every time you increment or decrement, the values do not change. It is set once and not set when it is changed. They don't dynamically change, after the click events are fired.

The solution is to put the above two lines inside the .click() functions.

jQuery(document).ready(function(){

  $("#price").each(function(){
    total += parseFloat(this.value);
  });

  // This button will increment the value
  $('.qtyplus').click(function(e){
    // Stop acting like a button
    e.preventDefault();
    // Get the field name
    fieldName = $(this).attr('field');
    // Get its current value
    var currentVal = parseInt($('input[name='+fieldName+']').val());
    // If is not undefined
    if (!isNaN(currentVal)) {
      // Increment
      $('input[name='+fieldName+']').val(currentVal + 1);
      qty = parseInt($('.qty').val());    
      price = parseFloat($('#price').val());
      $('#total').val((qty * price ? qty * price : 0).toFixed(2));
    } else {
      // Otherwise put a 0 there
      $('input[name='+fieldName+']').val(0);
      qty = parseInt($('.qty').val());    
      price = parseFloat($('#price').val());
      $('#total').val((qty * price ? qty * price : 0).toFixed(2));
    }
  });
  // This button will decrement the value till 0
  $(".qtyminus").click(function(e) {
    // Stop acting like a button
    e.preventDefault();
    // Get the field name
    fieldName = $(this).attr('field');
    // Get its current value
    var currentVal = parseInt($('input[name='+fieldName+']').val());
    // If it isn't undefined or its greater than 0
    if (!isNaN(currentVal) && currentVal > 0) {
      // Decrement one
      $('input[name='+fieldName+']').val(currentVal - 1);
      qty = parseInt($('.qty').val());    
      price = parseFloat($('#price').val());
      $('#total').val(((qty * price > 0) ? qty * price : 0).toFixed(2));
    } else {
      // Otherwise put a 0 there
      $('input[name='+fieldName+']').val(0);
      qty = parseInt($('.qty').val());    
      price = parseFloat($('#price').val());
      $('#total').val(((qty * price > 0) ? qty * price : 0).toFixed(2));
    }
  });
});

Working Fiddle: http://jsfiddle.net/txk2d85y/