1

私は検索し、JQuery：他の入力フィールドの値が変更されたときに値を変更するなどの回答があっても、これを理解することができませんでした。

HTMLフォーム入力に基づいて数学を実行しようとしています。ユーザーが1番目と2番目のフィールドに数値を入力すると、3番目のフィールドに自動的に計算されて合計が表示されるようにします。

私のフォームコードは次のとおりです。

<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

これがばかげた質問であるならば申し訳ありません、あなたの援助にすべてに感謝します。私はまだこれを理解しようとしています。

4

2 に答える 2

1

これを変更してみてください：

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

これに：

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

この：

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

これに：

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

アンダースによる良い叫び、

さらに良い2つのセレクターを組み合わせます。

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

より少ないコードはそれを乾いた状態に保ちます（あなた自身を繰り返さないでください）:)

于 2012-12-07T16:06:32.300 に答える
1

三つのこと...

これを変える：

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);
于 2012-12-07T16:09:11.833 に答える