动态计算小时总和


Dynamically Calculate Hour Sums

我试图找出如何计算基于下拉框中选择的类型的多个HTML输入字段的总和。基本上我有多个像这样的下拉框。

<select name="type1" id="type1">
    <option value="">Please Select</option>
    <option value="Sick">Sick</option>
    <option value="Vacation">Vacation</option>
    <option value="Holiday">Holiday</option>
    <option value="Floating Holiday">Floating Holiday</option>
    <option value="Jury Duty">Jury Duty</option>
    <option value="Bereavement">Bereavement</option>
    <option value="Suspension Paid">Suspension Paid</option>
    <option value="Suspension Unpaid">Suspension Unpaid</option>
</select>

然后我有多个输入,他们可以输入使用的PTO小时数。

<input name="hours1" type="text" id="hours1" size="4" maxlength="2" />

然后是每个类型的几个总字段。

Sick:<input name="totsick" type="text" id="totsick" size="4" maxlength="2" />
Vacation:<input name="totvac" type="text" id="totvac" size="4" maxlength="2" />

等。

我要做的是根据员工在PTO hours1字段中输入的内容和选择的类型动态计算total字段中的总和。

因此,如果用户选择Vacation,在总小时数字段中输入8,我要动态更新该类型的总字段。有多行输入,因此,如果员工在两个不同的日期选择休假两次,我希望total计算每次休假的总和,并将其作为16小时放在总休假时间中。

我试着做一个纯Javascript的例子:

function process() {
    var select = document.getElementById("type1");
    var value = select.options[select.selectedIndex].value;
    if (value == "Sick") {
        addTo("totsick");
    } else if (value == "Vacation") {
        addTo("totvac");
    }
}
function addTo(elId) {
    var element = document.getElementById(elId);
    var current = element.value;
    var add = document.getElementsByName("hours1")[0].value;
    alert(current+"/"+add);
    // + before for integer conversion
    element.value = +current + +add;
}
你可以看到我做的这个JSFiddle作为一个例子:JSFiddle