Hi there,
At the moment i am building a form in which i am trying to include checkboxes. I need to do some calculations with the values of these checkboxes to achieve a total amount. Everything is working as expected as long as i do not try to place a control to find out wether or not a checkbox is checked. If it is not checked i do not want the value to be passed through to the calculate function. At this point i unfortunately get lost and am hoping for some help.
The html code is:
And the javascript which i have loaded into the load javascript is:
Everything is working, i do get all the values in the email except the totaal value. As soon as i remove the +$('total').value and replace it with all the seperate values i do get the total amount but sadly also when i do not check the checkboxes.
Any help would be much appreciated.
Harrold
At the moment i am building a form in which i am trying to include checkboxes. I need to do some calculations with the values of these checkboxes to achieve a total amount. Everything is working as expected as long as i do not try to place a control to find out wether or not a checkbox is checked. If it is not checked i do not want the value to be passed through to the calculate function. At this point i unfortunately get lost and am hoping for some help.
The html code is:
<form id="test">
<input name="subtotaal" id="subtotaal" value="799" type="hidden" class="" />
<div class="form-container-wide">
<div class="row">
<div class="input">
<input name="slideshow" id="slideshow" value="90" class="cmn-toggle cmn-toggle-round" type="checkbox" onClick="TotalCheckedValues()" />
<label for="slideshow"></label>
</div>
</div>
<div class="row">
<div class="input">
<input name="route" id="route" value="45" class="cmn-toggle cmn-toggle-round" type="checkbox" onClick="TotalCheckedValues()" />
<label for="route"></label>
</div>
</div>
<div class="row">
<div class="input">
<input name="nieuws" id="nieuws" value="90" class="cmn-toggle cmn-toggle-round" type="checkbox" onClick="TotalCheckedValues()" />
<label for="nieuws"></label>
</div>
</div>
<div class="row">
<div class="input">
<input name="social" id="social" value="90" class="cmn-toggle cmn-toggle-round" type="checkbox" onClick="TotalCheckedValues()" />
<label for="social"></label>
</div>
</div>
<div class="row">
<div class="input">
<input name="nieuwsbrief" id="nieuwsbrief" value="399" class="cmn-toggle cmn-toggle-round" type="checkbox" onClick="TotalCheckedValues()" />
<label for="nieuwsbrief"></label>
</div>
</div>
<div class="row">
<div class="input">
<input name="facebook" id="facebook" value="135" class="cmn-toggle cmn-toggle-round" type="checkbox" onClick="TotalCheckedValues()" />
<label for="facebook"></label>
</div>
</div>
<div class="row">
<div class="input">
<input name="autopublish" id="autopublish" value="90" class="cmn-toggle cmn-toggle-round" type="checkbox" onClick="TotalCheckedValues()" />
<label for="autopublish"></label>
</div>
</div>
<div class="row">
<div class="input">
<input name="teksten" id="teksten" value="180" class="cmn-toggle cmn-toggle-round" type="checkbox" onClick="TotalCheckedValues()" />
<label for="teksten"></label>
</div>
</div>
<div class="row">
<div class="input">
<input name="meertalig" id="meertalig" value="90" class="cmn-toggle cmn-toggle-round" type="checkbox" onClick="TotalCheckedValues()" />
<label for="meertalig"></label>
</div>
</div>
</form>
And the javascript which i have loaded into the load javascript is:
function TotalCheckedValues() {
var total = 0;
if(document.getElementById("test").slideshow.checked == true) { total += parseFloat(document.getElementById("test").slideshow.value); }
if(document.getElementById("test").route.checked == true) { total += parseFloat(document.getElementById("test").route.value); }
if(document.getElementById("test").nieuws.checked == true) { total += parseFloat(document.getElementById("test").nieuws.value); }
if(document.getElementById("test").social.checked == true) { total += parseFloat(document.getElementById("test").social.value); }
if(document.getElementById("test").nieuwsbrief.checked == true) { total += parseFloat(document.getElementById("test").nieuwsbrief.value); }
if(document.getElementById("test").facebook.checked == true) { total += parseFloat(document.getElementById("test").facebook.value); }
if(document.getElementById("test").autopublish.checked == true) { total += parseFloat(document.getElementById("test").autopublish.value); }
if(document.getElementById("test").teksten.checked == true) { total += parseFloat(document.getElementById("test").teksten.value); }
if(document.getElementById("test").meertalig.checked == true) { total += parseFloat(document.getElementById("test").meertalig.value); }
var ts = new String(total);
if(ts.indexOf('.') < 0) { ts += '.00'; }
if(ts.indexOf('.') == (ts.length - 2)) { ts += '0'; }
document.getElementById("test").addons.value = ts;
}
window.addEvent('domready', function() {
$('subtotaal').addEvent('change', calculate);
$('slideshow').addEvent('change', calculate);
$('route').addEvent('change', calculate);
$('nieuws').addEvent('change', calculate);
$('social').addEvent('change', calculate);
$('nieuwsbrief').addEvent('change', calculate);
$('facebook').addEvent('change', calculate);
$('autopublish').addEvent('change', calculate);
$('teksten').addEvent('change', calculate);
$('meertalig').addEvent('change', calculate);
$('total').addEvent('change', calculate);
});
function calculate (){
$('totaal').value = +$('subtotaal').value + +$('total').value;
}
Everything is working, i do get all the values in the email except the totaal value. As soon as i remove the +$('total').value and replace it with all the seperate values i do get the total amount but sadly also when i do not check the checkboxes.
Any help would be much appreciated.
Harrold