How do I use jQuery to change a field when another

Question

I searched and even with answers like JQuery: Change value when value of other input field is changed, I have been unable to figure this out.

I am trying to do some math based on HTML form input. When the user enters numbers in the first and second field, I want it to automatically calculate into the third field to show the total.

My form code is:

<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>

My javascript that I am trying to run is:

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

If you would like to view the full main page source code: http://pastebin.com/aLMqYuxc and full javascript source is: http://pastebin.com/FvviPHhj

Sorry if this is a dumb question, thank you all for your assistance. I'm still trying to figure this out.

Answer 1

Three things...

Change this:

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

To this:

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

Change this:

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

To this:

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

And lastly, change this:

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

To this:

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

Answer 2

try changing this:

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

to this:

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

and this:

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

to this:

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

Good shout by Anders,

Even better Combine the two selectors e.g.

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

Less Code keep it DRY (Don't Repeat Yourself) :)