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

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

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 to this Topic

Type: Question • Score: 0 • Views: 17,005 • Replies: 5

No top replies

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

1 Reply

@Robert Gentel,

Hi, I was following the information on this page for using the onchange() and parseInt. And I was able to get the code to work as it is displayed on this page. But I had some additional issues and when I tried to refine the code somewhat I seem to have broken it. However, I can't seem to figure out where. Any help would be appreciated.

Code:



<html>

	<head>

		<title>Time Difference</title>

	</head>

<script>

	function myFunction()

	{

		outS45 = document.incidentForm.outS45.value;

		inS45 = document.incidentForm.inS45.value;

		outhhmm = outS45.split(":");

		outhh = parsInt(outhhmm[0], 10);

		outmm = parsInt(outhhmm[1], 10);

		inhhmm = inS45.split(":");

		inhh = parsInt(inhhmm[0], 10);

		inmm = parsInt(inhhmm[1], 10);

		if (outhh < inhh) 

			{

				tothhmm[0] = inhh - outhh + 24;

			}

		else

			{

				tothhmm[0] = inhh - outhh;

			}

		if (outmm < inmm)

			{

				tothhmm[1] = inmm - outmm + 60;

			}

		else

			{

				tothhmm[1] = inmm - outmm;

			}

		tothhmm = tothhmm.join(":");

		document.incidentForm.totS45.value = tothhmm;

	}

</script>

<body>

	<form name="incidentForm">

		<input size="10" type="text" id="outS45" name="outS45" value="" placeholder="hh:mm" onChange="myFunction()" />

		<input size="10" type="text" id="inS45" name="inS45" value="" placeholder="hh:mm" onChange="myFunction()" />

		<input size="10" type="text" id="totS45" name="totS45" value="" placeholder="hh:mm" readonly onChange="myFunction()" />

	</form>

</body>

</html>

1 Reply

@mreude,

Ok, updated it again... still doesn't work, but there are notes now! Smile

Code:



<html>

	<head>

		<title>Time Difference</title>

	</head>

<script>

	function myFunction()

	{

		// get information from form

		outhhmm = parseInt(document.incidentForm.outS45.value, 10);

		inhhmm = parseInt(document.incidentForm.inS45.value, 10);

		// split variable into two numbers

		outhhmm = outhhmm.split(":");

		outhh = outhhmm[0];

		outmm = outhhmm[1];

		// split variable into two numbers

		inhhmm = inhhmm.split(":");

		inhh = inhhmm[0];

		inmm = inhhmm[1];

		// do the math. if time in is less than time out then add 24

		if (outhh < inhh) 

			{

				tothhmm[0] = inhh - outhh + 24;

			}

		else

			{

				tothhmm[0] = inhh - outhh;

			}

		// if the time in is less than time out then add 60

		if (outmm < inmm)

			{

				tothhmm[1] = inmm - outmm + 60;

			}

		else

			{

				tothhmm[1] = inmm - outmm;

			}

		// join the array with " : "

		tothhmm = tothhmm.join(":");

		// send the result to the input with the name/id totS45

		document.incidentForm.totS45.value = tothhmm;

	}

</script>

<body>

	<form name="incidentForm"> <!- Get information from form to send to script ->

		<input size="10" type="text" id="outS45" name="outS45" 

			value="00:00" placeholder="hh:mm" onchange="myFunction()" />

		<input size="10" type="text" id="inS45" name="inS45" 

			value="00:00" placeholder="hh:mm" onchange="myFunction()" />

		<input size="10" type="text" id="totS45" name="totS45" 

			value="" placeholder="hh:mm" readonly onchange="myFunction()" />

	</form>

</body>

</html>

0 Replies

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

Related Topics

Quick Links

My Account

able2know