Using Javascript to calculate monthly payments on form

[John_Sieber]

I have a single page form where I would like to be able to allow the user to choose between making a one time payment or monthly payments for a user defined amount. I could easily break the form into two pages and calculate the value of the monthly payments and display it on the second page if the user selected the monthly payment option. What I would like is a single page where the monthly payment is determined on the fly when either the user selects the monthly payment radio button or when the user defined dollar amount is entered.

I think I have the function determined to do the calculation for the monthly payment but I'm unsure as to how to get cf to read or display the value. I was trying to use the following with no luck:

<input type=radio name=Installments value="Yes" tabindex=1 onClick="calculatemonthlypayment(document.forms[0].DonationAmount)">

<script type="text/javascript">
function calculatemonthlypayment(donation)
{
monthlypayment=(donation/12)
}
return monthlypayment
</script>

Then trying to output the result like this:

<cfoutput><input type="text" readonly="yes" value="#dollarformat(monthlypayment)#"></cfoutput>

Any idea what I'm doing wrong or missing? Or is there a much better way to accomplish this?

[Dan_Bracuk]

There are at least two things you are doing wrong. The first is using cfoutput to display the monthly payment. JS runs on the client. CF runs on the server. It won't work. You could write your javascript result to a disabled form field or something like that.

The second thing you are doing wrong is that you are not verifying that the Donation Amount is numeric, at least not that you showed us.

[cf_dev2 · Accepted solution]

> <cfoutput><input type="text" readonly="yes" value="#dollarformat(monthlypayment)#"></cfoutput>

You cannot do that. CF code is executed on the server (first). The resulting javascript (html, css, ...) code is then sent to the browser where it is executed. Since javascript code is executed in the client browser, after the CF code is already finished, the variable "monthlypayment" doesn't exist as far as CF is concerned.

You can use javascript to both read the donation text field amount and calculate the "monthlypayment" amount to display. Here is a simple example. You'll need to add validation and number formatting.

[John_Sieber]

Thanks to you both for the quick reply. I have the example above working and now just need to work it into my existing code. The responses are very helpful.