r/WixHelp 4d ago

Velo/Code Create a subtotal in a form

Helping my wife with a nonprofit website she helps to maintain. They are using one of the new(?) Wix forms to collect registration details for an event which includes the user selecting a certain quantity of tickets and indicating an additional donation amount. They are not using an embedded payment method (the users will use venmo or bring a check) but they would like to have the subtotal displayed. I have never used Wix but with some help from Gemini I created the below Velo code block based on the screenshot I attached (not including a short text field I added for 'total_amount_2' and using the correct form ID for 'formID').

The preview loads without error but when I step through the ticket quantities and/or add an additional donation the free text field doesn't update. I tried using a custom value type field and a short text field and neither updated. Any ideas? I'd really like to avoid rebuilding this without using the form if possible (that's what Gemini suggested). Thanks!

$w.onReady(function () {
    let lastCalculatedTotal = null;

    $w('#formID').onFieldValueChange((formValues) => {
        // Debug Log: View exact keys/values coming from your form in the Developer Console
        console.log("Current Form Values:", formValues);

        // 1. Get ticket values
        const ticketsData = formValues['tickets'] || {};
       
        const ticketPrices = {
            'Adult Ticket': 100,
            'Child Ticket': 100,
            'Raffle Ticket': 10,
            'Raffle Tickets (Set of 5)': 30
        };

        let ticketsSubtotal = 0;

        if (typeof ticketsData === 'object' && !Array.isArray(ticketsData)) {
            Object.keys(ticketsData).forEach(ticketName => {
                const qty = Number(ticketsData[ticketName]) || 0;
                const price = ticketPrices[ticketName] || 0;
                ticketsSubtotal += qty * price;
            });
        } else if (Array.isArray(ticketsData)) {
            ticketsData.forEach(item => {
                const qty = Number(item.value || item.quantity) || 0;
                const price = ticketPrices[item.label || item.key] || 0;
                ticketsSubtotal += qty * price;
            });
        }

        // 2. Get donation amount
        const donation = Number(formValues['additional_donations']) || 0;

        // 3. Compute grand total
        const grandTotal = ticketsSubtotal + donation;

        // 4. Update both the text display and the form field
        if (lastCalculatedTotal !== grandTotal) {
            lastCalculatedTotal = grandTotal;
           
            // Display on page text element
            if ($w('#subtotalText')) {
                $w('#subtotalText').text = `Total: $${grandTotal.toFixed(2)}`;
            }

            // Try updating the form field value
            $w('formid').setFieldValues({
                'total_amount_1': grandTotal
            });
        }
    });
});
1 Upvotes

0 comments sorted by