also – can the “number input” field show units? (like “kg”)?
Thx again!
Hello @hskokanek
Concerning to your first question. Assuming the DropDown field is the fieldname1, and the possible values are: 1,2, and 3 and the texts to display: First text, Second text and Third text, respectively. The equation to implement could be:
(function(){
switch(fieldname1){
case 1: return 'First text';
case 2: return 'Second text';
case 3: return 'Third text';
}
})()
Of course, there are many other possible implementations.
Concerning to your second question. The Kg text into a number field makes it invalid, however, you can emulate it with a currency field, entering the text Kg as the currency symbol in the field’s settings.
Best regards.
Wow, thanks for the fast heads up!
Actually I have tried the Currency field, but for some reason it is not displaying the currency symbol/description in the form on the live site (it is showing in the back-end, though)
In the suggested equation – where in the following do I put the actual equation like PREC(fieldname2*fieldname3) to return the calculation? Apologies, if this is out of the scope of this forum. I couldnt get the suggested code to work. Thx
(function(){
switch(fieldname3){
case Ibuprofen: return ‘First text’;
case Nurofen: return ‘Second text’;
case Panadol: return ‘Third text’;
case Paralen: return ‘Fourth text’;
}
})()
Hello @hskokanek
Your are merging different things here. Do you want to display a text, the result of the mathematical operation, or concatenate both?
By the way there are different issues in your code. First, the PREC operation requires two attributes: PREC(X,Y) returns the number X rounded with Y decimal places. If you want rounding the result to the nearest integer, the recommended operation would be: ROUND
Second, in javascript the text values should be wrapped between single or double quotes. For example, merging both equations, the solution would be:
(function(){
var result = ROUND(fieldname2*fieldname3);
switch(fieldname3){
case 'Ibuprofen': return 'First text: '+result;
case 'Nurofen': return 'Second text: '+result;
case 'Panadol': return 'Third text: '+result;
case 'Paralen': return 'Fourth text: '+result;
}
})()
Best regards.
Thx, this would be my poor explanation 🙁 Apologies for that. That is probably why the function is not returning anything.
The drop down front-end options (fieldname3) are ‘text values’, however, for the back-end calculation I am using a ‘numerical value’ assigned to each of the text options and then displaying the calculation result lets say in (fieldname1) Calculated field.
Maybe it is actually better to display that using the Summary field (where fieldname1 is the Calculated field)
(function(){
fieldname1;
switch(fieldname3){
case 'Ibuprofen': return 'First text';
case 'Nurofen': return 'Second text';
case 'Panadol': return 'Third text';
case 'Paralen': return 'Fourth text';
}
})()
-
This reply was modified 7 years, 3 months ago by
hskokanek.
-
This reply was modified 7 years, 3 months ago by hskokanek.
-
This reply was modified 7 years, 3 months ago by hskokanek.
Hello @hskokanek
In the equations are used always the values of fields and not their texts. So, you cannot compare directly with the texts: Ibuprofen, Nurofen, Panadol or Paralen
Furthermore, in your case there is a possible conflict because there are choices in the field with the same value (the values of the first and second choices are 10, and for the third and fourth choices 15)
What would be the solution?
There are different alternatives. For example, implements your equation as follows:
(function(){
var result = ROUND(fieldname2*fieldname3),
text = jQuery('[id="'+getField(3).name+'"] option:selected').text();
switch(text){
case 'Ibuprofen': return 'First text: '+result;
case 'Nurofen': return 'Second text: '+result;
case 'Panadol': return 'Third text: '+result;
case 'Paralen': return 'Fourth text: '+result;
}
})()
Best regards.
OK this is really cool!. In order to be able to style the values separately, I have split this using two Summary fields and the code:
(function(){
var result = ROUND(fieldname2*fieldname3),
text = jQuery('[id="'+getField(3).name+'"] option:selected').text();
switch(text){
case 'Ibuprofen': return 'maximálně však 3 dávky denně po 8mi hodinách';
case 'Nurofen': return 'maximálně však 3 dávky denně po 8mi hodinách';
case 'Panadol': return 'maximálně však 4 dávky denně po 6ti hodinách';
case 'Paralen': return 'maximálně však 4 dávky denně po 6ti hodinách';
}
})()
Though the ‘var result’ function is now unnecessary probably (but code will not work without it).
Is it possible to build the fields to be next to each other (ie. as in two columns) in the form builder?
BTW – if the custom CSS through the Customize Form Design is being used, it will not be applied if the form is placed into a PopUp.
Thanks!! This is unheard of level of support!!
Hello @hskokanek
Yes, the code is unnecessary, but you need to tell the equation that depends on the fieldame3, to evaluate it every time the fieldname3 field varies its value. So, you can edit the equation as follows:
(function(){
var tmp = fieldname3,
text = jQuery('[id="'+getField(3).name+'"] option:selected').text();
switch(text){
case 'Ibuprofen': return 'maximálně však 3 dávky denně po 8mi hodinách';
case 'Nurofen': return 'maximálně však 3 dávky denně po 8mi hodinách';
case 'Panadol': return 'maximálně však 4 dávky denně po 6ti hodinách';
case 'Paralen': return 'maximálně však 4 dávky denně po 6ti hodinách';
}
})()
If you want to distribute the form’s fields in columns, please, read the following post in the plugin’s blog:
https://cff.dwbooster.com/blog/2019/01/06/columns/?index=1
The styles defined into the “Customize Form Design” attribute are applied to the form’s preview too, but depends on the way the styles are defined.
Best regards.
Thanks a lot for this. It is extremely helpful.
One more thing I cannot figure out – how do you prevent the form from being sent/page reloaded upon hitting Enter/Return for example after filling in the first Number field.
The calculates all in real time, so there is no need to submit the form and most of the user will press Enter/Return in order to move onto the next field, which, however, causes the entire form to reload (= poor user experience :/)
Thanks – I am sure this will be somewhere in settings, but I cannot locate that.
BR,
H.
Hello @hskokanek
The pressing the key enter in the HTML standard makes the form submit. The alternative would be insert a “HTML Content” field in the form with the following piece of code as its content:
<script>
jQuery(document).on('keypress', '[id*="fieldlist"] :input', function(evt){if(evt.which == 13 || evt.which == 32) return false;});
</script>
Best regards.
