Determine value in text box

This is an easy one, but I'm a JS newbie. I want to write a function that
determines input value. If 0 - 100 than will use input as % (i.e., 3 would
become .03 and used for calculations); otherwise, as dollar value (i.e.,
1,000 would become $1,000 and used for calculations). In other words, I want
input.value 3 to either be input.value 1 * input.value 2, or simply =
input.value 1. Please be specific about placement of function (header or
body, placement inside another function, etc), I am just a newbie.

Thank you in advance.

Jim Kobzeff

JK wrote:

This is an easy one, but I'm a JS newbie. I want to write a function that
determines input value. If 0 - 100 than will use input as % (i.e., 3 would
become .03 and used for calculations); otherwise, as dollar value (i.e.,
1,000 would become $1,000 and used for calculations). In other words, I want
input.value 3 to either be input.value 1 * input.value 2, or simply =
input.value 1. Please be specific about placement of function (header or
body, placement inside another function, etc), I am just a newbie.

Thank you in advance.

Jim Kobzeff

Are you applying the input 1 rules to input 2?
Mick

JK wrote:

This is an easy one, but I'm a JS newbie. I want to write a function that
determines input value. If 0 - 100 than will use input as % (i.e., 3 would
become .03 and used for calculations); otherwise, as dollar value (i.e.,
1,000 would become $1,000 and used for calculations). In other words, I want
input.value 3 to either be input.value 1 * input.value 2, or simply =
input.value 1. Please be specific about placement of function (header or
body, placement inside another function, etc), I am just a newbie.

Looks can be deceiving. Presuming you have validated the input, you
can use:

var a = input.value
if ( a < 0 ) {
return 'input is negative';
} else if (! a > 100) {
// use as a percentage
} else {
// use as a dollar value
}

I've assumed that you don't want negative values.

But this rather trivial solution hides many issues. For a useful
introduction to JavaScript (but by no means thorough), try:

<URL:http://www.w3schools.com>

For more information on doing mathematics with JavaScript, try the
link below which includes hints on validation also:

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

In regard to where to put the script, usually scripts are put in the
head, but they can appear almost anywhere in the document. Where you
put them depends on various factors, but for a script like this, the
head is probably best.

As for what to code to put into separate functions and what to keep
in a monolithic function, that normally depends on how much re-use
you intend to make of the code and maintenance issues. Most coders
will break code into logical blocks and create functions. Anything
that must be done in more than one place, or that requires high
maintenance, should be in a separate function.

Below is a script that gives an example of what you may be trying to
do - it does some input validation, some maths with integers and
formats the output to look like decimal currency. It does not deal
with decimal values (other than the $ input) or comma 'thousands'
separators.

There are also hints in the HTML to let users know what is and isn't
valid input, as well as what the total actually is. Hopefully it
gives you some idea of how to go about whatever it is you are trying
to do - if you need other or different features, ask again.


<style type="text/css">
table {border-collapse: collapse;
border: 1px solid blue;}
td {border: 1px solid grey; padding: 2px;}
..tip {font-size: 80%; color: #666699;}
</style>
<script type="text/javascript">
function doCalc(f) {

// Get form values
var a = f.inA.value;
var b = f.inB.value;

// Validate input - a must be digits only and 0 <= a <= 100
if (/\D+/.test(a) || a < 0 || a > 100 || a == '') {
alert('Percentage must be an integer from 0 to 100');
if (f.inA.focus){
f.inA.focus();
}
return;
} else {
// use '+' to convert a to a number
a = +a;
}

// B should also be only digits and between 0 and 999999
if (!/^\d{1,4}.\d\d$/.test(b) || b < 0 || b > 999999 || b == '') {
alert('Dollar value must be 0.00 to 9999.99');
if (f.inB.focus){
f.inB.focus();
}
return;
} else {
// Work in whole cents to make everything simpler
// Multiplying b by 100 will convert it to a number
b = b*100;
}

// Do calcs - the + '' at end converts t to a
// string so we can use substring next
var t = Math.round((b + b*a/100))+ '';

// Save last two digits
var c = t.substring((j = t.length - 2));

// Now divide t by 100 and truncate cents
t = Math.floor(t/100);

// Write values to output, adding in a decimal point
f.outA.value = t + '.' + c;
}
</script>
<form action="">
<table>
<tr>
<td>
Enter a percentage
<span class="tip">(0 to 100)</span>
</td><td>
<input type="text" name="inA" size="10" value="1">
</td>
</tr><tr>
<td>
Enter a dollar value
<span class="tip">(0.00 to 9999.99)</span>
</td><td>
<input type="text" name="inB" size="10" value="100.00">
</td>
</tr><tr>
<td>
Total
<span class="tip">($ plus %)</span>
</td><td>
<input type="text" name="outA" size="10">
</td>
</tr><tr>
<td>
<input type="reset">
</td>
<td>
<input type="button" value="Do calc" onclick="
doCalc(this.form);
"><br>
<span class="tip">click to calc value</span>
</td>
</tr>
</table>
</form>


--
Rob

JRS: In article <jaG3e.11549$k66.275@trnddc03>, dated Sat, 2 Apr 2005
23:47:27, seen in news:comp.lang.javascript, JK <JK (AT) here (DOT) com> posted :

This is an easy one, but I'm a JS newbie. I want to write a function that
determines input value. If 0 - 100 than will use input as % (i.e., 3 would
become .03 and used for calculations); otherwise, as dollar value (i.e.,
1,000 would become $1,000 and used for calculations). In other words, I want
input.value 3 to either be input.value 1 * input.value 2, or simply =
input.value 1. Please be specific about placement of function (header or
body, placement inside another function, etc), I am just a newbie.

It is unlikely to be wise to make the behaviour and meaning of an input
depend in such a discontinuous manner on its numerical magnitude.

Use a percentage box for percentages, making it clear what it is a
percentage of, and use a dollar box for dollars - remembering that on
the World Wide Web the dollar (if American) is steadily becoming less
useful as a unit of currency, so alternatives should be provided.

Or use a single box, requiring the presence of either a recognisable
leading currency symbol or a trailing percentage sign.

Or two numeric input, with a checkbox to enable the percenter.

Or a single box with a radio-button pair to select the nature of the
input.

If you had broken up your description better, it would have been more
readable -

If you are envisaging "full" use as box 3 = [(box 2 %) of]? (box 1 $),
then preload box 2 with 100.0, then a button, then box 3 : something
like

---------------- ----------- ---- -----------
Enter : $ | | * |100.0 | % | => | $ | |
---------------- ----------- ---- -----------

--
© 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.