javascript, html5 forms . why doesn't this work?

Question

I'm just beginning to learn javascript, so this is probably something very easy that I am overlooking.

<!DOCTYPE html>
<html>
<head>
<script>
    function calculatePayment()
    {
        //formula: M = P * ( J / (1 - (1 + J) ** -N))
        Monthlypayment.value=balance.value;

    }
</script>
</head>

<body>

<form onsubmit="return false" name="MortgageCalculator" oninput="calculatePayment()">
<fieldset>
    <legend>Loan Basics</legend>
    <div>
        <label for="balance">Beggining Balance: </label><input type="number" name="balance" min="10000" max="5000000" step="10000" size="7" value="150000" required>
    </div>
    <div>
        <label for="rate">Interest Rate (%): </label><input type="number" name="rate" min="0" max="99" step=".25" size="4" value="4.5" required>
    </div>
    <div>
        <label for="term">Term (months): </lable><input type="number" name="term" min="6" max="360" step="1" size="3" value="360" required>
    </div>
    <div>
        <input type="submit" value="Submit" onclick="calculatePayment()">
    </div>
</fieldset>

<div class="calculations">
    <label for="MonthlyPayment">Monthly Payment: </label><output name="MonthlyPayment" for="balance rate term" form="MortgageCalculator" onforminput="Monthlypayment.value=balance.value"></output>
</div>
</form>



</body>
</html>

It seems to go to the function correctly, but I can't actually change the output to display anything.

You should start by : <script type="text/javascript">. Also consider running the script when the document is ready. If using jQuery just change $(function(){}) — Daniel Conde Marin
– Daniel Conde Marin, Commented Nov 21, 2013 at 3:48
Are you sure Monthlypayment is not empty? Have you checked error console? — Passerby
– Passerby, Commented Nov 21, 2013 at 3:51
I believe that the .value of input fields in a form are as strings. You will have to use parseInt() to convert them to integers before performing calculations. — Mal
– Mal, Commented Nov 21, 2013 at 4:30

Mal · Accepted Answer · 2013-11-21 04:39:17Z

1

As you are new to javascript I would like to suggest another method of performing calculations.

This method will be more readable and more flexible. As it stands, if there is a change to your formula you will have to change it in multiple locations.

I suggest creating id's for each of your input fields.

In your javascript function I suggest creating variables with meaningful names. Finally you will need to use parseInt() as I believe that the value of input fields on a form are in string format.

JS Fiddle Example: http://jsfiddle.net/9Y9L3/

HTML:

<label>Value 1</label>
<input type="number" id="value1"></input>

<label>Value 2</label>
<input type="number" id="value2"></input> <br>  

<button type="button" onclick="doMaths();">Calculate</button><br>

<label>Result</label>
<input type="number" id="result"></input>

Javascript:

function doMaths() {
var val1 = document.getElementById("value1");
var val2 = document.getElementById("value2");
var result = document.getElementById("result");

result.value = parseInt(val1.value) + parseInt(val2.value);
}

answered Nov 21, 2013 at 4:39

Mal

5804 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

the1gofer Over a year ago

the calculations will be more complicated later, so I thought those names were good. I just started simple to see if it worked.. and it didn't. But thank you for your help!

Mal Over a year ago

@the1gofer No worries, at the end of the day there are multiple ways to do what you want. With calculations I prefer something that's easy to read. Glad it was of use to you

Ahsan Mahboob Shah · Accepted Answer · 2013-11-21 04:15:42Z

0

you can simply calculate in your form oninput as follows:

<form onsubmit="return false;" name="MortgageCalculator" oninput="MonthlyPayment.value = balance.value">

Remove the form tag from Output as it is already inside the Form:

<output name="MonthlyPayment" for="balance rate term">0</output>

You can also change your submit button as follows:

<input type="submit" value="Submit" onclick="MonthlyPayment.value = balance.value;">

Check the following reference for more details:

http://html5doctor.com/the-output-element/

answered Nov 21, 2013 at 4:15

Ahsan Mahboob Shah

4,0392 gold badges37 silver badges50 bronze badges

1 Comment

the1gofer Over a year ago

i simplified it in order to see if I could make it work before I started making real calculations. So in the end I really do need a function to work .

Community · Accepted Answer · 2017-05-23 12:15:16Z

0

try replacing

Monthlypayment.value=balance.value;

with

document.MortgageCalculator.Monthlypayment.value=document.MortgageCalculator.balance.value;

reference: http://www.ryerson.ca/JavaScript/lectures/forms/textinput.html

It would also be good to read up on scope in javascript:

https://stackoverflow.com/a/8423447/2896173

http://coding.smashingmagazine.com/2009/08/01/what-you-need-to-know-about-javascript-scope/

edited May 23, 2017 at 12:15

CommunityBot

11 silver badge

answered Nov 21, 2013 at 4:03

FunkyCodeMonkey

597 bronze badges

3 Comments

the1gofer Over a year ago

that didn't seem to change anything.

FunkyCodeMonkey Over a year ago

I added a couple edits. Ahsan's answer is good. But if you were wanting to do it from within the calculatePayment() function, you'll need to address the form elements by starting at the document object.

the1gofer Over a year ago

still doesn't seem to change anything ... see what I have here dropbox.com/s/iajjf9qirieu11a/index.html

Collectives™ on Stack Overflow

javascript, html5 forms . why doesn't this work?

3 Answers 3

2 Comments

1 Comment

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related