8

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 />

1 Answer 1

27
$("#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.

Sign up to request clarification or add additional context in comments.

1 Comment

Thanks so much, I knew it was something fairly straight forward. Really appreciated!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.