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.

Are you sure `Monthlypayment` is not empty? Have you checked error console? — Passerby, Nov 21 '13 at 03: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, Nov 21 '13 at 04:30

score 1 · Accepted Answer · answered Nov 21 '13 at 04:39

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

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! — the1gofer, Nov 22 '13 at 05:01
@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 — Mal, Nov 22 '13 at 06:17

score 0 · Answer 2 · edited May 23 '17 at 12:15

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 '17 at 12:15

Community

1
1

answered Nov 21 '13 at 04:03

FunkyCodeMonkey

59
7

that didn't seem to change anything. – the1gofer Nov 21 '13 at 04:14
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. – FunkyCodeMonkey Nov 21 '13 at 04:23
still doesn't seem to change anything ... see what I have here https://www.dropbox.com/s/iajjf9qirieu11a/index.html – the1gofer Nov 24 '13 at 03:49

score 0 · Answer 3 · answered Nov 21 '13 at 04:15

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/

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 . — the1gofer, Nov 22 '13 at 05:23

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

3 Answers3