1

この問題にはおそらく非常に単純な解決策がありますが、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">。私は何を間違っていますか？

私はあなたの助けに感謝します。前もって感謝します。

4

1 に答える 1

1

()at:を入れるのを忘れた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;
}

次に、 への 2 つの呼び出しを追加しcalculateTotal()ます。1 つはaddRow()関数内、もう 1 つはページがロードされたとき、最終的にはフィールドのより適切な識別子 ;-)

于 2014-04-07T11:42:02.767 に答える