Question

我对HTML＆amp; 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

试试这个

＆＃13;

$(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()));
    });
});

＆＃13;

<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>

＆＃13;

在html表单上执行计算

1 个答案: