asked on

Javascript Calculation and write back to a dynamic text box

I have a form that I need to do a calculation on and then write back to square footage to the Square Footage Text. The form may have 1 row of items, or it could have 12 different rows that the user can input.

Now the code below works fine, does everything that I want it to do and everything works in IE. Firefox has one issue. Everything works fine, but I can not get it to write back to the Square Footage Text Box.

So this is the line that is bombing in FireFox (works in IE):
document.getElementById(vtheSQFootageField).value = (eval("document.form." + vtheWidthField + ".value;") - 0) * (eval("document.form." + vtheLengthField + ".value;") - 0);

And this portion is what is not working in Firefox: document.getElementById(vtheSQFootageField).value

Below is the entire code:

<script type="text/javascript">
	<!--
	function CalcAreaSqFootage(theWidthField, theLengthField, theSQFootageField) {
		var vtheWidthField = theWidthField;
		var vtheLengthField = theLengthField;
		var vtheSQFootageField = theSQFootageField;

		// document.form.SQFootage_3.value = (eval("document.form." + vtheWidthField + ".value;") - 0) * (eval("document.form." + vtheLengthField + ".value;") - 0);
		document.getElementById(vtheSQFootageField).value = (eval("document.form." + vtheWidthField + ".value;") - 0) * (eval("document.form." + vtheLengthField + ".value;") - 0);
	}
	//-->
</script>

<body>
	<form name="form" >
		Enter a number:
		<input name="Width_1" onChange="CalcAreaSqFootage('Width_1', 'Length_2', 'SQFootage_3')" />
		and another number:
		<input name="Length_2" onChange="CalcAreaSqFootage('Width_1', 'Length_2', 'SQFootage_3')" />
		Their Sq Footage is:</th> <td><input name="SQFootage_3" value="0">
	</form>
</body>

Open in new window

dimmergeek

Try:

document.getElementById("vtheSQFootageField").value = (eval("document.form." + vtheWidthField + ".value;") - 0) * (eval("document.form." + vtheLengthField + ".value;") - 0);

Open in new window

cj_ervin

ASKER

Thanks for the reply, I tried that before and I did it again just now and that does not work in IE or Firefox. Thanks

ASKER CERTIFIED SOLUTION

cj_ervin

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Sar1973

What dimmergeek says is correct, since the document.getElementById statement needs brackets for its argument. But I think that you may have committed 2 other mistakes:
1. the document.form action seems not used properly (see http://www.w3schools.com/jsref/coll_doc_forms.asp)
2. the eval function should be used better only once (es. eval("....(complete code)....") and not twice or more that once, at my advice.

cj_ervin

ASKER

I figured out what the issue was. It was just a small issue, but once fixed, worked like a champ