Question

I am kinda new to Jquery / JS and after a little help. I realise there hopefully is a much better way to do this, and any help would be greatly appreciated.

I am building a form that can calculate a total. That is:

‘Cost’ x ‘(1 + percent(%))’ = ‘total cost’

I have it working nicely, though I want to make it so that if I change either the ‘percent‘ field, or the ‘cost‘ field then the total amount updates. At the moment only if you update the ‘cost‘ will the total update.

Hope that makes sense. Code is below.

$(document).ready(function(){

$("#cost").change(function() { 
var findprofit = parseFloat($("#cost").val());
var profit = (findprofit*.01)
var margin = parseFloat($("#percentage").val());
var total = profit*margin;
$(".profit_1_1").html(total);
var totalprofit = (total + findprofit);
$("#total").val(totalprofit);
});

<input type="text" name="cost" id="cost"  />
<input type="text" name="percentage" id="cost" percentage />
<input type="text" name="total" id="total" readonly />

Answer 1

$("#cost, #percent").change(function() { 
    ...
});

Should do the trick.

Edit: You’ll need to give your percent input an id of “percent”. Two elements may not have the same ID.

<input type="text" name="cost" id="cost"  />
<input type="text" name="percentage" id="percent" percentage />
<input type="text" name="total" id="total" readonly />

Also I’m not sure what that “percentage” is at the end of the input. Percentage isn’t a valid attribute.