Question

我搜索过，甚至用JQuery: Change value when value of other input field is changed这样的答案，我一直无法解决这个问题。

我正在尝试根据HTML表单输入进行一些数学运算。当用户在第一个和第二个字段中输入数字时，我希望它自动计算到第三个字段以显示总数。

我的表单代码是：

<div id="makingARecurringGift">
    Enter Recurring Gift Amount: $<input type="number" min="0" name="recurringDonationValue" id="recurringDonationValue" size="15" value="0" /><br />
    I would like to make this gift for <input type="number" min="0" max="60" name="numberOfMonths" id="numberOfMonths" size="15" value="0" /> months.<br />
    Total Gift Amount of $<input type="number" min="0" value="0" name="totalRecurringDonationValue" />.
</div>

我想尝试运行的javascript是：

function replaceRecurringDonationValue() {
    //make our variables so we don't forget
    var perDonationValue = 0;
    var numberOfMonths = 0;
    var TotalRecurringDonationValue = 0;

    //give them their correct values
    perDonationValue = $("#recurringDonationValue").val();
    numberOfMonths = $("#numberOfMonths").val();

    //ensure that the maximum number of months is enforced.
    if(numberOfMonths > 60) {
        alert("Donations can last for a maximum of 60 months.");
        $("#numberOfMonths").val(60);
    }

    TotalRecurringDonationValue = perDonationValue * numberOfMonths;

    $("#TotalRecurringDonationValue").val(TotalRecurringDonationValue);
}
$("#recurringDonationValue").change(replaceRecurringDonationValue());
$("#numberOfMonths").change(replaceRecurringDonationValue());

如果您想查看完整的主页源代码： http://pastebin.com/aLMqYuxc 和完整的JavaScript源是： http://pastebin.com/FvviPHhj

对不起，如果这是一个愚蠢的问题，谢谢大家的帮助。我还在努力解决这个问题。

Answer 1

尝试改变这一点：

$("#recurringDonationValue").change(replaceRecurringDonationValue());

到此：

  $("#recurringDonationValue").change(function(){
                                          replaceRecurringDonationValue();
                                       });

和此：

$("#numberOfMonths").change(replaceRecurringDonationValue());

到此：

$("#numberOfMonths").change(function(){
                               replaceRecurringDonationValue()
                               });

安德斯的好评，

更好的结合两个选择器，例如

 $("#recurringDonationValue, #numberOfMonths").change(function(){
                                              replaceRecurringDonationValue();
                                           });

少代码保持干燥（不要重复自己）：）

Answer 2

三件事......

改变这个：

Total Gift Amount of $<input type="number" min="0" value="0" name="totalRecurringDonationValue" />.

对此：

Total Gift Amount of $<input type="number" min="0" value="0" id="totalRecurringDonationValue" />.

改变这个：

$("#TotalRecurringDonationValue").val(TotalRecurringDonationValue);

对此：

$("#totalRecurringDonationValue").val(TotalRecurringDonationValue);

最后，改变这个：

$("#recurringDonationValue").change(replaceRecurringDonationValue());
$("#numberOfMonths").change(replaceRecurringDonationValue());

对此：

$("#recurringDonationValue,#numberOfMonths").change(replaceRecurringDonationValue);

当另一个字段值发生更改时，如何使用jQuery更改字段

2 个答案: