Real-time calculation of total in dynamic form

Question

This issue has probably a very simple solution, but as a beginner in Javascript, I can't find the solution after trying different possibilities.

So I have a form where people can reserve tickets at 6 or 10 Euros. Each line is a person. The user can add up to 5 people.

I wish to let the user see the total amount, depending of the ticket choice and the number of persons.

This is what I have:

HTML:

<form id="totaalBerekening" method="POST" action="example.php" role="form">
<table id="dataTable" class="form">
  <tbody>
<tr>
  <p>
    <td><input type="checkbox" required="required" name="chkbox[]" checked="checked" /></td>
    <td>
        <label>Voornaam</label>
        <input type="text" required="required" name="vn[]">
     </td>
     <td>
        <label>Naam</label>
        <input type="text" required="required" name="naam[]">
     </td>
     <td>
        <label>E-mail</label>
        <input type="email" required="required" name="email[]">
     </td>
     <td>
        <label>Telefoon</label>
        <input type="text" required="required" name="tel[]">
     </td>
     <td>
        <label>Type</label>
        <select id="leeftijd" name="leeftijd[]" onchange="calculateTotal">
            <option value="kind">Kind -12j (€ 6,00)</option>
            <option value="volw">Volwassene (€ 10,00)</option>
        </select>   
     </td>
     <td>
        <label>Shift</label>
        <select name="shift[]">
            <option value="shift1">11u30 - 13u00</option>
            <option value="shift2">13u - 14u30</option>
        </select>   
    </td>
    <td><a class="kruisje" onClick="deleteRow('dataTable')">X</a></td>
    </p>
</tr>
</tbody>
</table>
<p>Total price:  <div id="totaalPrijs"></div></p>
<p> 


<a type="button" class="simplebtn" onClick="addRow('dataTable')">Voeg nog een persoon toe</a>
</p>
<div class="clear"></div>
<input type="submit" class="submit" value="Bestel nu" /> 
</form>

Javascript:

<script>
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
if(rowCount < 5){                           // limit the user from creating fields more than your limits
    var row = table.insertRow(rowCount);
    var colCount = table.rows[0].cells.length;
    for(var i=0; i<colCount; i++) {
        var newcell = row.insertCell(i);
        newcell.innerHTML = table.rows[0].cells[i].innerHTML;
    }
}else{
     alert("Opgelet, het maximum aantal tickets per persoon is 5.");

}
}

function deleteRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for(var i=0; i<rowCount; i++) {
    var row = table.rows[i];
    var chkbox = row.cells[0].childNodes[0];
    if(null != chkbox && true == chkbox.checked) {
        if(rowCount <= 1) {                         //     limit the user from removing all the fields
            alert("Opgelet, je kan niet alle personen verwijderen.");
            break;
        }
        table.deleteRow(i);
        rowCount--;
        i--;
    }
}
}
var leeftijdPrijs = new Array();
leeftijdPrijs["kind"]=6;
leeftijdPrijs["volw"]=10;

function getLunchPrice()
{
    var lunchPrice=0;

var theForm = document.forms["totaalBerekening"];

var selectedLeeftijd = theForm.elements["leeftijd"];

lunchPrice = leeftijdPrijs[selectedLeeftijd.value];

return lunchPrice;
}
function calculateTotal()
{
var totaalPrijs = getLunchPrice();

var divobj = document.getElementById('totaalPrijs');
divobj.style.display='block';
divobj.innerHTML = "Total Price For the lunch $"+totaalPrijs;
}
</script>

I don't get an output on <div id="totaalPrijs">. What am I doing wrong?

I appreciate your help. Thanks in advance.

Answer 1

You forgot to put () at: onchange="calculateTotal()", so the function is never called. With that change, the total is shown when the user modify the "leeftijd" select box.

To compute total:

function getLunchPrice() {
    var lunchPrice=0;
    var theForm = document.forms["totaalBerekening"];
    var selectedLeeftijd = theForm.elements;
    for (var i=0; i < selectedLeeftijd.length; i++) {
        var field = selectedLeeftijd[i];
        if (field.name == "leeftijd[]") lunchPrice += leeftijdPrijs[field.value];
    }
    return lunchPrice;
}

Then add two calls to calculateTotal(): one in the addRow() function, another when the page is loaded, eventually nicer identifiers for the fields ;-)