Forums

Checkbox value calculate issues

jigsaw 29 Aug, 2016
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:
<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
GreyHead 30 Aug, 2016
Hi Harrold,

I have no idea what the +$() is supposed to do - it's not any JavaScript syntax that I recognise ?? (That's not to say it isn't valid, I just don't recognise it.)

I also don't see anything that would reduce the value if a box is un-checked ??

And the calculate function looks as if it adds the subtotal value to the total when the subtotal or the total changes. I can't start to work out the logic of your code here :-(

Bob
jigsaw 30 Aug, 2016
Hi Bob,

First of, as always thanks for your quick reply. Judging by your response however it seems i might have made a bit of a mess out of the coding. Took me almost a day to get this far :-(

Perhaps if i ask the question different, would you be able to point me in the right direction?

I know the following code is working to get the seperate values and also the total of all the values:
 
    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);
    });

    function calculate (){
     $('totaal').value = +$('subtotaal').value + +$('slideshow').value + +$('route').value + +$('nieuws').value + +$('social').value + +$('nieuwsbrief').value + +$('facebook').value + +$('autopublish').value + +$('teksten').value + +$('meertalig').value;
    }


But then the value also gets calculated when a checkbox is not selected which is not what i need. I need to include some code which will tell the calculate function only to fill in a value when checked.

I also already tried to work with the ghost value but eventhough it will return a 0 as value in the original field it still takes the normal value in the calculate function.

I hope to get some guidance.

Harrold
This topic is locked and no more replies can be posted.