Calculate the total of form immediately without having to check a checkbox

Question

I have an HTML, JavaScript form, which calculates a price based upon choices made in the form. The problem is that the total price will only be calculated after one checkbox has been clicked. I want it to calculate the price immediately without having to check a checkbox first. Below is a snippet of the JavaScript code:

function totalIt() {
  var input = document.getElementsByName("product");
  var total = 0;
  for (var i = 0; i < input.length; i++) {
    if (input[i].checked) {
        total += parseFloat(input[i].value); // this function should run immediately
    }
  }
  document.getElementById("total").value = "€" + total.toFixed(2);
}

The full form can be found here.

How can this be done?

Seems to be a few other problems with that form. Click the first checkbox then unclick it, the price doesn't zero out. Aside from that, the only way to do anything on the form appears to be to check boxes. You seem to suggest you want something to happen before the user actually checks a box (even though that's the only way it seems a user can make a selection)? — Tim Consolazio, Apr 29 '17 at 11:49
Possible duplicate of [run function when page is loaded](http://stackoverflow.com/questions/4842590/run-function-when-page-is-loaded) — Vivek Athalye, Apr 29 '17 at 12:12

score 0 · Answer 1 · answered Apr 29 '17 at 11:51

Call the totalIt(); after loading the page.

<!-- Rekenscript om het totaal van het formulier te genereren -->
function totalIt() {
    var input = document.getElementsByName("product");
    var total = 0;
    for (var i = 0; i < input.length; i++) {
        if (input[i].checked) {
            total += parseFloat(input[i].value);
        }
    }
    document.getElementById("total").value = "€" + total.toFixed(2);
}

<!-- Checkbox switch om maandelijkse kosten aan of uit te doen -->
function showMe (box) {

    var chboxs = document.getElementsByName("c1");
    var vis = "none";
    for(var i=0;i<chboxs.length;i++) {
        if(chboxs[i].checked){
            vis = "block";
            break;
        }
    }
    document.getElementById(box).style.display = vis;
}

<!-- Switch om ander thema te kiezen (met a href) -->
function toggle() {
    var ele = document.getElementById("toggleText");
    var text = document.getElementById("displayText");
    if(ele.style.display == "block") {
        ele.style.display = "none";
        text.innerHTML = "Een ander thema kiezen";
    }
    else {
        ele.style.display = "block";
        text.innerHTML = "Huidige thema behouden";
    }
}

totalIt(); // call it here

DanielBoven · Accepted Answer · 2017-04-29T14:26:23.867

I have found a good solution. It is pretty stupid that I hadn't realised it, but unfortunately I am not that good at JavaScript.

I used the totalIt(); as @Durga suggested. I added this script around it, so that It would call the calculate function every 10ms:

window.setInterval(function(){
  totalIt();
}, 10);

It doesn't matter where you place the script, as long as you don't place it in the form code, or replace any code. Of course you can change the 10ms to whatever you need. Thank you all for your answers.

Calculate the total of form immediately without having to check a checkbox

2 Answers2