Unit calculator for length units

Hello @ivko

That’s possible, but requires more code and effort because this implementation can generate infinite loops. A possible implementation would be:

1. Insert an “HTML Content” field in the form with the following piece of code as its content:

<script>
var type = 'millimeter', value = 0;
jQuery(document).on('keyup', '[id*="fieldname2_"]', function(){
    type = 'millimeter'; value = this.value;
    fbuilderjQuery.fbuilder.calculator.defaultCalc('#cp_calculatedfieldsf_pform_1');
});
jQuery(document).on('keyup', '[id*="fieldname3_"]', function(){
    type = 'meter'; value = this.value;
    fbuilderjQuery.fbuilder.calculator.defaultCalc('#cp_calculatedfieldsf_pform_1');
});
jQuery(document).on('keyup', '[id*="fieldname4_"]', function(){
    type = 'inch'; value = this.value;
    fbuilderjQuery.fbuilder.calculator.defaultCalc('#cp_calculatedfieldsf_pform_1');
});
jQuery(document).on('keyup', '[id*="fieldname5_"]', function(){
    type = 'feet'; value = this.value;
    fbuilderjQuery.fbuilder.calculator.defaultCalc('#cp_calculatedfieldsf_pform_1');
});
jQuery(document).on('keyup', '[id*="fieldname6_"]', function(){
    type = 'yard'; value = this.value;
    fbuilderjQuery.fbuilder.calculator.defaultCalc('#cp_calculatedfieldsf_pform_1');
});
jQuery(document).on('keyup', '[id*="fieldname7_"]', function(){
    type = 'miles'; value = this.value;
    fbuilderjQuery.fbuilder.calculator.defaultCalc('#cp_calculatedfieldsf_pform_1');
});
</script>

And now implement the equation associated to the fieldname2 as follows:

(function(){
  switch(type)
  {
    case 'millimeter': return value;
    case 'meter': return value*1000;
    case 'inch': return value*25.4;
    case 'feet': return value*304.8;
    case 'yard': return value*914.4;
    case 'miles': return value*1.609e+6;
  }
})()

And in a similar way, you should implement the equations of the other calculated fields with the corresponding conversions.

Best regards.

Great! Many, many thanks! It works perfectly – only one issue – how can I round the output values to e.g. 3 digits like the prec(field,3) function?

• This reply was modified 4 years, 4 months ago by Ivko.

Hello @ivko

You can edit the equations as follows:

PREC((function(){
  switch(type)
  {
    case 'millimeter': return value;
    case 'meter': return value*1000;
    case 'inch': return value*25.4;
    case 'feet': return value*304.8;
    case 'yard': return value*914.4;
    case 'miles': return value*1.609e+6;
  }
})(),3);

Best regards.

Thank you again, it works but there appears another issue, I think its not a big thing, but I can not enter decimals in the input fields – if I try to type 4.5 then the point is ignored and the entered value is 45?

• This reply was modified 4 years, 4 months ago by Ivko.

Hello @ivko

This happens if you delete the symbol to use as decimal separator through the settings of the calculated field, or you have entered the same symbol for decimals and thousands separator.

Please, pay attention to the settings of your calculated fields.

Let me know where the issue is happening exactly, to check your form with the same values.

Best regards.

Actually it happens in every calculated field and the decimals separator is . (see Screenshot)

Also strange is the behavior: I disabled “Eval dynamically the equations associated to the calculated fields” in the form settings, disabled also the Java Cache, cleared the temporary internet files, tried it in different browsers, but the form still caculates automatically: https://gw.studios-hoettingen.de/einheiten-rechner/

• This reply was modified 4 years, 4 months ago by Ivko.

Hello @ivko

I’ve tested your form and the decimal separators are included on results:

Please, untick the checkbox: “If value entered manually, no evaluate equation” in the settings of the calculated fields.

Best regards.

Yes, the results have separators, but I can not enter a value with a separator e.g. 23.22 . I have unticked the “If value entered manually, no evaluate equation” but the behavior is very strange now ??

