Question

我需要根据下面表单上的用户输入进行计算。在这里使用jQuery Calculation Plug-in：http://www.pengoworks.com/workshop/jquery/calculation/calculation.plugin.htm我能够弄清楚如何做“多少个会话？”时间“学生人数”乘以前两个项目的“每次会话费用”。真正困扰我的那个是最底层的，除了用户填写会话数量之外，我还需要他们从选择框中选择学生人数。有什么想法吗？

<table>
<tr><th>How many sessions?</th><th>Number of Students</th><th>Type of tutoring</th><th>Cost Per Session</th><th>Total Cost</th></tr>
<tr><td><input type="text" name="qty_academic" size="3" /></td><td id="num_students">1 Student</td><td>Academic Tutoring</td><td id="price_item_1">$55.00</td><td id="total_item_1">$0.00</td></tr>
<tr><td><input type="text" name="qty_multi" size="3" /></td><td id="num_students">1 Student</td><td>ML Tutoring</td><td id="price_item_2">$60.00</td><td id="total_item_2">$0.00</td></tr>
<tr><td><input type="text" name="qty_group" size="3" /></td><td><select name="group_size" id="num_students">
    <option value=""></option>
    <option value="2">2 Students</option>
    <option value="3">3 Students</option>
    <option value="4">4 Students</option>
    </select></td><td>Group Tutoring</td><td id="price_item_3"></td><td id="total_item_3">$0.00</td></tr>
<tr><td>&nbsp;</td><td>&nbsp;</td><td colspan="2" align="right"><h3>Grand Total:</h3></td><td id="grandTotal"></td></tr>

2名学生的价格为每名学生40美元，3名学生=每名学生35美元，4名学生=每名学生30美元。也许我只是没有以正确的方式看待这一点，但我似乎无法绕过它。

除了进行计算之外，我还需要在表单提交时要求至少选择其中一种类型的会话（以及我在其余部分使用的所有信息字段）形成）。有人能指出我如何实现这一目标的一个很好的例子吗？感谢。

更新＃1：

这是我到目前为止所做的工作：http://jsfiddle.net/jT9HE/2/

我只需要在下拉（选择）框更改时重新计算。

更新＃2：

        $("select[name^=group_size]").bind("change", recalc);
        // run the calculation function now
        recalc();

这会使对下拉框的更改更新价格。现在，我如何根据下拉框中选择的内容确定价格？

Answer 1

在我看来，这是一个jQuery应该抱怨的情况。无论如何，实际上问题的根源是存在具有相同属性id的多个元素。这是一个显示问题的代码摘录：

<td id="num_students">1 Student</td>
<td id="num_students">1 Student</td>

<select name="group_size" id="num_students">

当你这样做时，

students: $("[id^=num_students]")

结果元素不是你想要的，而是第一个TD。

希望这有助于进一步调查和代码重构。

- 更新 -

我已修复您的代码，请查看here on jsFiddle，看看它是否适合您。如果不让我知道。

基本上我解决了具有相同值的多个id的问题，并添加了隐藏字段，以便总是让多个学生成倍增加。最后，我将onchange事件附加到选择框。

集体辅导的价格动态计算也有一些逻辑。

计算表单输入，由选择框修改

1 个答案: