using onchange to a function ot change a form text box value

Tags: Javascript, Web Development, Forms, Onchange
Email this Topic • Print this Page

Read Question
Reply to All

hi
I am trying to change a value on a form when other values are entered on the form
here is the JS
function calcheight(){
top=frm.topgap.value;
middle=frm.windowheight.value;
bottom=frm.bottomgap.value;
newheight=top+middle+bottom;
document.main.outsideheight.value=newheight;
}
I cannot seem to get the values to move to the JS
I have tried calcheight(topgap,windowheight,bottomgap) as these are the text box values I need to use when I call the onchange from the form
can anyone help
thanks in advance
Karl

Topic Stats
Top Replies
Link/Embed

Type: Question • Score: 0 • Views: 750 • Replies: 3

@kernowcoder,

Here is working code, but note that it is concatenating the variables, not adding them. If you need it to add them let me know.

Code:

<html>

	<head>

		<script>

			function calculate(){

				top = document.theForm.top.value;

				middle = document.theForm.middle.value;

				bottom = document.theForm.bottom.value;

				total = top+middle+bottom;

				document.theForm.result.value = total;



			}

		</script>

	</head>

	<body>

		<form name="theForm">

			Top: <input type="text" name="top" value="0" onchange="calculate()" /><br />

			Middle: <input type="text" name="middle" value="0" onchange="calculate()" /><br />

			Bottom: <input type="text" name="bottom" value="0" onchange="calculate()" /><br />

			Result: <input type="text" name="result" value="0" onchange="calculate()" /><br />

		</form>	

	</body>

</html>

1 Reply

@Robert Gentel,

hi
thanks for the code but i do need them added together.
thanks in advance
Karl

1 Reply

@kernowcoder,

Ok, here's the code for addition instead of concatenation. The only difference is that the variables each call parseInt. Another way to do it would be to multiply the variables by 1 to force them to cast as numbers.

Code:

<html>

	<head>

		<script>

			function calculate(){

			top = parseInt(document.theForm.top.value, 10);

			middle = parseInt(document.theForm.middle.value, 10);

			bottom = parseInt(document.theForm.bottom.value, 10);

			total = top+middle+bottom;

			document.theForm.result.value = total;

			}

		</script>

	</head>

	<body>

		<form name="theForm">

			Top: <input type="text" name="top" value="0" onchange="calculate()" /><br />

			Middle: <input type="text" name="middle" value="0" onchange="calculate()" /><br />

			Bottom: <input type="text" name="bottom" value="0" onchange="calculate()" /><br />

			Result: <input type="text" name="result" value="0" onchange="calculate()" /><br />

		</form>

	</body>

</html>

0 Replies

Read Question
Reply to All

using onchange to a function ot change a form text box value

Related Topics