Hello @ivko

In your case, where there is a dependency between all the fields, the preferred solution would be to disable the dynamic evaluation of the equations and eval them by pressing a button.

1. Untick the checkbox: “Eval dynamically the equations associated with the calculated fields” in the “Form Settings” tab (https://cff.dwbooster.com/images/documentation/form-settings-tab.png)

2. Insert a button field in the form and select the “Calculate” option as the button’s type.

3. Finally, edit the piece of code into the “HTML Content” field as follow:

<script>
var type = 'millimeter', value = 0;
jQuery(document).on('keyup', '[id*="fieldname2_"]', function(){
    type = 'millimeter'; value = this.value;
});
jQuery(document).on('keyup', '[id*="fieldname3_"]', function(){
    type = 'meter'; value = this.value;
});
jQuery(document).on('keyup', '[id*="fieldname4_"]', function(){
    type = 'inch'; value = this.value;
});
jQuery(document).on('keyup', '[id*="fieldname5_"]', function(){
    type = 'feet'; value = this.value;
});
jQuery(document).on('keyup', '[id*="fieldname6_"]', function(){
    type = 'yard'; value = this.value;
});
jQuery(document).on('keyup', '[id*="fieldname7_"]', function(){
    type = 'miles'; value = this.value;
});
</script>

These modifications should solve all the issues.

Best regards.

Yes, you are right. The form works perfect now.

On my site I have now two different forms (L?ngeneinehiten and Gewichtseinheiten) and I noticed that only one of the forms works if the second ist present. I guess it is due to the [id*=”fieldname*_”] Tag. I guess I have to use different fieldnames on every form?

Hello @ivko

You should assign different class names to the forms ([CP_CALCULATED_FIELDS id="8" class="form-a"]), and then you should edit the code into the “HTML Content” field as follows:

<script>
var type = 'millimeter', value = 0;
jQuery(document).on('keyup', '.form-a [id*="fieldname2_"]', function(){
    type = 'millimeter'; value = this.value;
});
jQuery(document).on('keyup', '.form-a [id*="fieldname3_"]', function(){
    type = 'meter'; value = this.value;
});
jQuery(document).on('keyup', '.form-a [id*="fieldname4_"]', function(){
    type = 'inch'; value = this.value;
});
jQuery(document).on('keyup', '.form-a [id*="fieldname5_"]', function(){
    type = 'feet'; value = this.value;
});
jQuery(document).on('keyup', '.form-a [id*="fieldname6_"]', function(){
    type = 'yard'; value = this.value;
});
jQuery(document).on('keyup', '.form-a [id*="fieldname7_"]', function(){
    type = 'miles'; value = this.value;
});
</script>

Note: You should use different global variables in the different forms.

Best regards.

That’s the solution – great! many thanks for the great support! ??

The solution is resolved, but I have one more issue. I am not sure if I should start a new topic because it refers to the solution above?

I want to change the decimal separator from . (dot) to , (comma). I set up the comma in the input field and I put a value with comma inside then the calculator doesn`t calculate. It only calculates with the dot as comma separator. But the results are displayed correctly with comma.

What must I change to enable entering values with comma as a decimal separator?

Sample: https://gw.studios-hoettingen.de/einheiten-rechner-2/

Hello @ivko

Since the fields’ values are read directly through the dom: value = this.value; the plugin cannot manage the decimal symbols and the grouping separators. So, you must transform the value as part of the equations, as follows:

PREC((function(){
  value = (new String(value)).replace(/\./g, '').replace(/\,/g, '.')*1;
  switch(type)
  {
    case 'millimeter': return value;
    case 'meter': return value*1000;
    case 'inch': return value*25.4;
    case 'feet': return value*304.8;
    case 'yard': return value*914.4;
    case 'miles': return value*1.609e+6;
  }
})(),6);

Best regards.

Great! Thanks – works perfectly again! ??