Pass input Array value to function to calc different input value

[Susan Cranford]

Please forgive, I have looked at so much info I can't figure out how to
put it together even though I know it must be fairly simple.

I have an array of input text boxes (txtDOBn) where n is created at
load. On the onchange event I want to calc the age and show in adjacent
input text boxes that are readonly and also arrays (an age calced for
each DOB entered). I was going to use the datediff function in vbscript
to do the calc.

Can someone please help me pull the pieces together or point me to a
similiar example?

I didn't post HTML because of message about spam.
*** Sent via Developersdex http://www.developersdex.com ***

[RobG]

Susan Cranford wrote:

Please forgive, I have looked at so much info I can't figure out how to
put it together even though I know it must be fairly simple.

I have an array of input text boxes (txtDOBn) where n is created at
load. On the onchange event I want to calc the age and show in adjacent
input text boxes that are readonly and also arrays (an age calced for
each DOB entered). I was going to use the datediff function in vbscript
to do the calc.

Can someone please help me pull the pieces together or point me to a
similiar example?

Have a read of Dr J's pages:

<URL:http://www.merlyn.demon.co.uk/js-dates.htm>
--
Rob

[Danny]

Easily doable, but you need to be much more specific on what you have and
what you need. Calculations are simple depending on what your source
might be, but the calculation are simple, just be concise and explainful.

Danny

On Mon, 04 Jul 2005 15:50:11 -0700, Susan Cranford <ne******@comcast.net>
wrote:


--
Using Opera's revolutionary e-mail client: http://www.opera.com/mail/

[Susan Cranford]

Sure. I will have several text input boxes created on the fly using
loops to create these varying number of dob's. When a dob on one of
them is entered (txtDOB1, txtDOB2...) I want to calc the age (I was
tying to use vbscript and datediff to try and do this with an onchange
event to call the function) and then put the age in a readonly text box
right beside each of the txtDOBn input boxes.

Is that enough info ?

*** Sent via Developersdex http://www.developersdex.com ***

[RobG]

Susan Cranford wrote:

Please forgive, I have looked at so much info I can't figure out how to
put it together even though I know it must be fairly simple.

I have an array of input text boxes (txtDOBn) where n is created at
load. On the onchange event I want to calc the age and show in adjacent
input text boxes that are readonly and also arrays (an age calced for
each DOB entered). I was going to use the datediff function in vbscript
to do the calc.

Can someone please help me pull the pieces together or point me to a
similiar example?

I didn't post HTML because of message about spam.
Here is a function that validates user input an calculates an age in
years, months and days. It uses the local PC date, which may not be
correct and the clock may not be accurately set.

It makes use of date objects to do calculations and so maybe slow, but
for a form where you are doing them one at a time with user input in
between the time will go un-noticed. Search the archives here for
plenty of other solutions.

Date validation creates a date object from the input text. If it's a
valid date, is the same as the input date (e.g. 31 June is a 'valid'
date, but converts to 01 July so not valid in this case) and isn't in
the future, the date is accepted as valid. Using a date object to
check the date means we don't have to manually deal with leap years,
daylight saving, etc.

The age is calculated as the difference in years (always 0 or greater),
difference in date (adjusting the months & date if difference is
negative) and difference in months (adjusting the year & month if month
difference is negative).

<script type="text/javascript">

// Calculates age in years, months & days
// Assumes system clock is accurate...
function calcAge( f ) {

// Get entered values
f = f.form;
var bY = f.bY.value;
var bM = f.bM.value;
var bD = f.bD.value;
var now = new Date();

// Generate date from input
var xD = new Date( bY, bM-1, bD );

// Check generated date is OK
if ( isNaN(xD.getDate()) ) {
return 'Entered text is not valid';
}

// Get date components
var aY = xD.getFullYear();
var aM = xD.getMonth();
var aD = xD.getDate();

// Validate date entered
if ( aY != bY || aM != (bM-1) || aD != bD || now < xD ) {
return 'Date is not valid';
}

// Calculate age
aY = now.getFullYear() - aY;
aM = now.getMonth() - aM;
aD = now.getDate() - aD;
if ( aD < 0) {
aD = now.getDate( now.setDate(aD) );
aM--;
}
if ( aM < 0 ) {
aM += 12;
aY--;
}
return aY + 'y ' + aM + 'm ' + aD + 'd';
}
</script>

<form name="ageForm" action="">
<div><p>Enter your birth date (YYYY-MM-DD)</p>
<input name="bY" size="4" maxlength="4"/<input name="bM" size="2" maxlength="2"
/<input name="bD" size="2" maxlength="2"><br>

<input type="button" value="Calculate age..." onclick="
this.form.age.value = calcAge(this);
"><input type="reset"><br>
<input type="text" size="20" name="age" readonly>
</div>
</form>
--
Rob

[Lee]

Susan Cranford said:

Sure. I will have several text input boxes created on the fly using
loops to create these varying number of dob's. When a dob on one of
them is entered (txtDOB1, txtDOB2...) I want to calc the age (I was
tying to use vbscript and datediff to try and do this with an onchange
event to call the function) and then put the age in a readonly text box
right beside each of the txtDOBn input boxes.

Is that enough info ?

Are you asking how to do this in VBScript, or Javascript?

[Susan Cranford]

I am more comfortable with VBScript but can use either.

The issue isn't the actual calculation of the age, it's the dealing with
passing/setting the values in the arrays of controls.

As always, I appreciate the help here very much!


*** Sent via Developersdex http://www.developersdex.com ***

[Lee]

Susan Cranford said:

I am more comfortable with VBScript but can use either.

The issue isn't the actual calculation of the age, it's the dealing with
passing/setting the values in the arrays of controls.

As always, I appreciate the help here very much!

Here's an example that assumes that the age text field that
corresponds to "txtDOB1" is named "txtAge1". There's no
validation, so the calculation is too simple to use in
production.

<html>
<head>
<title>demo</title>
<script type="text/javascript">
function setAge(dobFieldRef) {
var ageFieldName=dobFieldRef.name.replace(/DOB/,"Age");
var ageFieldRef=dobFieldRef.form.elements[ageFieldName];
var dobDate=new Date(dobFieldRef.value);
var todaysDate=new Date();
var age=todaysDate.getFullYear()-dobDate.getFullYear();
var monthDiff=dobDate.getMonth()-todaysDate.getMonth();
var dateDiff=dobDate.getDate()-todaysDate.getDate();
if (monthDiff>0 || monthDiff==0 && dateDiff>0) age--;
ageFieldRef.value=age;
}
</script>
</head>
<body>
<form>
<input name="txtDOB1" onchange="setAge(this)"><input name="txtAge1"><br>
<input name="txtDOB2" onchange="setAge(this)"><input name="txtAge2"><br>
<input name="txtDOB77" onchange="setAge(this)"><input name="txtAge77"><br>
</form>
</body>
</html>

[RobG]

Lee wrote:

Susan Cranford said:

I am more comfortable with VBScript but can use either.

The issue isn't the actual calculation of the age, it's the dealing with
passing/setting the values in the arrays of controls.

As always, I appreciate the help here very much!

Here's an example that assumes that the age text field that
corresponds to "txtDOB1" is named "txtAge1". There's no
validation, so the calculation is too simple to use in
production.

Here's a more robust version, noting the usual caveats re user
date/clock settings and JavaScript availability. If really old
browsers are expected, you may want to provide an alternative to the
getFullYear() function based on getYear().

<script type="text/javascript">

function calcAge( bY, bM, bD ) {
var now = new Date();
var xD = new Date( bY, bM-1, bD );
if ( isNaN(xD.getDate()) ) {
return 'Entered text is not valid';
}

var aY = xD.getFullYear();
var aM = xD.getMonth();
var aD = xD.getDate();

if ( aY != bY || aM != (bM-1) || aD != bD || now < xD ) {
return 'Date is not valid';
}

aY = now.getFullYear() - aY;
aM = now.getMonth() - aM;
aD = now.getDate() - aD;
if ( aD < 0) {
aD = now.getDate( now.setDate(aD) );
aM--;
}
if ( aM < 0 ) {
aM += 12;
aY--;
}
return aY + 'y ' + aM + 'm ' + aD + 'd';
}

// Generic function, uses element name
function doDate( x ) {
var xF = x.form;
var idx = x.name.split('_')[1];
var xY = xF.elements[ 'bY_' + idx ].value;
var xM = xF.elements[ 'bM_' + idx ].value;
var xD = xF.elements[ 'bD_' + idx ].value;
var xA = xF.elements[ 'age_' + idx];
if ( xY && xM && xD )
xA.value = calcAge( xY, xM, xD );
}

// Adds onkeyup function to text inputs in form with name starting
// with 'bY_', 'bM_' or 'bD_'
function initForm( form ){
if ( !document.forms) {
// handle browser that doesn't support forms collection
return;
}
form = document.forms[form];
var els = form.elements;
var el, i = els.length;
while ( i-- ) {
el = els[i];
if ( el.name
&& 'text' == el.type
&& /^b[YMD]_/.test(el.name) ){
el.onkeyup = function() { doDate(this); }
}
}
}

// Just in case user pastes values rather than typing
function calcAll( f ){
f = f.form;
var els = f.elements;
var el, i = els.length;
while ( i-- ) {
el = els[i];
if ( el.name
&& 'text' == el.type
&& el.name.match('bY_') ) {
doDate(el);
}
}
}

window.onload = function() { initForm('ageForm'); }
</script>

