calculating with fields of a form

I would like to calculate with fields of my form:
total=field1*4+field2*6
Where and how can I put this in my code?

Hi pokemon,

You can either use PHP in a Custom code action in CFv4 (or an On Submit box in CFv3); or you can use JavaScript in a Load JS action (or the Form JavaScript box).

Bob

Is it something like this, that I have to put in the Form Javascript box

function rekenen1(){
  var box1=document.myform.field1.value;
  var box2=document.myform.field2.value;
  var box3=box1*4+box2*6;
  document.myform.Bedrag.value=box3;
}

Can I show this result in the form when I click in a field? (what code do I need for it)

Do I need a button to get this doing something? I have no idea how I get this working.😢

Hi pokemon,

Make sure that you have ids set for field1, field2 and box 3:

window.addEvent('domready', function() {
  $('field1').addEvent('change', rekenen1);
  $('field2').addEvent('change', rekenen1);
});
function rekenen1(){
  $('box3').value = $('field1').value * 4 + $('field1').value * 6;
}

You'll probably need to add some validation to make sure that the values are numbers.

Bob

Thank you for your help, it works.😀

Hi Bob,

I am a very newbie in Chronoforms in the first place!

I was looking at this example because I need to do this.
But ..... how do I get box3 displayed or in the email?

Wil

Hi Euphonist,

You use the script to set the value of a Hidden input (or a readonly text input) in your form so that the value is returned with the other form results.

Bob

Thanks replying Bob,

However, I think I miss something somewhere because I don't get the results in the email (After all I am a newbie with very little programming knowledge).
By the way: I intend to buy your Chronoforms Cookbook. Do you intend to update this book?

This is what I did:
In the Preview I created:
the Text Box aantalkaarten (Validation set to Number)
the Hidden Boxes prijsnormaal and totaal

In the Events I created in On Submit:
[attachment=0]Euphonist_OnSubmit.PNG[/attachment]
Load JS:

window.addEvent('domready', function() {
  $('aantalkaarten').addEvent('change', calculate);
  $('prijsnormaal').addEvent('change', calculate);
});
function calculate(){
  $('totaal').value = $('aantalkaarten').value + $('prijsnormaal').value;
}

Email - (10):

<p>We kindly ask you to pay €{totaal}.</p>

Hi euphonist,

Please see this FAQ for more info about the book, there may be a updated version once I've understood enough about the new versions and found the time to write it.

JavaScript - the code in your Load JS action - only works in the User's browser so it is almost always used in the On Load event. In the On Submit Event here it will do nothing at all.

If you want to do calculations so that the results are visible to the User then use JavaScript in the On Load event, if you put the results into a form input then they will be submitted with the other form results.

If you want to do calculations after the form is submitted (and you should probably verify any calculations done in the browser) then use PHP in a Custom Code action.

Bob

Dear Bob,

Thanks again

If you want to do calculations so that the results are visible to the User then use JavaScript in the On Load event, if you put the results into a form input then they will be submitted with the other form results.

I did put the Load JS event in the On Load event, but how do I put the results into my form input.
I really miss the clue here.

Hi Euphonist,

You use JavaScript to set the value of a text input or a hidden input. Please check your JavaScript manual for the code, it's pretty basic . . . and there are many examples in the forums here.

Bob

Hi Bob,

Just to let you know that it costed me some study, searching and time, but I managed it.
It works!

Thanks for helping,

Wil

Hi Wil,

Well done, next time it will be easier - and you'll go a bit further.

Bob

Hi Bob,
I can't get this to work - here's what I have:

Load JS event in "on load" after "show html":

window.addEvent('domready', function() {
  $('field1').addEvent('change', rekenen1);
  $('field2').addEvent('change', rekenen1);
});
function rekenen1(){
  $('box3').value = $('field1').value + $('field2').value;
}

All input fields have corresponding id's - db save is on and working, etc.
But it won't work - is it mootools related? I don't see anything re mootools in the source code..

nevermind - saw that mootools won't load unless validation is enabled.
Works great - thanx for the thread.

I did however try

window.addEvent('domready', function() {

without validation/mootools enabled, but it didn't work...