This topic is locked

How to calculate values on the fly

2/1/2010 10:43:52 AM
PHPRunner Tips and Tricks
J
Jane author

Let's say there are three fields on the add/edit page: Price, Quantity and Total. To calculate total value on the fly use JavaScript code (add it at the end of the page on the Visual Editor tab in HTML mode).

Here is a sample code for PHPRunner 5.1:

<script>

document.forms.editform.value_Price.onchange = document.forms.editform.value_Quantity.onchange = function()

{

document.forms.editform.value_Total.value = document.forms.editform.value_Price.value*document.forms.editform.value_Quantity.value;

}

</script>



and for PHPRunner 5.2. Add this code to 'Javascript OnLoad' event of the page where you need this calculation to happen:



var ctrlPrice = Runner.getControl(pageid, 'Price');

var ctrlQuantity = Runner.getControl(pageid, 'Quantity');

var ctrlTotal = Runner.getControl(pageid, 'Total');
function func() {

ctrlTotal.setValue(parseFloat(ctrlPrice.getValue()) * parseFloat(ctrlQuantity.getValue()));

};
ctrlPrice.on('keyup', func);

ctrlQuantity.on('keyup', func);
M
michaelmac 4/11/2010

Jane
Do I add this snippet after the </html>? Sorry to be dense here, but want to try this out and am stuck
Thanks

ficcionista 4/12/2010



Jane
Do I add this snippet after the </html>? Sorry to be dense here, but want to try this out and am stuck
Thanks


Add it before de </body> tag.
Cheers

K
kutch 4/29/2010

Hi I just want to do some addition on 3 Text Fields, I made this line;
<script>

document.forms.editform1.value_Monday_1.onchange = document.forms.editform1.value_Tuesday_1.onchange = document.forms.editform1.value_Wednesday_1.onchange = function()

{

document.forms.editform1.value_Registration_1.value = document.forms.editform1.value_Monday_1.value+document.forms.editform1.value_Tuesday_1.value+document.forms.editform1.value_Wednesday_1.value+350;

}

</SCRIPT>
But it only concatenates the 3 Text fields. Did not do the addition.
Can anyone help?

M
michaelmac 4/30/2010

Hey,
I am still not getting anywhere. I am using PHPR 5.2 Build 5482
Here is my HTML code on the edit page:
{BEGIN desc_1_fieldblock}<TR>

<TD class=editshadeleft_b style="PADDING-LEFT: 15px" width=350>{BEGIN desc_1_label}{$desc_1_editcontrol}{END desc_1_label}</TD>

{BEGIN qty_1_fieldblock}<TD class=editshade_lb style="PADDING-LEFT: 15px" width=50>{$qty_1_editcontrol}</TD>{END qty_1_fieldblock}

{BEGIN price_1_fieldblock}<TD class=editshade_lb style="PADDING-LEFT: 15px" width=80>{$price_1_editcontrol}</TD>{END price_1_fieldblock}

{BEGIN total_1_fieldblock}<TD class=editshade_lb style="PADDING-LEFT: 15px" width=100>{$total_1_editcontrol}</TD>{END total_1_fieldblock}</TR>{END desc_1_fieldblock}

{BEGIN desc_2_fieldblock}<TR>

<TD class=editshadeleft_b style="PADDING-LEFT: 15px" width=350>{BEGIN desc_2_label}{$desc_2_editcontrol}{END desc_2_label}</TD>

{BEGIN qty_2_fieldblock}<TD class=editshade_lb style="PADDING-LEFT: 15px" width=50>{$qty_2_editcontrol}</TD>{END qty_2_fieldblock}

{BEGIN price_2_fieldblock}<TD class=editshade_lb style="PADDING-LEFT: 15px" width=80>{$price_2_editcontrol}</TD>{END price_2_fieldblock}

{BEGIN total_2_fieldblock}<TD class=editshade_lb style="PADDING-LEFT: 15px" width=100>{$total_2_editcontrol}</TD>{END total_2_fieldblock}</TR>{END desc_2_fieldblock}

{BEGIN desc_3_fieldblock}<TR>

<TD class=editshadeleft_b style="PADDING-LEFT: 15px" width=350>{BEGIN desc_3_label}{$desc_3_editcontrol}{END desc_3_label}</TD>

{BEGIN qty_3_fieldblock}<TD class=editshade_lb style="PADDING-LEFT: 15px" width=50>{$qty_3_editcontrol}</TD>{END qty_3_fieldblock}