<form name="ageForm" action="">
<table border="0">
<tr>
<td colspan="4" style="text-align: center;">Enter
a birth date (yyy mm dd)</td>
</tr><tr>
<td style="text-align: center;">Year</td>
<td style="text-align: center;">Month</td>
<td style="text-align: center;">Day</td>
<td style="text-align: center;">Age (readonly)</td>
</tr>
</tr><tr>
<td><input type="text" name="bY_0" size="4" maxlength=4>/</td>
<td><input type="text" name="bM_0" size="2" maxlength=2>/</td>
<td><input type="text" name="bD_0" size="2" maxlength=2></td>
<td><input type="text" name="age_0" size="20" readonly></td>
</tr>
</tr><tr>
<td><input type="text" name="bY_1" size="4" maxlength=4>/</td>
<td><input type="text" name="bM_1" size="2" maxlength=2>/</td>
<td><input type="text" name="bD_1" size="2" maxlength=2></td>
<td><input type="text" name="age_1" size="20" readonly></td>
</tr>
</tr><tr>
<td><input type="text" name="bY_2" size="4" maxlength=4>/</td>
<td><input type="text" name="bM_2" size="2" maxlength=2>/</td>
<td><input type="text" name="bD_2" size="2" maxlength=2></td>
<td><input type="text" name="age_2" size="20" readonly></td>
</tr>
<tr>
<td colspan="4">
<input type="reset" onclick="if (this.blur) this.blur();">
<input type="button" value="Re-calculate all ages..." onclick="
calcAll(this);
if ( this.blur ) this.blur();
">
</td>
</tr>
</table>
</form>
--
Rob

[Susan Cranford]

Great! But since the 1, 2...77 is a variable, how would that look ?

*** Sent via Developersdex http://www.developersdex.com ***

[RobG]

Susan Cranford wrote:

Great! But since the 1, 2...77 is a variable, how would that look ?

This bit of the script splits out the letter part of the name from the
index part:

var idx = x.name.split('_')[1];
var xY = xF.elements[ 'bY_' + idx ].value;
var xM = xF.elements[ 'bM_' + idx ].value;
var xD = xF.elements[ 'bD_' + idx ].value;
var xA = xF.elements[ 'age_' + idx];

In the above:

if x.name is 'bY_77'
then x.name.split('_')[0] is 'bY'
and x.name.split('_')[1] is '77'

The underscore is just a handy delimiter, the key after the delimiter
can be anything that's valid in an element name - numbers are convenient
where an iterating process is likely to be used.

<URL:http://www.w3.org/TR/html4/interact/forms.html#adef-name-INPUT>

The script relates to the elements named thusly:

<td><input type="text" name="bY_77" ...
<td><input type="text" name="bM_77" ...
<td><input type="text" name="bD_77" ...
<td><input type="text" name="age_77" ...

You need to work out how to create unique names for all the form
elements while keeping the 'index' as essentially a kind of foreign key
so that the script can work out which ones are related.

The names can be generated at the server using whatever you use to
generate pages (ASP? PHP?...) or hard-coded if you like.

--
Rob

[Dr John Stockton]

JRS: In article <BI******************@news.optus.net.au>, dated Tue, 5
Jul 2005 04:08:01, seen in news:comp.lang.javascript, RobG
<rg***@iinet.net.auau> posted :

function calcAge( bY, bM, bD ) {
var now = new Date();
var xD = new Date( bY, bM-1, bD );
if ( isNaN(xD.getDate()) ) {
return 'Entered text is not valid';
}
I believe that test to be superfluous, since anything failing it will
fail the next test soon enough, if that is rewritten to use == rather
than != ; NaN != anything.

Come to think of it, it should only fail for out-of-range dates; ECMA
allows ~ -271821-04-20 to [phone] GMT. However, I hear that
Safari 1.2.3 on Mac OS 10.3. shows a range of +- 2^31 seconds from zero
- 1901-12-13 to 2038-01-19 GMT.

var aY = xD.getFullYear();
var aM = xD.getMonth();
var aD = xD.getDate();

if ( aY != bY || aM != (bM-1) || aD != bD || now < xD ) {
return 'Date is not valid';
}

I believe testing Y is superfluous, at least if there are no dates
before AD 100. And date 0000-02-29 can be a problem!

AFAIR, the OP has not defined "age". If only age in years is needed,
consider (Y M D is today; A is input) :-

function PDCount(Y, M, D) { return (Y*20 + +M)*50 + +D }

Age = ( PDCount(Y, M, D) - PDCount(A[2], A[1], A[0]) ) / 1000
Age = Math.floor(Age)

Note the question of when a person born on Feb 29 becomes 18; all should
be well if that's taken as Mar 1, but may well not be if taken as Feb
28. Check applicable legislation.

--
© John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v4.00 IE 4 ©
<URL:http://www.jibbering.com/faq/> JL/RC: FAQ of news:comp.lang.javascript
<URL:http://www.merlyn.demon.co.uk/js-index.htm> jscr maths, dates, sources.
<URL:http://www.merlyn.demon.co.uk/> TP/BP/Delphi/jscr/&c, FAQ items, links.

[Susan Cranford]

Thanks so much to everyone who tried to help me with this. I finally
figured out how to get it work as I needed with vbscript. It was
simple, I was just driving all the way around the mountain when I should
have taken the short cut! I got caught up with the index of the input
element when I just had to pass the 2 objects to my sub and wala...it
worked like a charm.

Again thanks to all of you wonderfully helpful folks!

*** Sent via Developersdex http://www.developersdex.com ***