search

kevinchappell / formBuilder

A jQuery plugin for drag and drop form creation
https://formbuilder.online
MIT License
2.63k stars 1.4k forks source link

Issue setData #1530

Closed Fharhanamrin closed 8 months ago

Fharhanamrin commented 8 months ago

Description:

Environment Details:

Expected Behavior

Actual Behavior

Steps to Reproduce

Insert Form => set Data form => does not match what was saved

Screenshot - (optional)

insert to db

Screenshot 2024-03-04 at 00 14 28

appears after saving the data value label indonesia and label inggris wrong

Screenshot 2024-03-04 at 00 15 29 
 const fbEditor = document.getElementById("build-wrap");
    const templateSelect = document.getElementById("formTemplates");
    var fields = [{
            label: "Select",
            type: "select",
            subtype: "Select",
            icon: "✉",
            values: [{
                    label: "Label Indonesia",
                    value: "Label Inggris",
                    // selected: true
                },
                {
                    label: "",
                    value: "",
                },
                {
                    label: "",
                    value: "",
                }
            ]
        },
        {
            label: "FullName",
            type: "text",
            icon: "✉"
        }
    ];

    var options = {
        roles: {
            1: 'Form',
            2: 'Copy Data from Buyer'
        },
        replaceFields: [{
                type: "checkbox-group",
                label: "Checkbox",
                values: [{
                    label: "Label Indonesia",
                    value: "Label Inggris"
                }],
                icon: "☑"
            },
            {
                type: "radio-group",
                label: "Radio Group",
                values: [{
                    label: "Label Indonesia",
                    value: "Label Inggris"
                }],
                icon: "☑"
            }
        ],
        disableFields: [
            'autocomplete',
            'hidden',
            'number',
            'date',
            'paragraph',
            'select',
            'button'
        ],
        typeUserDisabledAttrs: {
            'text': [
                'name',
                // 'label',
                'subtype',
                // 'access',
                'helptext',
                // 'placeholder',
                'value',
                'maxlength',
                'description',
            ],
            'select': [
                'name',
                'label',
                'multiple',
                'class',
                'subtype',
                // 'access',
                'helptext',
                'placeholder',
                'value',
                'maxlength',
                'description',
            ],
            'checkbox-group': [
                'name',
                'label',
                'multiple',
                'class',
                'subtype',
                // 'access',
                'helptext',
                'placeholder',
                'value',
                'maxlength',
                'description',
                'toggle',
                'inline',
                'other'
                // 'options'
            ],
            'radio-group': [
                'name',
                'label',
                'multiple',
                'className',
                'subtype',
                // 'access',
                'helptext',
                'placeholder',
                'value',
                'maxlength',
                'description',
                'toggle',
                'inline',
                'other'
                // 'options'
            ],
            'file': [
                'label',
                'className',
                'name',
                'multiple',
                'class',
                // 'access',
                'description',
                // 'placeholder',
                'value'
            ],
            'header': [
                'label',
                'className',
                'name',
                'multiple',
                'class',
                // 'access',
                'description',
                'placeholder',
                'value'
            ]
        },
        typeUserAttrs: {
            '*': {
                lebel_id: {
                    label: 'Label Indonesia',
                    value: 'Label Indonesia',
                },
                label_en: {
                    label: 'Label Inggris',
                    value: 'Label Inggris',
                },
            },
            // file: {
            //     roles: {
            //         1: 'Form',
            //         2: 'Copy Data from Buyer'
            //     },
            // },
            text: {
                className: {
                    label: 'Responsive Web Page',
                    options: {
                        'col-md-1 form-control': 'col-md-1',
                        'col-md-2 form-control': 'col-md-2',
                        'col-md-3 form-control': 'col-md-3',
                        'col-md-4 form-control': 'col-md-4',
                        'col-md-5 form-control': 'col-md-5',
                        'col-md-6 form-control': 'col-md-6',
                        'col-md-7 form-control': 'col-md-7',
                        'col-md-8 form-control': 'col-md-8',
                        'col-md-9 form-control': 'col-md-9',
                        'col-md-10 form-control': 'col-md-10',
                        'col-md-11 form-control': 'col-md-11',
                        'col-md-12 form-control': 'col-md-12',
                    },
                    style: 'border: 1px solid red'
                },
                roles: {
                    1: 'Form'
                },
                // x:true
            },
            select: {
                className: {
                    label: 'Responsive Web Page',
                    options: {
                        'col-md-1 form-control': 'col-md-1',
                        'col-md-2 form-control': 'col-md-2',
                        'col-md-3 form-control': 'col-md-3',
                        'col-md-4 form-control': 'col-md-4',
                        'col-md-5 form-control': 'col-md-5',
                        'col-md-6 form-control': 'col-md-6',
                        'col-md-7 form-control': 'col-md-7',
                        'col-md-8 form-control': 'col-md-8',
                        'col-md-9 form-control': 'col-md-9',
                        'col-md-10 form-control': 'col-md-10',
                        'col-md-11 form-control': 'col-md-11',
                        'col-md-12 form-control': 'col-md-12',
                    },
                    style: 'border: 1px solid red'
                },
                roles: {
                    1: 'Form'
                },

            },
            'checkbox-group': {
                roles: {
                    1: 'Form',
                    2: 'Copy Data from Buyer'
                },
                className: {
                    label: 'Responsive Web Page',
                    options: {
                        'col-md-1': 'col-md-1',
                        'col-md-2': 'col-md-2',
                        'col-md-3': 'col-md-3',
                        'col-md-4': 'col-md-4',
                        'col-md-5': 'col-md-5',
                        'col-md-6': 'col-md-6',
                        'col-md-7': 'col-md-7',
                        'col-md-8': 'col-md-8',
                        'col-md-9': 'col-md-9',
                        'col-md-10': 'col-md-10',
                        'col-md-11': 'col-md-11',
                        'col-md-12': 'col-md-12',
                    },
                    style: 'border: 1px solid red'
                }
            }
        },
        onSave: function(evt, formData) {
            console.log("formbuilder update saved");
            UpdatePostCustomForm(formBuilder.actions.getData());
            // console.log(JSON.stringify(formBuilder.actions.getData()));
        }
    };
    const formBuilder = $(fbEditor).formBuilder({
        ...options,
        fields
    });

    // const formBuilder = $(fbEditor).formBuilder();

    $(document).ready(function() {
        GetDetailForm(formBuilder);
        document.getElementById('getJS').addEventListener('click', function() {
            console.log(JSON.stringify(formBuilder.actions.getData()));
        });
    });

    function GetDetailForm(formBuilder) {
        setTimeout(() => {
            console.log("load 1 kali aja ya");
            $.ajax({
                type: "POST",
                url: "<?= Url::to(['custom-form/get-custom-form-id']) ?>",
                data: {
                    id: "<?= $id_custom_form; ?>"
                },
                dataType: "JSON",
                success: function(response) {
                    console.log(response.data);
                    formBuilder.actions.setData(JSON.parse(response.data));
                }
            });
        }, 2000);
    }
