Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Oct 2012
    Posts
    7
    Thanks
    0
    Thanked 1 Time in 1 Post

    Exclamation Javascript Form Help

    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.

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

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    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.
    Code:
    <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

  • #3
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,017
    Thanks
    203
    Thanked 2,538 Times in 2,516 Posts
    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>

    Code:
    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.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •