计算表单输入，其中一个由选择框修改

Question

I need to calculate based on user input on the form below. While using the jQuery Calculation Plug-in here: http://www.pengoworks.com/workshop/jquery/calculation/calculation.plugin.htm I was able to figure out how to do "How many sessions?" times "Number of Students" times "Cost Per Session" for the top two items. The one that is really stumping me is the bottom one where in addition to the user filling in number of sessions I need them to select the number of students from a select box as well. Any ideas?

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

The 2 student price would be $40 per student, 3 students = $35 per student, 4 students = $30 per student. Maybe I'm just not looking at this the right way but I can't seem to wrap my head around it.

In addition to doing the calculations I also need to make at it a requirement of form submission that at least one session in one of those types be selected (as well as all the information fields I'm using on the rest of the form). Can someone point me to a good example of how to accomplish that? Thanks.

---

UPDATE #1:

Here's what I have working so far: http://jsfiddle.net/jT9HE/2/

I just need to make it recalculate when the drop-down (select) box is changed.

---

UPDATE #2:

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

This makes changes to the drop down box update the price. Now how can I determine the price based on what is selected in the drop down box?

Answer 1

In my opinion this is a case where jQuery should complain. Anyway, actually a source of problems is the presence of multiple elements with the same value for the attribute id . This is a code excerpt showing the issue:

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

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

When you do this,

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

the resulting element is not what you would like but the first TD.

Hope this help for further investigation and code refactor.

-- UPDATE --

I fixed your code, please take a look here on jsFiddle and see if it works for you. If not let me know.

Basically I solved the issue of multiple id with the same value and added hidden fields in order to always have a number of students to multiply. Finally I attached an onchange event to the select box.

There is also a bit of logic for dynamic calculation of prices for Group tutoring.