Выполнение расчетов по форме html

Question

Я довольно новичок в HTML & Javascript, и мне была назначена задача создать форму HTML для ресторана, которая позволяет пользователю вводить свою информацию для бронирования. Пока я создал форму для веб-сайта и проверил каждое поле ввода, чтобы обеспечить ввод правильной информации в необходимые поля. Однако мне также необходимо включить форму для расчета общей стоимости бронирования на основании 2-х деталей (количество людей в партии &, если клиент хочет пообедать в VIP-зоне).

Вот соответствующий 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 человек в своей партии, и они также хотели, чтобы сидеть в VIP-зоне, полная стоимость в нижней части страницы будет 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>