Fharhanamrin commented 8 months ago

value from api [{"type":"text","required":false,"label":"First Name","access":false,"lebel_id":"Nama Depan","label_en":"Nama Belakang","className":"col-md-4 form-control"}]

lucasnetau commented 8 months ago

Cannot replicate. What version are you using?

    window.formBuilder = await $('#fb-editor').formBuilder({
        typeUserAttrs: {
            '*': {
                lebel_id: {
                    label: 'Label Indonesia',
                    value: 'Label Indonesia',
                },
                label_en: {
                    label: 'Label Inggris',
                    value: 'Label Inggris',
                },
            },
        },
        formData: [],
        i18n: {
            location: "https://raw.githubusercontent.com/kevinchappell/formBuilder-languages/master/",
        },
    }).promise;

    window.formBuilder.actions.setData([{"type":"text","required":false,"label":"First Name","access":false,"lebel_id":"Nama Depan","label_en":"Nama Belakang","className":"col-md-4 form-control"}]);
image
Fharhanamrin commented 8 months ago 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
<script src="https://formbuilder.online/assets/js/form-builder.min.js"></script>
lucasnetau commented 8 months ago

Have you verified that your code is loading anything? Try setting values for all other fields and checking they load.

Fharhanamrin commented 8 months ago
Screenshot 2024-03-04 at 11 19 10 Screenshot 2024-03-04 at 11 19 49

does not change to replace the latest data from the data in the settings

Fharhanamrin commented 8 months ago

the value is not included in the input value?

Screenshot 2024-03-04 at 11 28 22
lucasnetau commented 8 months ago

OK, I've track down the issue to a regression in commit https://github.com/kevinchappell/formBuilder/commit/bfa92e8f7adfa0eb97966028500e8299b572b2d3

I'll prepare a PR to fix it shortly

lucasnetau commented 8 months ago

Please try the patch in https://github.com/kevinchappell/formBuilder/pull/1531 or wait until it has been released for a bug fix.

Fharhanamrin commented 8 months ago
Screenshot 2024-03-04 at 20 08 48

problem solved, thank you sir When will it be released into production?

github-actions[bot] commented 8 months ago

:tada: This issue has been resolved in version 3.19.5 :tada:

The release is available on:

Your semantic-release bot :package::rocket: