Hello L_Cypherus,
There is another option with a little bit of JavaScript and the Visforms 'Frontend Webassets'.
Frontend Webassets:
docs.joomla-4.visforms.vi-solutions.de/e...-frontend-webassets/
All settings are made in the form:
docs.joomla-4.visforms.vi-solutions.de/e...are-made-in-the-form
With the following small JavaScript you can sum up any number of fields in one go and output the sum in a result field:
Code:
// calculate sum of field group labeled by common CSS-class 'css-number-add'
jQuery(document).ready(function() {
console.log('FEWA script loaded');
jQuery('.css-number-add').bind('change keyup mouseup mousewheel', function() {
// re-calculate on value change
calculateSum();
});
jQuery('.visform').bind('visformsInitialised', function() {
// re-calculate on form is initialized
calculateSum();
});
});
function calculateSum() {
let sum = 0;
jQuery('.css-number-add').each(function() {
let val = jQuery(this).val();
// skip all of: is not a number
if(isNaN(val)) return true;
// keep multiplication with 1, otherwise it would be a simple string concatenation
sum += 1 * val;
});
jQuery('.css-number-add-result').val(sum);
}
The form:
vi-solutions.de/forum-uploads/fewa-examp...-fields-sum_form.png
The procedure:
1 - Set the field's own CSS class 'css-number-add' for all input fields for the total sum
The field configuration of the result field:
vi-solutions.de/forum-uploads/fewa-examp...sum_input-fields.png
2 - Set the field's own CSS class 'css-number-add-result' for the result field
The field configuration of an input field:
vi-solutions.de/forum-uploads/fewa-examp...sum_result-field.png
3 - Paste the above script in the form configuration, tab 'Frontend Webassets', there in the 'Form' tab into the 'JavaScript' text field
The form configuration, tab 'Frontend Webassets':
vi-solutions.de/forum-uploads/fewa-examp...-fields-sum_fewa.png
I have set the result field 'number-add-result' to 'read-only' in the field configuration.
Kind regards, Ingmar