innerHTML element to appear in textfield

JavaScript
1

Hi guys,

I am trying to create a calculator for one of my forms.
I am having trouble getting the calculated figure to appear inside a textfield though (probably extremely simple for you geniuses).

<script language="javascript">
function total()
{

num1=parseFloat(document.form1.estimated_value.value);
num2=parseFloat(document.form1.mortgage_amount.value);
num3=parseFloat(document.form1.secured_loans.value);
num4=num1-num2-num3;
if(isNaN(num4))
{
num4="";
}
document.getElementById("total").innerHTML=num4;
}
</script>

The result will appear between div tags for example:

<div id=“total”></div>

But if I give my textfield the id “total” instead the script doesn’t append the result here. What am I missing, any help would be greatly received! Thanks!

2

Hi,

It must be something wrong the with html you didn’t post:
This seems to work ok.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>untitled</title>
<script type="text/javascript">
function total() {
	var value = parseFloat(document.getElementById('estimated_value').value);
	value -= parseFloat(document.getElementById('mortgage_amount').value);
	value -= parseFloat(document.getElementById('secured_loans').value);

	if(isNaN(value)) {
		value = "";
	}
	document.getElementById("total").innerHTML=value;
}
</script>
</head>

<body>
<form id="form1" name="form1">
	<div>
		<label for="estimated_value">estimated_value</label>
		<input type="text" name="estimated_value" id="estimated_value" />
	</div>
	<div>
		<label for="mortgage_amount">mortgage_amount</label>
		<input type="text" name="mortgage_amount" id="mortgage_amount" />
	</div>
	<div>
		<label for="secured_loans">secured_loans</label>
		<input type="text" name="secured_loans" id="secured_loans" />
	</div>
	<p><a href="calc.php" onclick="total(); return false;">Calculate total</a></p>
</form>
<p>Total: <strong id="total"></strong></p>
</body>
</html>

Edit: I’m with you now…

innerHTML won’t work on an input - you need to set the value attribute. e.g.
document.getElementById(“total”).value=value;

3

Mark thank you very much for your reply.

I’m afraid I’m still not with you on how to get the result in a textfield. Would you mind explaining a little further (sorry!)

4 
document.getElementById("total").innerHTML=num4;

Instead of using innerHTML for the textarea, a textarea is a form control which means it has a value… and for textarea’s it’s:
<textarea id=“total”>this is textarea.value</textarea>

So Mark said, use “value” instead:
document.getElementById(“total”).value = num4;

5

Thanks Stomme for helping out…

Is this along the right lines:

Javascript:

<script language="javascript">
function total()
{

num1=parseFloat(document.form1.estimated_value.value);
num2=parseFloat(document.form1.mortgage_amount.value);
num3=parseFloat(document.form1.secured_loans.value);
num4=num1-num2-num3;
if(isNaN(num4))
{
num4="";
}
document.getElementById("total").equity = num4;
}
</script>

HTML:

<form id="form1" name="form1" method="post" action="">
<input name="estimated_value" type="text" id="estimated_value"  onchange="total();"/>
 <input name="mortgage_amount" type="text" id="mortgage_amount"  onchange="total();"/>
<input name="secured_loans" type="text" id="secured_loans" onblur="total();"  onchange="total();" />
<input name="Equity" type="text" id="total" value="equity"/>
</form>

As I still can’t get the calculation to enter into the final textfield. Am I being really dumb? :frowning:

6

Hi Jasper,

(lawlz sorry the real answer’s at the bottom if you’re in a hurry!)

lemme start out by saying, ignore the goofy badge under my name. I’m a JS newb. But I can take some not-so-wild guesses and I can give you something that’s good advice.

First, language=javascript is deprecated… that doesn’t mean it doesn’t work, it just means everyone decided to stop doing it back when grunge bands were all the rage. Your scripts tags should be <script type=“text/javascript”>

(no it doesn’t affect your script running)

Second, since I’m going on about somewhat unimportant things, your form needs a block child to be valid. The inputs are inline and forms can’t have those as direct children. Wrapping a div around the inputs (or ideally a fieldset) would make the form valid: <form><div><input/><input/><input/><input/></div></form>

(no it also doesn’t affect your script running)

Third, you’re calling your function at each input. The whole function. Not just the assignments you want. And twice on the third input. That can’t be right… the whole function is probably puking every time (I’m not sure) because it can’t finish until it’s got all those variables…
instead you should be able to call the thing just once, I’d say with the onblur on the last input. The variables will get assigned at that point.

num4=num1-num2-num3;
When real humans start filling this stuff in you may want some checking in there to make sure num1 really is bigger than num2 or num3. Right now you’re assuming people will be smart. Never assume that. If the above equation gives you -44.35, that’s a number, so the check for NaN won’t catch anything there.

if(isNaN(num4))
{
num4=“maybe put some test text here for now… or let people know their inputs were somehow invalid”;
}

…and
document.getElementById(“total”).equity = num4;
The current value of the input, before the function runs, is “equity”.

you meant:
document.getElememtById(“total”).value = num4;

so, when we said “value” we didn’t mean your current value. We meant the property called “value” of the form control.