Try this:
$("input:not(#totalcost)").click(function() {
let valu, num,
multiplier = Number($(this).attr("value")),
sum = Number($("#sum").val());
name = $(this).attr("name");
num = multiplier * sum;
valu = Math.round((num + Number.EPSILON) * 100) / 100;
$("#totalcost").val(valu);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="agencydiscount">
<h1>6. Agency Discount</h1>
<label>
<input type="radio" name="percentdiscount" id="percentdiscount" value="0" checked>
None
</label>
<label>
<input type="radio" name="percentdiscount" id="10percent" value="0.9">
10% Discount
</label>
<label>
<input type="radio" name="percentdiscount" id="15percent" value="0.85">
15% Discount
</label>
</div>
<div class="runningtotal">
Running CPC Total (in £): <input id="sum" type="text" readonly="true" value="0.40" data-total="0" />
Total Cost (in £): <input id="totalcost" type="text" readonly="true" value="0 (until clicks specified)" data-total="0" />
</div>
If you need to change the value if “None” is checked, just change its value in html or write an if statement.
jQuery(function($) {
$('input[name="percentdiscount"]').on('change', function() {
applyDiscount();
});
$('input[type=checkbox]').click(function() {
let sum = 0;
$('input[type=checkbox]:checked').each(function() {
sum += parseFloat($(this).val());
});
$('#sum').val(sum.toFixed(2)).data('total', sum);
applyDiscount();
});
function applyDiscount() {
var pc = parseFloat($('input[name="percentdiscount"]:checked').val());
$('#sum').val(function() {
return ($(this).data('total') * pc).toFixed(2);
});
$('#totalcost').val(function() {
return ($(this).data('total') * pc).toFixed(2);
});
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="agencydiscount">
<h1>6. Agency Discount</h1>
<label>
<input type="radio" name="percentdiscount" value="1" checked>
None
</label>
<label>
<input type="radio" name="percentdiscount" id="10percent" value="0.9">
10% Discount
</label>
<label>
<input type="radio" name="percentdiscount" id="15percent" value="0.85">
15% Discount
</label>
</div>
<div class="runningtotal">
Running CPC Total (in £): <input id="sum" type="text" readonly="true" value="0.00" data-total="0" />
Total Cost (in £): <input id="totalcost" type="text" readonly="true" value="0 (until clicks specified)" data-total="0" />
</div>
When this function runs I am trying to have it multiply 2 separate textbox values (#sum and #totalcost) by the percentdiscount value, but whenever the function runs the #totalcost textbox value is just going to 0.
What am I doing wrong?
percentdiscount value is 0.9 or 0.85, depending on which of the two radio buttons is clicked.
Also, please assume the #sum is a value other than 0.00, for example assume it to be 0.40.
Could you please add the relevant HTML to the question so we can create a working example of the problem
Please take the time to describe what the issues are and why this solution helps. Remember, we’re here to educate people, not just write code for them.
I’m not sure what this javascript is doing; it should be multiplying the value in ‘sum’ by the value of ‘percent discount’, and then multiplying the value in ‘totalcost’ by the same value of ‘percent discount’.
