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

	<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">

Open in new window

Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.


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

Open in new window

cj_ervinAuthor Commented:
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
cj_ervinAuthor Commented:
I figured it out, the Javascript I posted above was correct, it was the HTML. Firefox needed the ID in the form field.

So I changed this line to <input name="SQFootage_3" ID="SQFootage_3"value="0">

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
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
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_ervinAuthor Commented:
I figured out what the issue was. It was just a small issue, but once fixed, worked like a champ
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.