Checkbox data on webflow forms Answered

Post author
Jonathan Gallegos

Anyone know how to send through checkbox data on webflow forms with values other than true/false or on/off?

Trying to connect a multiselect form pass through data to a make.com scenario. i.e. Select your three favorite colors:
✅ Green
✅ Blue
✅ Red

Comments

1 comment

  • Comment author
    Marc Hudson

    Here’s a simplified version of what I use. I send with AJAX to Make, so I found this problem with multi-select fields as well as checkbox (maybe radios too…, can’t remember).

    If you add an ajax-submit class to your form and change the checkbox names to color[]="blue" color[]="red" , etc… it should send through the values for you.

    You could further simplify this code.

    <script>
    const getFormValues = function($form, type) {
        var formData = new FormData($form[0]),
            groupedArrays = {};
        
        // Re-build certain field's values.
        $($form).find(':input').each(function() {
            var $element = $(this),
                key = $element.attr('name'),
                value = $element.val();
            
            // Re-build multi-select values.
            if ($element.is('select[multiple]')) {
                formData.set(key, $element.val());
            }
            // Re-build checkbox values for grouped elements.
            else if ($element.is(':checkbox:checked') && key.endsWith('[]')) {// Check if checkbox name ends with [].
                var elementName = key.slice(0, -2);// Remove [].
                if (!groupedArrays[elementName]) {
                    groupedArrays[elementName] = [];// Create array if not present.
                }
                groupedArrays[elementName].push(value);
                formData.delete(key);// Remove the individual entry.
            }
        });
        // Merge rebuilt groupedArrays into formData.
        for (elementName in groupedArrays) {
            formData.set(elementName, groupedArrays[elementName]);
        }
    
        if (type == 'formData') {
            return formData;
        }
        if (type == 'json') {
            // Convert to JSON.
            return JSON.stringify(Object.fromEntries(formData));
        }
        // JS Object.
        return Object.fromEntries(formData);
    };
    
    
    $(function() {
    //  General AJAX form submit handler.
    $('.ajax-submit').on('submit', function(e) {
        e.preventDefault();
    
        var $form = $(this),
            data = getFormValues($form);
    
        console.log(data);
    
        $.ajax({
            url: $form.attr('action'),
            method: $form.attr('method'),
            data: data,
            success: function(data, textStatus) {
                console.log(textStatus, data);
            },
            error: function(jqXHR, textStatus, errorThrown) {
                console.log(textStatus, errorThrown);
            }
        });
    });
    });
    </script>
    0

Please sign in to leave a comment.