{BEGIN price_3_fieldblock}<TD class=editshade_lb style="PADDING-LEFT: 15px" width=80>{$price_3_editcontrol}</TD>{END price_3_fieldblock}

{BEGIN total_3_fieldblock}<TD class=editshade_lb style="PADDING-LEFT: 15px" width=100>{$total_3_editcontrol}</TD>{END total_3_fieldblock}</TR>{END desc_3_fieldblock}
Along with the Subtotal I need to use with this one the FLY
<TD><B>Subtotal</B></TD>

<TD class=editshade_lb style="PADDING-LEFT: 15px" width=100>{$Subtotal_editcontrol} </TD></TR>{END Subtotal_fieldblock}
I tried the snippet posted here before the </BODY> tag but it is still not working... Can you make any suggestions as to help?
Thanks
Mike

A
ann 5/5/2010

Kutch,
Use type-conversion JavaScript function Number() to convert strings to numbers.

More info:

http://www.w3schools.com/jsref/jsref_Number.asp

admin 5/7/2010

Updated version 5.2 example to utilize Javascript API.

M
matteofaini 6/7/2010



Updated version 5.2 example to utilize Javascript API.


Excuse me but I can't catch the whole.

I realized that in the "Javascript onload event" page I have to add the following code:



var ctrlPrice = Runner.getControl(pageid, 'Price');

var ctrlQuantity = Runner.getControl(pageid, 'Quantity');

var ctrlTotal = Runner.getControl(pageid, 'Total');
function func() {

ctrlTotal.setValue(parseFloat(ctrlPrice.getValue()) * parseFloat(ctrlQuantity.getValue()));

};
ctrlPrice.on('keyup', func);

ctrlQuantity.on('keyup', func);


But I don't know what to add (and where) in the "Edit" page.

If I don't add anything, nothing happens.

Is there anyone who succeded?
Thank you, Matteo

admin 6/8/2010

Matteo,
you need to add this on Events screen.

Table->Edit page->Javascript OnLoad event.

L
lechante 6/22/2010

To learn how this works
I made this table
Quantity

Price

Total

ID

when i copy the code in the add page: JavaScript Onload Event

I get an error

syntax error, unexpected T_VAR in line 1
I use php 5.2 build 4586

J
jansgroup 7/28/2010



Let's say there are three fields on the add/edit page: Price, Quantity and Total. To calculate total value on the fly use JavaScript code (add it at the end of the page on the Visual Editor tab in HTML mode).

Here is a sample code for PHPRunner 5.1:

<script>

document.forms.editform.value_Price.onchange = document.forms.editform.value_Quantity.onchange = function()

{

document.forms.editform.value_Total.value = document.forms.editform.value_Price.value*document.forms.editform.value_Quantity.value;

}

</script>



and for PHPRunner 5.2. Add this code to 'Javascript OnLoad' event of the page where you need this calculation to happen:



var ctrlPrice = Runner.getControl(pageid, 'Price');

var ctrlQuantity = Runner.getControl(pageid, 'Quantity');

var ctrlTotal = Runner.getControl(pageid, 'Total');
function func() {

ctrlTotal.setValue(parseFloat(ctrlPrice.getValue()) * parseFloat(ctrlQuantity.getValue()));

};
ctrlPrice.on('keyup', func);

ctrlQuantity.on('keyup', func);



This works perfectly!

Can you assist where it is desired to update more then just 1 field (perhaps 2 or more) based on the input of more than 2 fields (perhaps 4 or more).
Example:
Price * Qty = Total

Total + Shipping - Discounts = Grand Total
In this example the Price, Qty, Shipping and Discounts would be input fields where Total and Grand Total is calculated on the fly. I would like to accomplish this using the same type of function as shown in the example javascript in this thread.

I
indigo 7/29/2010

Hi,
I have a field "names" which is a multiple select lookup box.
I want to count the string values selected using the javascript method. (on the fly).

I have already added normal php event in 'Before record added' page, but I would prefer if I can count the values through Javascript.
Can anyone help?

J
jansgroup 8/4/2010



This works perfectly!

Can you assist where it is desired to update more then just 1 field (perhaps 2 or more) based on the input of more than 2 fields (perhaps 4 or more).
Example:
Price * Qty = Total

Total + Shipping - Discounts = Grand Total
In this example the Price, Qty, Shipping and Discounts would be input fields where Total and Grand Total is calculated on the fly. I would like to accomplish this using the same type of function as shown in the example javascript in this thread.


bump, bump, any help?

S
sunita_seen 2/12/2011

YES, Use multiple functions within on function ....short of