Calculate field based on another field in form

[jochen scheire]

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.

 

[Erwin Moller]

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

 

[Mick White]

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

 

[Michael Winter]

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

 

[Richard Cornford]

Erwin Moller wrote:

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.

 

[Erwin Moller]

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

 

[Mick White]

Erwin Moller wrote:

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