Yahoo Answers is shutting down on May 4th, 2021 (Eastern Time) and beginning April 20th, 2021 (Eastern Time) the Yahoo Answers website will be in read-only mode. There will be no changes to other Yahoo properties or services, or your Yahoo account. You can find more information about the Yahoo Answers shutdown and how to download your data on this help page.
Trending News
JavaScript AutoCalc recommendation?
I am looking for recommendations for displaying the results of a calculation for a set of input fields that reflect a set of Age Bands. The user enters a From Age and the calculation should show to the To Age. The bands are contiguous ages up to age 99. The user does not have to enter values in all of the input fields.
There should be a column of textboxes for user entry. Lets say 5 for this exercise.
Next to each textbox there should be a display only field to display the calculated result.
The calculation and result should happen on an OnBlur event of the textbox.
Example:
User enters 0 in the first textbox and the To Age should show 99
User enters 25 in the next textbox and the 99 changes to 24 and 99 shows next to the 25
User enters 30 in the next textbox and the 99 changes to 29 and 99 shows next to the 30.
2 Answers
- ArmchairPilotLv 61 decade agoFavorite Answer
Here's a solution that does what you ask.
It doesn't include any error checking, for exampe, if a later age is less than an earlier age
<script type="text/javascript">
function adjustValue(n) {
var m = parseInt(document.formAge.elements[n].value);
var i = ((n%2) == 0) ? -1: 1;
document.formAge
.elements[n+i].value = m + i;"
}
</script>
</head>
<body>
<form name=formAge>
<input type="text" value=0 />
<input type="text" value=99 onblur="adjustValue(1);"/><b r />
<input type="text" onblur="adjustValue(2);"/>
<input type="text" onblur="adjustValue(3);"/><b r />
<input type="text" onblur="adjustValue(4);"/>
<input type="text" onblur="adjustValue(5);"/>"<b r />
<input type="text" onblur="adjustValue(6);"/>
<input type="text" onblur="adjustValue(7);"/><b r />
<input type="text" onblur="adjustValue(8);"/>
<input type="text" value=99 /><b r />
</form>
</body>
The single function makes use of the array method of accessing the input text boxes, so if you use this, be sure to *not* include any text boxes before them, or adjust the argument on adjustValue(n) accordingly.
The "document.formAge" statement is split into two lines: they should be on one line but the Yahoo window etc, and I've added a space between the b and r in the <br />s for the same reason, so they need to be removed as well.
Good luck
AP
- kainawLv 41 decade ago
You want to use the onchange attribute for each input field. Ensure you give each input field an ID so you can easily use getElementById to grab then and get their value. When a field changes, all you will do is set the previous field to the the changed fields value - 1.
So, assume you ID'd them something like age1, age2, age3...
Then, assume age 3's HTML looks like <input type='text' id='age3' onchange='javascript:updateAges(3);' value='' size='2'>.
Now, you can have a function that looks like:
function updateAges(id)
{
document.getElementById('age'+(id-1)).value = document.getElementById('age'+id).value - 1;
}
This is about as simple as auto-updating text fields can get. If you are struggling with it, you need to spend more time on problems like this before tackling more complex JavaScript projects. Eventually, the concepts will just click and you'll be able to do all kinds of weird things with JavaScript.
