Determine value in text box

Discussion in 'Javascript' started by JK, Apr 3, 2005.

  1. JK

    JK Guest

    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, Apr 3, 2005
    #1
    1. Advertising

  2. JK

    Mick White Guest

    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
    Mick White, Apr 3, 2005
    #2
    1. Advertising

  3. JK

    RobG Guest

    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
    RobG, Apr 3, 2005
    #3
  4. JRS: In article <jaG3e.11549$k66.275@trnddc03>, dated Sat, 2 Apr 2005
    23:47:27, seen in news:comp.lang.javascript, JK <> 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.
    Dr John Stockton, Apr 5, 2005
    #4
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Ken McCrory

    Text box losing most recent Text value

    Ken McCrory, Mar 9, 2005, in forum: ASP .Net
    Replies:
    5
    Views:
    443
    Patrick Olurotimi Ige
    Mar 10, 2005
  2. Replies:
    1
    Views:
    1,143
    David Wier
    Aug 5, 2005
  3. Gnarlodious
    Replies:
    4
    Views:
    17,564
    elizas
    May 5, 2010
  4. Replies:
    2
    Views:
    288
    Scott Roberts
    Dec 21, 2007
  5. Peña, Botp
    Replies:
    1
    Views:
    224
    Robert Klemme
    Jan 24, 2004
Loading...

Share This Page