Calculate field based on another field in form

Discussion in 'Javascript' started by jochen scheire, Apr 21, 2004.

  1. Is there a way I can calculate a field in a form based on another field in
    the same form. When clicking submit, both values should be posted to the
    next page. I want to be able to type in a value in one field, and
    automatically in a second field the value*1,36 should appear.
    jochen scheire, Apr 21, 2004
    #1
    1. Advertising

  2. jochen scheire

    Erwin Moller Guest

    jochen scheire wrote:

    > Is there a way I can calculate a field in a form based on another field in
    > the same form. When clicking submit, both values should be posted to the
    > next page. I want to be able to type in a value in one field, and
    > automatically in a second field the value*1,36 should appear.


    Yes, it is excactly where JS is good at.

    suppose you have a form:
    <form name="myform" action="someaction">
    <input type="text" name="field1">
    <input type="text" name="field2">
    <input type="text" name="sumfield">
    <input type="button" onClick="doCalcAndSubmit();">
    </form>

    with this script somewhere on the page:

    <script type="text/javascript">
    function doCalcAndSubmit() {
    // get both values
    val1 = document.forms["myform"].field1.value;
    val2 = document.forms["myform"].field2.value;

    // do some calculation
    myNewValue = val1 + val2;

    // set the value in the right field
    document.forms["myform"].sumfield.value = myNewValue;

    // submit the form as if submit was pressed.
    document.forms["myform"].submit();
    }
    </script>


    This example does an addition in sumfield.
    Then it submits the form.
    I didn't check my syntax, so maybe there is some typo.

    Good luck,
    Erwin Moller
    Erwin Moller, Apr 21, 2004
    #2
    1. Advertising

  3. jochen scheire

    Mick White Guest

    Erwin Moller wrote:

    > jochen scheire wrote:
    >
    >
    >>Is there a way I can calculate a field in a form based on another field in
    >>the same form. When clicking submit, both values should be posted to the
    >>next page. I want to be able to type in a value in one field, and
    >>automatically in a second field the value*1,36 should appear.

    >
    >
    > Yes, it is excactly where JS is good at.
    >
    > suppose you have a form:
    > <form name="myform" action="someaction">
    > <input type="text" name="field1">
    > <input type="text" name="field2">
    > <input type="text" name="sumfield">
    > <input type="button" onClick="doCalcAndSubmit();">
    > </form>
    >
    > with this script somewhere on the page:
    >
    > <script type="text/javascript">
    > function doCalcAndSubmit() {
    > // get both values
    > val1 = document.forms["myform"].field1.value;
    > val2 = document.forms["myform"].field2.value;
    >
    > // do some calculation


    > myNewValue = val1 + val2;


    The above will concatenate the strings, probably not what you want.
    myNewValue = eval(val1) + eval(val2); // Not kosher but effective

    myNewValue = parseFloat(val1) + parseFloat(val2);
    Mick

    >
    > // set the value in the right field
    > document.forms["myform"].sumfield.value = myNewValue;
    >
    > // submit the form as if submit was pressed.
    > document.forms["myform"].submit();
    > }
    > </script>
    >
    >
    > This example does an addition in sumfield.
    > Then it submits the form.
    > I didn't check my syntax, so maybe there is some typo.
    >
    > Good luck,
    > Erwin Moller
    Mick White, Apr 21, 2004
    #3
  4. On Wed, 21 Apr 2004 20:38:29 GMT, Mick White <>
    wrote:

    > Erwin Moller wrote:


    [snip]

    >> // do some calculation
    >>
    >> myNewValue = val1 + val2;

    >
    > The above will concatenate the strings, probably not what you want.
    > myNewValue = eval(val1) + eval(val2); // Not kosher but effective


    It may be effective, but it's slow and allows the browser to parse
    arbitrary strings. Not only might this cause script errors, but it might
    even be a security risk.

    There are numerous ways of converting a string to a number, and *none* of
    them include eval(). Do not use eval()!

    <URL:http://jibbering.com/faq/#FAQ4_21>

    [snip]

    Mike

    --
    Michael Winter
    d (replace ".invalid" with ".uk" to reply)
    Michael Winter, Apr 22, 2004
    #4
  5. Mick White wrote:
    > Erwin Moller wrote:

    <snip>
    >> val1 = document.forms["myform"].field1.value;
    >> val2 = document.forms["myform"].field2.value;
    >>
    >> // do some calculation

    >
    >> myNewValue = val1 + val2;

    >
    > The above will concatenate the strings, probably not what you want.
    > myNewValue = eval(val1) + eval(val2); // Not kosher but effective


    Most of possible techniques for converting strings into numbers have
    well specified behaviour whenever the input cannot be interpreted as a
    number. But - eval - can do (literally) anything (including throwing
    exceptions) and return anything.

    If javascript did not include numerous alternative method of converting
    strings into numbers it would still only be acceptable to apply - eval -
    to user input that was expected to resemble a number if that input was
    first examined to ensure that it conformed to an acceptable format (fore
    example, with a regular expression).

    As javascript does offer multiple alternative method of string to number
    conversion it would be best to understand their mechanism, especially in
    the handling of unexpected input and choose one suited to the context.
    Probably combined with a regular expression examination of the user
    input so that unexpected or unusual input could be well handled.

    > myNewValue = parseFloat(val1) + parseFloat(val2);

    <snip>

    Consider what happens if the user enters - 1,234.56 -, which could be
    acceptable (and not unexpected) user input, but will not be well handled
    by any string to number method. parseFloat/Int will consider it 1, -
    eval - would return 234.56, while type-converting with unary plus or
    the - Number - function will return NaN.

    Richard.
    Richard Cornford, Apr 22, 2004
    #5
  6. jochen scheire

    Erwin Moller Guest

    >
    >> myNewValue = val1 + val2;

    >
    > The above will concatenate the strings, probably not what you want.
    > myNewValue = eval(val1) + eval(val2); // Not kosher but effective
    >
    > myNewValue = parseFloat(val1) + parseFloat(val2);
    > Mick
    >


    Oops, very true.
    I stand corrected.
    I have been coding too PHP lately and went sloppy. :)
    Didn't test the code.

    Regards,
    Erwin Moller
    Erwin Moller, Apr 22, 2004
    #6
  7. jochen scheire

    Mick White Guest

    Richard Cornford wrote:

    > Mick White wrote:
    >
    >>Erwin Moller wrote:

    >
    > <snip>
    >
    >>> val1 = document.forms["myform"].field1.value;
    >>> val2 = document.forms["myform"].field2.value;
    >>>
    >>> // do some calculation

    >>
    >>> myNewValue = val1 + val2;

    >>
    >>The above will concatenate the strings, probably not what you want.
    >>myNewValue = eval(val1) + eval(val2); // Not kosher but effective

    >
    >
    > Most of possible techniques for converting strings into numbers have
    > well specified behaviour whenever the input cannot be interpreted as a
    > number. But - eval - can do (literally) anything (including throwing
    > exceptions) and return anything.
    >
    > If javascript did not include numerous alternative method of converting
    > strings into numbers it would still only be acceptable to apply - eval -
    > to user input that was expected to resemble a number if that input was
    > first examined to ensure that it conformed to an acceptable format (fore
    > example, with a regular expression).
    >
    > As javascript does offer multiple alternative method of string to number
    > conversion it would be best to understand their mechanism, especially in
    > the handling of unexpected input and choose one suited to the context.
    > Probably combined with a regular expression examination of the user
    > input so that unexpected or unusual input could be well handled.
    >
    >
    >>myNewValue = parseFloat(val1) + parseFloat(val2);

    >
    > <snip>
    >
    > Consider what happens if the user enters - 1,234.56 -, which could be
    > acceptable (and not unexpected) user input, but will not be well handled
    > by any string to number method. parseFloat/Int will consider it 1, -
    > eval - would return 234.56, while type-converting with unary plus or
    > the - Number - function will return NaN.
    >
    > Richard.
    >
    >



    I agree with everything you put forward, I would never accept a user
    entry without first examining it.
    A form field entry such as "$1,234.56", for instance, is not altogether
    to be unexpected. While the entry can certainly be converted to a
    number, I would prefer that the user be instructed to enter a malleable
    number in an acceptable format, or at least he be given the chance to
    agree with your conversion. What would do you do with "€1.234,56"? You
    can't assume that because the decimal point precedes the comma that the
    entry is in "continental" format.
    As far as using the eval() function, I plead guilty.

    Mick
    Mick White, Apr 22, 2004
    #7
    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. Emmanuel
    Replies:
    1
    Views:
    655
    Karl Seguin
    Nov 22, 2005
  2. Golan
    Replies:
    3
    Views:
    347
  3. GavMc
    Replies:
    4
    Views:
    303
    Evertjan.
    Sep 22, 2005
  4. Brett_A
    Replies:
    8
    Views:
    174
    Bob Barrows [MVP]
    Apr 19, 2008
  5. jr
    Replies:
    3
    Views:
    387
Loading...

Share This Page