向现有 jQuery 'On Input'添加第二个函数以更新元素值

Question

i具有现有的jQuery函数，该函数在填写时计算两个输入字段的乘积（在提交表单之前）。

我需要扩展此功能或以其他方式添加的帮助，以便每次进行当前计算时，它还使用页面上其他输入字段的内容更新某些元素值。

jQuery(document).ready(function($) {
    var $total = $('#total'),
        $value = $('.value');
    $value.on('input', function(e) {
        var total = 1;
        $value.each(function(index, elem) {
            if(!Number.isNaN(parseFloat(this.value)))
                total = total * parseFloat(this.value);
        });
        $total.val(total);
    });
});

最终要求是填充表格的人会看到总计（两个字段的乘积）在输入时会发生变化，并且他们还会看到其表格中的信息填充条款和条件声明。

这是我表格的简化版本。

<input type="text" size="5" id="value1" name="value1" class="value" />
<input type="text" size="5" id="value2" name="value2" class="value" />
<input type="text" size="5" id="total" readonly="readonly" class="bckground" name="total" />
<h5>First</h5>
<input type="text" name="firstname" value="Enter First Name" size="20" />
<h5>Last</h5>
<input type="text" name="lastname" value="Enter Last Name" size="20" />
<br><br>
I <span id="pledgefirstname">--</span> <span id="pledgelastname">--</span> pledge to donate...

请注意，这两个功能实际上与彼此无关，而不是动态更新信息的事实，以便用户可以看到他们实时填写的结果。

jsfiddle

所需的结果I Joe Bloggs pledge to donate...在用户填写其名称时动态填充。

Answer 1

我为最后一部分添加了另一个答案。

您的代码中有一些错误。

对于初学者，您没有将控件$food添加到附加事件侦听器的jQuery对象：

jQuery(document).ready(function($) {
    var $total = $('#total'),
        $value = $('.value');
        $firstName = $('#firstname');
        $lastName = $('#lastname');
        $food = $('#food');
    $value.add($firstName).add($lastName).add($food).on('change input', function(e) {
        var total = 1;
        $value.each(function(index, elem) {
            if(!Number.isNaN(parseFloat(this.value)))
                total = total * parseFloat(this.value);
        });
        $total.val(total);
        $('#pledgefirstname').text($firstName.val());
        $('#pledgelastname').text($lastName.val());
        $('#pledgefood').text($food.val());
    });
});

此外，您的HTML缺少select的value属性。<span>的id中有一个错字，其中包含食物价值（它是 predgefood> ）：

<h4>Shopping</h4>
<select type="text" id="food" name="food" >
  <option value="Milk">Milk</option>
  <option value="Coffee">Coffee</option>
  <option value="Tea">Tea</option>
</select>
<br><br>
I <span id="pledgefirstname">--</span> <span id="pledgelastname">--</span> pledge to donate <span id="pledgefood">--</span>.

新的JSfiddle。

Answer 2

这是一个工作示例。

我刚刚为两个输入添加了第二个功能。此外，我更改了使用placeholder属性的这些输入和ISTEAD的初始值，该属性效果更好，旨在使用它在输入时不必删除的标签。

jQuery(document).ready(function($) {
    var $total = $('#total'),
        $value = $('.value');
        $firstName = $('#firstname');
        $lastName = $('#lastname');
    $value.add($firstName).add($lastName).on('input', function(e) {
        var total = 1;
        $value.each(function(index, elem) {
            if(!Number.isNaN(parseFloat(this.value)))
                total = total * parseFloat(this.value);
        });
        $total.val(total);
        $('#pledgefirstname').text($firstName.val());
        $('#pledgelastname').text($lastName.val());
    });
});