HAML + Jquery: Autocalculate total based on unit cost and quantity (no tables used)

Question

I'm not sure if keyup is the correct tool for this, but ideally the user can enter the quantity and the unit cost, and it just spits out in the total in the very right column (not having to hit enter or anything, just spits it out). By default, when the page loads, the 'total' is set to $0.00.

http://jsfiddle.net/BgrSU/1/

As suggested by the code,

%p#first_brand $0.00​​​​

is what the initial total is. If the user enters a unit cost and a quantity, this is changed to the desired amount, which would be the

#total_result

Here's the function if you don't want to click the link. Note there are no errors in the JS console.

$(document).ready(function(){
  $('input#bulk_order_unit_cost0, input#bulk_order_quantity0').keyup(function(){
    $('#total_result').text($(('.field#unit_cost0')*('.field#quantity0')).val());

  });
});

Any help is greatly appreciated. Rather new to this type of stuff.

Answer 1

So it looks like you can't put the HAML syntax in the jsfiddle page. Changing that to html and making some minor changes to the js, results in this http://jsfiddle.net/BgrSU/2/ . Look for where I moved the calls to jquery ('$') and I changed keyup to change, which seems to be what you really want

I would put in a rounding bit as well, but I left it out to keep the code uncluttered. you can read about that here http://www.javascriptkit.com/javatutors/round.shtml