Расчет итогов в реальном времени в динамической форме

Question

Эта проблема, вероятно, имеет очень простое решение, но, как новичок в Javascript, я не могу найти решение после того, как попробую разные возможности.

Таким образом, у меня есть форма, где люди могут забронировать билеты за 6 или 10 евро. Каждая строка - это человек. Пользователь может добавить до 5 человек.

Я хочу, чтобы пользователь увидел общую сумму, в зависимости от выбора билета и количества человек.

Вот что у меня есть:

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>

Я не получаю вывод на <div id="totaalPrijs">, Что я делаю неправильно?

Я ценю вашу помощь. Заранее спасибо.

Answer 1

Вы забыли поставить () в: onchange="calculateTotal()", так что функция никогда не вызывается. С этим изменением итоговое значение отображается, когда пользователь изменяет поле выбора "leeftijd".

Чтобы вычислить сумму:

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;
}

Затем добавьте два звонка calculateTotal(): один в addRow() функция, другая при загрузке страницы, в конечном итоге более приятные идентификаторы для полей;-)