在html表格上執行計算

Question

我對HTML的相當新穎01​​我和Javascript已被分配一個任務來爲餐廳創建HTML表單，該表單允許用戶輸入其預訂信息。到目前爲止，我已經爲網站創建了表單並驗證了每個輸入字段，以確保將正確的信息輸入到必要的字段中。不過，我還需要啓用此表單，以根據2個詳細信息計算預訂的總價格（如果客戶想要在貴賓區用餐，則參加派對的人數爲&）。

這是迄今有關HTML代碼：

...  

<strong>Select Party Size:</strong> 
<br> 
<select name="party" id="party" onblur="validateSelect(name)"> 
<option value="">Please Select</option> 
<option value="1">1 Person (£5)</option> 
<option value="2">2 People (£10)</option> 
<option value="3">3 People (£15)</option> 
<option value="4">4 People (£20)</option> 
<option value="5">5 People (£25)</option> 
<option value="6">6 People (£30)</option> 
<option value="7">7 People (£35)</option> 
<option value="8">8 People (£40)</option> 
<option value="9">9 People (£45)</option> 
<option value="10+">10+ People (£50)</option> 
</select> 

... 

<strong> VIP Area? </strong> 
<br> 
Yes (+£5) <input type="radio" name="hand" id="left" value="Yes"onblur="validateRadio(id)"/> 
No <input type="radio" name="hand" id="right" value="No" onblur="validateRadio(id)"/> 
<span class="validateError" id="handError" style="display: none;">Please specify whether you would like a table in the VIP area.</span> 

... 

<strong> Total booking cost based on party size & VIP selection: </strong> 

例如，如果客戶選擇，有6人在他們的黨，他們也希望在貴賓區就座，總價顯示在頁面底部將是35英鎊。我知道這可以在JavaScript中執行，所以如果有人能告訴我如何做到這一點，我將非常感激。謝謝！

Answer 1

試試這個

$(document).ready(function(){ 
 
    $(document).on('change', '#party', function(e) { 
 
     $('#price').html(parseInt($(this).val()) + parseInt($('input[name="hand"]:checked').val())); 
 
    }); 
 
    
 
    $(document).on('click', 'input[name="hand"]', function(e) { 
 
     $('#price').html(parseInt($('#party').val()) + parseInt($(this).val())); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<strong>Select Party Size:</strong> 
 
<br> 
 
<select name="party" id="party" onblur="validateSelect(name)"> 
 
<option value="">Please Select</option> 
 
<option value="5">1 Person (£5)</option> 
 
<option value="10">2 People (£10)</option> 
 
<option value="15">3 People (£15)</option> 
 
<option value="20">4 People (£20)</option> 
 
<option value="25">5 People (£25)</option> 
 
<option value="30">6 People (£30)</option> 
 
<option value="35">7 People (£35)</option> 
 
<option value="40">8 People (£40)</option> 
 
<option value="45">9 People (£45)</option> 
 
<option value="50">10+ People (£50)</option> 
 
</select> 
 

 
<strong> VIP Area? </strong> 
 
<br> 
 
Yes (+£5) <input name="hand" id="left" value="5" onblur="validateRadio(id)" type="radio"> 
 
No <input name="hand" id="right" value="0" onblur="validateRadio(id)" checked="" type="radio"> 
 
<span class="validateError" id="handError" style="display: none;">Please specify whether you would like a table in the VIP area.</span> 
 

 
    <strong> Total booking cost based on party size <span id="price">0</span> VIP selection: </strong>