The Community forums are being phased out in favor of a new Slack group.
Add your email address below to get an invitation to join the community slack group

Slack Signup
Newsletter Optin
Help Desk

Using dynamic fields in javascript calculations

Labels

This Discussion is public

Notifications

Quite often the problem occurs that one might need a data from entries field in the calculation of other field values. This is the case when you need a property or a value from a linked form which is connected to the current form via a data from entries field.

In JavaScript my solution works as follows:

The data from entries field is displayed as a drop down menu and has the field id number 99 . This type of field has two "values" - the entry id number of the entry it is displaying data from and - the actually displayed text.

1. getting the different values:

var linkedEntryID ;

var displayedText ;

linkedEntryID = $('select[name="item_meta[99]"]').find(':selected').val() ;

displayedText = $('select[name="item_meta[99]"]').find(':selected').text();

For a field calculation the script should be executed when any of the variables (for instance var1, var2, var3) that determine the calculated field change. This is why the entire script is embedded in the $('var1,var2,var3').change(function(){/*script goes here*/}) which is embedded into jQuery(document).ready(function($){/*change function goes here*/}) ; function.

2. To execute the script when the data from entries selection changes the entire construction look like:

jQuery(document).ready(function($){

$('select[name="item_meta[99]"], var2, var3').change(function(){

/*script goes here*/

}) ;

}) ;

Attention has to be paid to the correct use of the ' and '' signs in JavaScript. I think they are not completely interchangeable. They act like different types of brackets. Before using the other one the first type must have been closed.

So, you could write as well:

jQuery(document).ready(function($){

$("select[name='item_meta[99]'], var2, var3").change(function(){

/*script goes here*/

}) ;

}) ;

but not:

jQuery(document).ready(function($){

$('select[name='item_meta[99]'], var2, var3').change(function(){

/*script goes here*/

}) ;

}) ;

With the linkedEntryID the information is available to get data from the linked entry. I just don't know how to do this via javascript - it is probably not implemented since it requires interaction with the server.

In a PhP script I use FrmProEntriesController::get_field_value_shortcode(array('field_id' => 12, 'entry_id' => linkedEntryID));

An interesting observation is that I could only use one of the two commands successfully:

linkedEntryID = $(‘select[name="item_meta[99]“]’).find(‘:selected’).val() ;

displayedText = $(‘select[name="item_meta[99]“]’).find(‘:selected’).text();

I could either get the text value of the field or the linkedEntryID not both in a script.

I finally solved the problem to access data from the linked form by adding a second data from entry field that would show the requested information when the first data from entry field was set to anything (conditional display - this links the second field to the entry accessed in the first data from entries field). The second data from entries field showing the desired information is mounted after a section heading that will never show in the form (unfulfillable or extremely unlikely conditional display). Even though the field does not show up in the form its data can be accessed with conventional javascript access code - in my case:

desiredLinkedDataValue = $("#field_field_key_here").val() ;

because I configured the second data from entry field to just show the value. With this configuration I can do calculation based on information stored in another form which is selected by the user via its form name or any other information meaningful to the user but not directly relevant for the calculation and the script does the calculation every time the user changes the selection in the first data from entries field.

Remains a final problem to solve (which I haven't).

Even though I can trigger the java script to calculate the result when the user changes the selection in the data from entries field 99 by including select[name='item_meta[99]‘] into the arguments of the .change function the second data from entries field does not produce the desired value from the newly selected entry.

This is probably a delicate timing problem. The javascript runs first before the field is updated according to the new selection of the first data from entries field.

With Stephanie's help I solved the problem to do a calculation in javascript based on the value of a field that is a data from entries field with condition show based on another data from entries field which is used to make a selection.

The basic problem turned out to be that no jQuery handler can be defined on second data from entries field because its value changes by a programmatic event and not by user interaction. This is not detected by javascript or jQuery events. In addition a .change() event can not be triggered manually on this field because if it is mounted in the form with conditional logic using show it is not editable. .change() events can not be triggered on not editable fields.

My solution goes as follows:

I introduced a second .change() handler for the data from entries drop down menu.

When the user makes a choice on the data from entries - drop down menu a .change() event is triggered on this field. This launches a timer which will run for a limited amount of time and monitors the second data from entries field. If this field changes its value the timer initiates a .change() event on any one of the editable fields that are listed in the .change() handler to calculate the end value and it terminates itself. If no value change occurs after the selection the timer will end itself when its lifetime expires.

Not the simplest solution - but it works and opens up a considerable variable space to base calculation upon. Since the remote fields have to be mounted in a hidden section of the original document all calculations are well controlled and should not go out of hand.

In code:

99 : ID number of the data from entries field
#field_parameter : data from entries field with conditional show based on field 99, just show value format
#field_editable : editable field in this form that will launch the value calculation

<script type="text/javascript">
var oldValue ;
var aTimer ;
var counter ;

jQuery(document).ready(function($){
$('select[name="item_meta[99]"]').change(function(){
oldValue = $("#field_parameter").val() ;
if (!(aTimer == undefined) ) clearInterval(aTimer) ;
counter = 0 ;
aTimer = setInterval(function(){
var newValue = $("#field_parameter").val() ;
counter ++ ;
if ( (newValue != oldValue) || (counter > 10) ){
if (newValue != oldValue) $("#field_editable").change() ;
clearInterval(aTimer) ;
}
} , 200) ;
}) ;

$('#field_editable').change(function(){
/* value calculation here */
}) ;
}) ;

</script>

I just have to say, I'm very impressed with your code here. It works well and I never would have come up with this on my own!

Thanks for the compliments. I am happy that I could return a tiny contribution to this impressive product.

With regards

I'd like to give your code a try.

Do I just drop your code into my them editor and then replace the variables with my data from entries field?

When you add javascript to a form, you can put it in your form's Settings > Customize HTML in the Before Fields.

Discussion closed.