[Pro] How to use Javascript to add up text fields

Can someone tell me how to make it happen that if I have for example 5 text fields that will automatically add up the data that is filled in by the site’s visitors and show the total amount in field number 6?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

See my answer in your other posting http://www.freewaytalk.net/thread/view/93621

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

My apologies! I must have been really drunk or something because I put my question in another topic and couldn’t find it anymore. Thanks!


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

As long as you don’t plan on trusting the result (you’re not taking
what comes in from that field and using it to charge the customer
money, for example) then you can use JavaScript for this.

Apply Protaculous to the page. Choose prototype-packed from the
Library picker. Click on the top Function Body button and paste in the
following snippet:

var sources = $$('input.calc');
function sumFields(){
	var sum = 0;
	sources.each(function(elm){
		sum += (parseFloat($F(elm)) || 0);
	});
	return sum;
}
sources.invoke('observe','keyup',function(evt){
	$('outputField').setValue(sumFields());
});
$('outputField').setValue(sumFields());

Now, go through your Freeway design view, and click on each form
element in turn. For each of the fields that you want to add up, do
the following:

  1. Choose Item / Extended from the main menu, make sure the Input tab
    is highlighted, and press the New button.
  2. In the resulting sub-dialog, set the Name field to ‘class’ (without
    the quotes) and the Value to ‘calc’.
  3. Okay out of the stack of dialogs, and repeat with each source field.

On the field where you want the result to appear, again, click once on
the field, open up Item / Extended as above, and instead of Name =
‘class’ enter ‘id’. For the value, enter ‘outputField’.

If you want to change any of these names, make sure that the changes
are reflected in the JavaScript and the Extended HTML.

What this function does is gather up all of the input fields on the
page that have the className ‘calc’, loop through them, and add their
values together, returning a Float (a number with a decimal). If you
just want integers, you can change the line sum += parseFloat($F(elm)); to read sum += parseInt($F(elm),10);.

The rest of the script creates what are called Unobtrusive Observers
– functions that watch the page elements and respond whenever the
specific event they are looking for happens. Each ‘calc’ field watches
itself to see if there have been any keystrokes, and if there have,
runs the sum function. This gives the effect of the total being “live”
– any changes to any of the sources are immediately reflected in the
total field. Then there’s one more line to set the default – if any
of the input fields were set with a default value in Freeway, then the
output field is automatically calculated to the sum of those non-zero
fields. If you don’t need that, just leave off the last line of the
script.

Walter

On Aug 4, 2011, at 11:37 AM, DTP2 wrote:

Can someone tell me how to make it happen that if I have for example
5 text fields that will automatically add up the data that is filled
in by the site’s visitors and show the total amount in field number 6?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

On Aug 4, 2011, at 12:04 PM, Walter Lee Davis wrote:

On the field where you want the result to appear, again, click once
on the field, open up Item / Extended as above, and instead of Name
= ‘class’ enter ‘id’. For the value, enter ‘outputField’.

I forgot something critical here – this means that you can only have
one of these output fields on the entire page. There cannot be two
things on the same page with the same ID attribute. If you need more
than one of these, then I would need to rewrite the function a bit to
deal with that.

Walter


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options