html 양식에 대한 계산 수행

Question

나는 HTML & 자바에 상당히 익숙하며 사용자가 예약 정보를 입력 할 수있는 레스토랑의 HTML 양식을 작성하는 작업이 지정되었습니다. 지금까지 필자는 웹 사이트의 양식을 작성하고 필요한 정보를 입력하기 위해 각 입력란의 유효성을 검증했습니다. 그러나 2 가지 세부 정보 (고객이 VIP 구역에서 식사를 원할 경우 &에있는 사람 수)를 기반으로 예약에 대한 총 가격을 계산할 수 있도록 양식을 활성화해야합니다.

예를 들어

...  

<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 영역에 장착 될하고자하는 경우, 총 가격 :

는 지금까지 관련 HTML 코드입니다 페이지 하단에 £ 35가 표시됩니다. 나는 이것이 자바 스크립트에서 수행 될 수 있음을 이해하므로 누군가 어떻게 이것이 수행 될 수 있는지를 보여줄 수 있다면 매우 고맙게 여길 것이다. 고맙습니다!

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>