Question

我对HTML＆amp; Javascript和我被分配了一个任务来为餐馆创建一个HTML表单，允许用户输入他们的信息进行预订。

到目前为止，我已经为网站创建了表单并验证了每个输入字段，以确保将正确的信息输入到必要的字段中。

我还尝试在屏幕上计算总费用，以便用户在点击提交按钮之前可以查看他们的预订费用。但是，到目前为止我的代码似乎没有起作用，因为如果选择一个选项，总价格永远不会从0增加。

以下是相关的HTML代码：

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

以下是执行计算的相关javascript：

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

例如，如果客户选择他们的聚会中有6个人（+ 30英镑）并且他们也希望坐在VIP区域（+£5），则页面底部显示的总价格将是35英镑。如果有人对我的代码无法正常运行有任何建议，我将不胜感激。

谢谢。

Javascript＆amp; HTML页面计算

0 个答案: