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()"，因此永远不会调用该函数。通过该更改，当用户修改＆＃34; leeftijd＆＃34;选择框。

计算总数：

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()函数中，另一个在页面加载时，最终更好的字段标识符;-)

动态形式的总计实时计算

1 个答案: