0
   

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

 
 
Reply Thu 9 Jul, 2009 11:12 am
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: 15,774 • Replies: 5
No top replies

 
Robert Gentel
 
  2  
Reply Thu 9 Jul, 2009 12:17 pm
@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>
kernowcoder
 
  1  
Reply Thu 9 Jul, 2009 04:11 pm
@Robert Gentel,
hi
thanks for the code but i do need them added together.
thanks in advance
Karl
Robert Gentel
 
  2  
Reply Thu 9 Jul, 2009 06:18 pm
@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>
mreude
 
  1  
Reply Mon 10 Jun, 2013 11:26 am
@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>
mreude
 
  1  
Reply Mon 10 Jun, 2013 10:05 pm
@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
 
 

Related Topics

 
  1. Forums
  2. » using onchange to a function ot change a form text box value
Copyright © 2019 MadLab, LLC :: Terms of Service :: Privacy Policy :: Page generated in 0.03 seconds on 07/18/2019 at 11:07:33