Javascript Calculation and write back to a dynamic text box

Posted on 2013-10-18
Medium Priority
Last Modified: 2013-10-23
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

Question by:cj_ervin
  • 3

Expert Comment

ID: 39583228

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

Open in new window


Author Comment

ID: 39583250
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

Accepted Solution

cj_ervin earned 0 total points
ID: 39583444
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">

Expert Comment

ID: 39584860
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.

Author Closing Comment

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

Featured Post

Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

627 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question