How can I calculate a set of radio buttons using JavaScript? It works as of now with adding up the total. but I would like it to Subtract the $150.00 off.
this is what I been working on now I get $Nan
<p>Baby Plan<br />
[radio BPSUBPT id:BPSUBPT class:radio-vertical "Baby Plan $300.00 3 Sessions" "Baby Plan $500.00 4 Sessions"] </p>
<p>Did you have a Newborn session With ADP? <br />
[radio BPSUPQ id:BPSUPQ class:radio-vertical "Yes$ -150 off" "No"]
<p>Baby Plan Totals: <br />
Baby Plan Price: [text BPSUBPP 28/28 id:BPSUBPP]
Discount Amount: [text BPSUDA 8/8 id:BPSUDA]
Total Price: <span id="total"></span
<script>
$(document).ready(function() {
var inputs = $('input[name="BPSUBPT"], input[name="BPSUPQ"]');
$(inputs).click(function() {
var total = 0;
$(inputs).filter(':checked').each(function() {
var value = ($(this).val()).match(/\$([0-9]*)/)[1];
total = (parseInt(total) - parseInt(value))
})
$('#total').html('$' + total);
});
$('input[name="BPSUBPT"]').click(function() {
$(this).blur();
$('#BPSUBPP').val($(this).val());
})
$('input[name="BPSUPQ"]').click(function() {
$(this).blur();
$('#BPSUDA').val($(this).val());
});
});
</script>
You should probably just ADD the totals:
<p>Baby Plan<br />
[radio BPSUBPT id:BPSUBPT class:radio-vertical "Baby Plan $300.00 3 Sessions" "Baby Plan $500.00 4 Sessions"] </p>
<p>Did you have a Newborn session With ADP? <br />
[radio BPSUPQ id:BPSUPQ class:radio-vertical "Yes $-150 off" "No"]
<!-- beware here because I changed "Yes$ -150" to "$-150" -->
<p>Baby Plan Totals: <br />
Baby Plan Price: [text BPSUBPP 28/28 id:BPSUBPP]
Discount Amount: [text BPSUDA 8/8 id:BPSUDA]
Total Price: <span id="total"></span
jQuery
$(document).ready(function() {
var inputs = $('input[name="BPSUBPT"], input[name="BPSUPQ"]');
$(inputs).click(function() {
var total = 0;
$(inputs).filter(':checked').each(function() {
// Now including the - sign
var value = ($(this).val()).match(/\$(-?[0-9]*)/)[1];
if (value) {
// I'm now ADDing the total
// total = total + parseInt(value);
total += parseInt(value);
}
});
$('#total').html('$' + total);
});
$('input[name="BPSUBPT"]').click(function() {
$(this).blur();
$('#BPSUBPP').val($(this).val());
});
$('input[name="BPSUPQ"]').click(function() {
$(this).blur();
$('#BPSUDA').val($(this).val());
});
});
I think whats happening is you're working with negative numbers.
When you do total = total - parseInt(value);
you are subtracting the value as determined by the radio buttons from 0. ( var total = 0;
). So your total is actually a negative number.
You probably want to add there, and then make the value of the 150 discount -150
, and add that to your total.
Don't use decrement/incrementation of total, count right total every time.
Add attribute cost
to each valuable input(price or discount) and:
Try this:
$('input').click(function(){ var total = 0; $('input').filter(':checked').each(function(){ var cost = $(this).attr('cost'); cost = cost ? parseFloat(cost) : 0; console.log(cost); total += cost; }); $('#total').text('$'+Math.max(total, 0)); })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input cost="300" type="radio" name="BPSUBPT" value="Baby Plan $300.00 3 Sessions"> Baby Plan $300.00 3 Sessions<br/> <input cost="500" type="radio" name="BPSUBPT" value="Baby Plan $500.00 3 Sessions"> Baby Plan $500.00 3 Sessions<br/> <input cost="-150" type="radio" name="BPSUPQ" value="Yes $150.00 off" /> Apply Discount?<br/> <input cost="0" type="radio" name="BPSUPQ" value="No" />No<br/> <div id="total">
Update:
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.