Calculating Form Number Input Fields

Hi There
I need help calculating a total of number inputs in the webflow form?
For example:


I need to calculated and show the total amount of devices on the form itself.
read-only link

I know there is custom code to add i just don’t know how to do it.
Any advise on how to achieve this without any third party integration would be much appreciated.
Thank you

Hello @Ryan_Smith Do you want to show the total number as a result? due to password protection I am not able to access the given link

Hi @toqeer.94
Yes please as a result, I’ve removed password protection
Thanks for the reply

Please confirm if you want to show like this,

one more question here, do you want to send this data as output after submission right?

1 Like

@toqeer.94 that would be perfect
Thanks

Yes also for the data output

1 Like

can you add one more field there and add id’s to all fields

Android field id = android-device
Chromebook field id = chromebook-device
macOS field id = macos-device
Windows field id = windows-device
total device field = total-device

change these and publish then i will send you JS code to add

1 Like

Cool published and updated with ids
Thank you

1 Like

@toqeer.94 Apologies I updated the total amount input to just the plain input and not the number input

Can you add this code in footer and let me know if it works @Ryan_Smith

<script>
document.addEventListener("DOMContentLoaded", function() {
    const deviceInputs = document.querySelectorAll('#chromebook-device, #windows-device, #macos-device, #android-device, #ios-device');
    const totalInput = document.getElementById('total-device');

    deviceInputs.forEach(input => {
        input.addEventListener('input', function() {
            let totalDevices = 0;
            deviceInputs.forEach(input => {
                const number = parseInt(input.value, 10) || 0;
                totalDevices += number;
            });
            totalInput.value = totalDevices;
        });
    });
});
</script>
1 Like

@toqeer.94 Thank you so much works perfectly! :pray:

1 Like

Happy to help! don’t forget to mark the solution and close the Thread :) @Ryan_Smith