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
toqeer.94
(Muhammad Toqeer Iqbal)
May 21, 2024, 11:52am
2
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
toqeer.94
(Muhammad Toqeer Iqbal)
May 21, 2024, 12:01pm
4
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
toqeer.94
(Muhammad Toqeer Iqbal)
May 21, 2024, 12:07pm
7
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
toqeer.94
(Muhammad Toqeer Iqbal)
May 21, 2024, 12:40pm
10
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!
1 Like
toqeer.94
(Muhammad Toqeer Iqbal)
May 21, 2024, 12:59pm
12
Happy to help! don’t forget to mark the solution and close the Thread :) @Ryan_Smith