Required checkbox group does not render checked values

[fillae]

Description:

A checkbox group that is required does not render saved checked values. The checkboxes render correctly if the checkbox group is not required.

Environment Details:

• formBuilder Version: 3.1.3
• Browser: Chrome
• OS: Win 10

Expected Behavior

The checkboxes should display as checked if the checkbox is present in the userData array.

Actual Behavior

The checkboxes do not show as checked for required checkbox groups.

Steps to Reproduce

var formData = [ { "type": "checkbox-group", "required": true, "label": "Checkbox Group", "name": "checkbox-group-1550096191629", "values": [{ "label": "Option 1", "value": "option-1" }, { "label": "Option 2", "value": "option-2" }], "userData": ["option-1"] }]; var formRenderOpts = { formData }; $('#fb-viewer').formRender(formRenderOpts);

I have implemented the following work-around, but I want to make sure I am not missing a configuration item somewhere.

var data = formData; if (typeof data !== 'object') { data = JSON.parse(data); } $.each(data, function (i, item) { if (item.type === "checkbox-group") { if (typeof item.required !== 'undefined' && item.required === true) { if (item.userData.length > 0) { $('.field-' + item.name).find('input').each(function (i, e) { if ($.inArray(e.value, item.userData) !== -1) { $(e).prop('checked', true); } }); } } } });

Screenshot - (optional)

[ThaiHM]

I had the same issue with fillae. Can you update on next version

[nmase88]

I'm also experiencing this issue, I'm going to put in a temporary work around to my solution by setting selected on values property. Edit: Turns out this is more tricky than I expected as the Other field doesn't get included in the values.

[AndTessitore]

Same issue here! Still not fixed!

[vardank37]

I am also facing the same issue, @fillae @ThaiHM @nmase88 @AndTessitore Anyone able to fix it?

Here's the link to the sandbox to see the error https://codesandbox.io/s/stoic-zhukovsky-sbuhj?fontsize=14

@kevinchappell what could be the reason behind this?

[dougauerbach]

Same issue here. Looking forward to fix in a new version.

[dougauerbach]

Folks, there is a newer version of this plugin that I suggest using if possible. https://github.com/Draggable/formeo/tree/master/docs

[W1-PopelierE]

I think it is possible in this plugin 👀 Will check when I arrive at work

[webbie87]

Hi! Any news about this issue?

[instagibb]

This issue is pretty annoying. As far as I can tell this is caused by the following:

    if (type === 'checkbox-group' && data.required) {
      this.onRender = this.groupRequired
    }

on Line 35-37 of select.js

This replaces the onRender function later on in select.js which is responsible for setting the userData of the checkbox-group. I don't understand what groupRequired is doing, but it never seems to even consider the userData.

[instagibb]

Any update on this one @kevinchappell? Quite frustrating to have to hack around it

[Allenci]

I'm facing same problem here, after some research, I use simple JQuery to do this, maybe can help here.

So in my use case, user submit the formData with checkbox-group data and store in DB.

When user edit the form, I use formRender( ) to render the form

let $container = $('#form-render');

var formData = JSON.parse(<?php echo $form->modules; ?>);

var options = {
    formData,
    dataType: 'json',
};

$container.formRender(options);

Now, If I console.log(window.JSON.parse(formData)) , I can get user checked data,

BUT, when I use $container.formRender('userData') , the checked data is undefined.

So I think just bind it by hand after form rendered

// document ready and  form rendered

var userData = JSON.parse( jsonFromDb );

userData.forEach( ( column , key ) => {

    if( column.type == 'checkbox-group' ) {

        column.userData.forEach( ( checked_value , key ) => {

            //  JQuery pick all checkbox-group element by name

            var cbxElements = $('[name="'+ column.name + '[]"]')

            $.each( cbxElements , (index, element) => {

                if( checked_value  == $(element).val() ) {

                    $(element).prop( "checked", true );

                }

            })

        })

    }

})

It work for me.

Hopefully, this idea can help.

[GuiZ88]

I had the same problem but with le cheked to true. Basically if they were true by default there is no way to set them to false.

The only solution is when saving from making them false.

    FormData = this.fbBuildedRender.userData; 
    // RESET SELECTED
    $.each(FormData, function(key, value)
    {

        if (value.type == "checkbox-group")
        {
            $.each(value.values, function(k, v)
            {
                v.selected = false;
            });
        }
    });

I hope it will be useful.

[BenMoses]

This issue looks like it's fixed in the latest version?

Is it fixed or is there some side-affect? If it is fixed can we close this ticket and I will update to the latest version.

Steps:

1. Link to Demo from above ^ https://codesandbox.io/s/stoic-zhukovsky-sbuhj?fontsize=14&file=/src/index.js
2. Right hand side shows the bottom checkbox group is empty [Bug]
3. Bottom left corner, under dependencies, change formBuilder to 3.8.3

4. Right hand side now shows the bottom checkbox group to be filled [Fixed?]

[pvin]

I also faced the same issue. handled it by looping the JSON to set the required false. For me its just show page and require * is not a issue.

[lucasnetau]

Issue was resolved in https://github.com/kevinchappell/formBuilder/pull/1233 released in v3.7.4