Question

我有一个现有的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

Here这是一个有效的例子。

我刚为最后两个输入添加了第二个函数。此外，我已经更改了这些输入的初始值，并且使用了placeholder属性，该属性效果更好，并且打算使用您在键入时不必擦除的标签。

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

Answer 2

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

您的代码中存在一些错误。

对于初学者，您没有将控件$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缺少value的{{1}}属性。 select id中有一个包含食物价值的错字（它是 pledgefood＆gt; ）：

<span>

新jsfiddle。

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

2 个答案: