CODEWITHSUNDEEP
javascripthtml
the1gofer
the1gofer

Reputation: 77

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

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.

Upvotes: 0

Views: 165

Answers (3)

FunkyCodeMonkey
FunkyCodeMonkey

Reputation: 59

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/

Upvotes: 0

Mal
Mal

Reputation: 580

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

Upvotes: 1

Ahsan Mahboob Shah
Ahsan Mahboob Shah

Reputation: 4029

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/

Upvotes: 0

Related Questions