Javascript Form Help

[hosker]

Here is my code for a simple form. I want to use javascript to handle the functionality. I know that my formula is correct, but for the live of me I cannot get the data from the form onSubmit/OnClick/etc... Any help would be appreciated, I am still fairly new to javascript. Thanks in advance for your help.

<form  method="post" name="calculator" action="" >
			<fieldset>
    			<legend>Loan Calculator</legend>
    				<p><label for="amount">Loan Amount</label><input type="text" name="amount" id="amount" value=""></p>
    				<p><label for="interest">Interest</label><input type="text" name="interest" id="interest" value=""></p>
    				<p><label for="months">Number of Months</label><input type="text" name="months" id="months" value=""></p>
    				<p><input type="submit" value="submit" name="submit" id="submit" onclick="calculator();" /></p>
    		</fieldset>
		
			<script type="text/javascript">
		
		function calculator() {
			var interest;
			var months;
			var principal;
			var payment;
			var rate;
			
			amount = document.calculator.amount.value;
			interest = document.calculator.interest.value;
			months = document.calculator.months.value;
			
			
			rate = interest/1200;
			rate = Math.round((rate)*10000000)/10000000;
			
			payment = (rate + (rate/((Math.pow(1+rate,months)) - 1 ))) * principal;
			
			payment = Math.round(payment*100)/100;
			
			return document.write(payment);
		};
		
		
		
			</script>
		
		</form>

[devnull69]

If you click a submit button, the associated form will be submitted. This is the default behaviour of the click event. The same applies to onsubmit for the form itself.

To prevent the default behaviour you will have to take measures like "return false" from the event handler.

<input type="submit" value="submit" name="submit" id="submit" onclick="calculator(); return false;" />

On top of this you should not return a value from the calculator function. So just remove the "return" from document.write in the last statement

[Philip M]

As you are not actually submitting a form (to a server) you should use <input type = "button" instead of "submit".

document.write() is obsolete - use DOM methods such as innerHTML to display the result of the calculation in a <span>

document.getElementById("result").innerHTML = payment.toFixed(2);  // display 2 decimal places

It would also be a good idea to verify that the values entered by the users are numbers.

Your variable principal is defined by has no value (you call it amount elsewhere).

Assigning a name to a form is now deprecated - prefer to use id instead. You can still refer to the form by document.forms[0] if you wish.

Finaly, it is a bad idea to use the same name (amount, interest, months) for a Javascript variable and an HTML element.


All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.