Builder select-option value problem...

[merett]

I save form json in my database. But When i call again and render with form-builder option value and text not bind. Same json is working in form-render.

"[{"type":"select","required":false,"label":"Select","className":"form-control","name":"select-1616509735994","values":[{"label":"Test1","value":"Test1","selected":false},{"label":"Test2","value":"Test2","selected":false},{"label":"Test3","value":"Test3","selected":false}]},{"type":"text","required":true,"label":"Text Field","className":"form-control","name":"text-1616509738788","subtype":"text"},{"type":"textarea","subtype":"tinymce","required":false,"label":"Text Area","className":"form-control","name":"textarea-1616509740435"},{"type":"text","subtype":"datetime-local","required":false,"label":"Date Time","className":"form-control","name":"text-1616509741416"}]"

`$('textarea').formBuilder({ // additional form action buttons- save, data, clear actionButtons: [],

                    // enables/disables stage sorting
                    allowStageSort: true,

                    // append/prepend non-editable content to the form.
                    append: false,
                    prepend: false,

                    // control order
                    controlOrder: [
                        'autocomplete',
                        'button',
                        'checkbox-group',
                        'checkbox',
                        'file',
                        'header',
                        'hidden',
                        'number',
                        'paragraph',
                        'radio-group',
                        'select',
                        'text',
                        'textarea',
                    ],

                    // or left
                    controlPosition: 'left',

                    formData: res.form.form_json,

                    // or 'xml'
                    dataType: 'json',

                    // default fields
                    defaultFields: [],

                    // save, data, clear
                    disabledActionButtons: [
                        'data'
                    ],

                    // disabled attributes
                    disabledAttrs: [
                        'access',
                        'toggle',
                        'other',
                        'inline',
                        'className',
                        'name',
                        'multiple'
                    ],

                    // disabled buttons
                    disabledFieldButtons: {
                    },

                    // disabled subtypes
                    disabledSubtypes: {
                        text: ['password','color'],
                        textarea: ['quill']
                    },

                    // disabled fields
                    disableFields: [
                        'button',
                        'date',
                        'hidden',
                        'file',
                        'checkbox-group',
                        'radio-group'
                    ],

                    // disables html in field labels
                    disableHTMLLabels: false,

                    // removes the injected style
                    disableInjectedStyle: false,

                    // opens the edit panel on added field
                    editOnAdd: false,

                    // adds custom control configs
                    fields: [
                        {
                            label: "Date Time",
                            type: "text",
                            subtype: "datetime-local",
                            icon: "<span class=\"flaticon-calendar-with-a-clock-time-tools\"></span>\n"
                        }
                    ],

                    // warns user if before the remove a field from the stage
                    fieldRemoveWarn: true,

                    // DOM node or selector
                    fieldEditContainer: null,

                    // add groups of fields at a time
                    inputSets: [],

                    // custom notifications
                    notify: {
                        error: console.error,
                        success: console.log,
                        warning: console.warn,
                    },

                    // callbakcs
                    onAddField: (fieldData, fieldId) => fieldData,
                    onAddOption: () => null,
                    onClearAll: () => null,
                    onCloseFieldEdit: () => null,
                    onOpenFieldEdit: () => null,
                    onSave: function(evt, formData) {
                        console.log(formData);
                        $.ajax({
                            type:"POST",
                            url: HOST_URL+"/customersapi/formupdate",
                            data: {'form_id':url,'form_name':$('#kt-form-name').val(),'form_json':formData},
                            success:function (data) {
                                console.log(data)
                                var res = JSON.parse(data);
                                if(res.error==="true"){
                                    if(res.code=="00"){
                                        window.location.href = HOST_URL+'/customerslogin';
                                    }
                                    foreach(res.msg,function (msg) {
                                        toastr.error(msg);
                                    })
                                }else {
                                    foreach(res.msg,function (msg) {
                                        toastr.success(msg);
                                    })
                                }
                            },
                            error:function (err){

                            }
                        });
                    },

                    // replaces an existing field by id.
                    replaceFields: [],


                    // smoothly scrolls to a field when its added to the stage
                    scrollToFieldOnAdd: true,

                    // shows action buttons
                    showActionButtons: true,

                    // sortable controls
                    sortableControls: true,

                    // sticky controls
                    stickyControls: {
                        enable: true,
                        offset: {
                            top: 5,
                            bottom: 'auto',
                            right: 'auto',
                        },
                    },

                    // defines new types to be used with field base types such as button and input
                    subtypes: {
                        text: ['datetime-local'],
                        date: ['datetime-local']
                    },

                    // defines a custom output for new or existing fields.
                    templates: {},

                    // defines custom attributes for field types
                    typeUserAttrs: {},

                    // disabled attributes for specific field types
                    typeUserDisabledAttrs: {},

                    // adds functionality to existing and custom attributes using onclone and onadd events. Events return JavaScript DOM elements.
                    typeUserEvents: {},

                });`

[veks]

Try this

var formBuilder = $editor.formBuilder(options); var $control_form = $('input[name="brt-builder-fc"]'); var $formData = $control_form.val();

$(document).on('fieldAdded viewData userDeclined modalClosed modalOpened formSaved fieldRemoved fieldRendered fieldEditOpened fieldEditClosed', function () { $control_form.val(formBuilder.formData); });

setTimeout(function () { formBuilder.actions.setData($formData); }, 300);

[lucasnetau]

Can you please describe what is not working for you?

Your test case "[{"type":"select","required":false,"label":"Select","className":"form-control","name":"select-1616509735994","values":[{"label":"Test1","value":"Test1","selected":false},{"label":"Test2","value":"Test2","selected":false},{"label":"Test3","value":"Test3","selected":false}]},{"type":"text","required":true,"label":"Text Field","className":"form-control","name":"text-1616509738788","subtype":"text"},{"type":"textarea","subtype":"tinymce","required":false,"label":"Text Area","className":"form-control","name":"textarea-1616509740435"},{"type":"text","subtype":"datetime-local","required":false,"label":"Date Time","className":"form-control","name":"text-1616509741416"}]"

is rendering fine. You have no values set to be restored