PDA

Click to See Complete Forum and Search --> : JavaScript Dynamic Text Fields HELP!

Jason64
11-26-2003, 09:40 AM
I would like to create a JavaScript that uses 4 text fields and 1 hidden field(which would contain a static number) and dynamically, on the fly, as you type, adds or multiplies. Is this even possible? Here's how it would break down:

The Static field, (a hidden field with a value.):
Let's say that number is $100,000.00, would be visible.(above the other fields in a list)

1st text field:
a dollar amount. Initial value zero. will contain a decimal (in dollars) ie: $4,000.00

2nd text field:
a percent. initial value zero. also will contain a decimal (in dollars) ie: 4.00%

3rd text field:
another dollar amount. initial value zero. will contain a decimal (in dollars) $50.00

4th and last text field:
TOTAL dollar amount. EQUALS the values entered into the 3 above fields based on the static field of $100,000.00. will contain a decimal (in dollars)

How these fields would interact:
The static field would be the "known" number. All other fields would be based off of this number. Each of the 4 fields would begin with a value of zero dollars or percent. Once the user enters a value into ANY of the 4 fields the code should do the math based on the initial value: $100,000.00, ON THE FLY WITHOUT REFRESHING.

Visual:
$100,000.00

$[__4,000.00__]

[__4.00___]%

$[__50.00__] per hour

$[__TOTAL__]

Please reply, Your help is greatly appreciated!
Jason64
TheBearMay
11-26-2003, 12:05 PM
You'll need to tap into the onchange event for the textbox.

<input type='text' onchange='recalcUserFunction();' ....>
Jason64
11-26-2003, 12:28 PM
I'm pretty much a novice at JavaScript, Is there any way someone can walk me through this one?
TheBearMay
11-26-2003, 01:02 PM
Something along the lines of this should get you started. There's a couple of threads going on how to format the boxes as currency if you need script for that.


...
<script>
function boxRecalc(){
T4.value=eval(T1.value)*eval(T2.value)/eval(T3.value);
//insert formatting routine here
}
</script>
</head>
<body>


For $100,000:<br/>
<input type='text' name='T1' onchange='boxRecalc();' defaultValue='0'/><br/>
<input type='text' name='T2' onchange='boxRecalc();' defaultValue='0'/><br/>
<input type='text' name='T3' onchange='boxRecalc();' defaultValue='0'/><br/>
<input type='text' name='T4' readonly/><br/>
...
Jason64
11-26-2003, 01:37 PM
Thanks, That helps some, but my intention was to have these fields populate AS you type. I need values to populate fields on the fly rather than as you tab-out.
TheBearMay
11-26-2003, 02:28 PM
Don't think there is a good way to do that. The only events you really have available are onblur() and onchange().
Jason64
11-26-2003, 04:42 PM
What about onKeyUp? or onKeyDown?