Seeking assistance in creating a feature where users can select a billing term from a dropdown and then choose checkboxes to add to the total. While it works fine on JSFIDDLE, I encounter issues on my website - specifically when selecting all checkboxes, resetting the total to 0 by choosing 'Choose billing term', and unchecking all options leading to negative numbers. Any suggestions on how to resolve this issue? Even checking and unchecking options results in negative numbers.
HTML:
<div class="payment-term">
<label>Billing period:</label>
<select id="billing-price" name="billing-term" class="selectpicker">
<option value="0">Choose billing term</option>
<option value="300">12 Months: $300/mo. (Save 20%)</option>
<option value="350">1 Month: $350/mo.</option>
</select><br><br>
<label>Extra Features ($50/month): </label>
</div>
<section id="extra-features">
<div class="span3">
<label class="checkbox" for="Checkbox1">
<input type="checkbox" class="sum" value="50" data-toggle="checkbox"> Instagram
</label>
<label class="checkbox">
<input type="checkbox" class="sum" value="50" data-toggle="checkbox"> Review site monitoring
</label>
<label class="checkbox">
<input type="checkbox" class="sum" value="50" data-toggle="checkbox"> Google+
</label>
<label class="checkbox">
<input type="checkbox" class="sum" value="50" data-toggle="checkbox"> LinkedIn
</label>
</div>
<div class="span3">
<label class="checkbox">
<input type="checkbox" class="sum" value="50" data-toggle="checkbox"> Pinterest
</label>
<label class="checkbox">
<input type="checkbox" class="sum" value="50" data-toggle="checkbox"> FourSquare
</label>
<label class="checkbox">
<input type="checkbox" class="sum" value="50" data-toggle="checkbox"> Tumblr
</label>
<label class="checkbox">
<input type="checkbox" class="sum" value="50" data-toggle="checkbox"> Advertising
</label>
</div>
</section>
<div class="card-charge-info">
Your card will be charged $<span id="payment-total">0</span> now, and your subscription will bill $<span id="payment-rebill">0</span> every month thereafter. You can cancel or change plans anytime.
</div>
Javascript code:
var select = document.getElementById('billing-price');
select.addEventListener('change', updatePrice, false);
var price = 0;
var additional = 0;
function updatePrice(e) {
price = parseFloat(select.value);
document.getElementById('payment-total').innerText = price + additional;
if (price == select.options[2].value){
document.getElementById('payment-rebill').innerText = 0 + additional;
} else {
document.getElementById('payment-rebill').innerText = price + additional;
}
}
var inputs = document.getElementsByClassName('sum'),
total = document.getElementById('payment-total');
total2 = document.getElementById('payment-rebill');
for (var i=0; i < inputs.length; i++) {
inputs[i].onchange = function() {
var add = this.value * (this.checked ? 1 : -1);
additional += add
total.innerHTML = price + additional
total2.innerHTML = price + additional
}
}
Check out the working jsfiddle here: http://jsfiddle.net/uZbee/2/
Visit my site (not functioning correctly):
I have implemented a custom javascript file for better checkbox appearance, which might be affecting the calculation of checked boxes in my javascript code.