Form Data is duplicating .

[Hasnni]

Description:

@kevinchappell Hello I need help my form data is duplicating in tabs . i tried but didnot figure out . anyone can help please? when i click on another tab and when i go back to first tab and click for Edit button its duplicating whole options in editor mode. var addPageTab = document.getElementById("custom-tabs-one-home-tab"); addPageTab.addEventListener("click", (click) => { let formBuilder = ""; $('.render-wrap').empty(); const formData = '[{"type":"text","required":true,"label":"MultiControlGeräte-Seriennummer","className":"form-control","name":"Gerte-Seriennummer","access":false,"subtype":"text"}, {"type":"text", "required":true,"label":"MultiControlSoftwarestand","className":"form-control", "name":"Softwarestand", "access":false, "subtype":"text"}, {"type":"text", "required":true,"label":"Maschine","className":"form-control", "name":"-Maschine", "access":false, "subtype":"text"}, {"type":"text", "required":true,"label":"Maschinebezeichnung","className":"form-control", "name":"Maschinebezeichnung", "access":false, "subtype":"text" }, { "type":"text", "required":true, "label":"Maschinentyp", "className":"form-control", "name":"Maschinentyp","access":false, "subtype":"text" }, { "type":"text", "required":false, "label":"Fahrgestellnummer", "className":"form-control", "name":"Fahrgestellnummer", "access":false, "subtype":"text" }, { "type":"text", "required":false, "label":"amtl.Kennzeichen", "className":"form-control", "name":"amtl-Kennzeichen", "access":false, "subtype":"text" }, { "type":"text", "required":false, "label":"Kunde/Kom.", "className":"form-control", "name":"Kunde--Kom", "access":false, "subtype":"text" }, { "type":"text", "required":false, "label":"Auftragsnummer", "className":"form-control", "name":"Auftragsnummer-", "access":false, "subtype":"text" }, { "type":"select", "required":false, "label":"Provider", "className":"form-control", "name":"Provider", "access":false, "multiple":false, "values":[ { "label":"O2","value":"0","selected":true },{"label":"Vodafone", "value":"1" }, {"label":"1&1","value":"2" }]}]'; render(formData); const fbTemplate = document.getElementById('fb-template'); let options = ""; options = { disabledActionButtons: ['data'], editOnAdd: true, stickyControls: { enable: true }, defaultFields: [ { "type": "text", "required": true, "label": "MultiControl Geräte-Seriennummer", "className": "form-control", "name": "Gerte-Seriennummer", "access": false, "subtype": "text" }, { "type": "text", "required": true, "label": "MultiControl Softwarestand", "className": "form-control", "name": "Softwarestand", "access": false, "subtype": "text" }, { "type": "text", "required": true, "label": " Maschine", "className": "form-control", "name": "-Maschine", "access": false, "subtype": "text" }, { "type": "text", "required": true, "label": "Maschinebezeichnung", "className": "form-control", "name": "Maschinebezeichnung", "access": false, "subtype": "text" }, { "type": "text", "required": true, "label": "Maschinentyp", "className": "form-control", "name": "Maschinentyp", "access": false, "subtype": "text" }, { "type": "text", "required": false, "label": "Fahrgestellnummer", "className": "form-control", "name": "Fahrgestellnummer", "access": false, "subtype": "text" }, { "type": "text", "required": false, "label": "amtl. Kennzeichen", "className": "form-control", "name": "amtl-Kennzeichen", "access": false, "subtype": "text" }, { "type": "text", "required": false, "label": "Kunde / Kom. ", "className": "form-control", "name": "Kunde--Kom", "access": false, "subtype": "text" }, { "type": "text", "required": false, "label": "Auftragsnummer ", "className": "form-control", "name": "Auftragsnummer-", "access": false, "subtype": "text" }, { "type": "select", "required": false, "label": "Provider", "className": "form-control", "name": "Provider", "access": false, "multiple": false, "values": [ { "label": "O2", "value": "0", "selected": true }, { "label": "Vodafone", "value": "1" }, { "label": "1&1", "value": "2" } ] } ],

            onSave: function (evt, formData) {
                toggleEdit(false);
                let Data = formBuilder.actions.getData('json', true);
                $(".render-wrap").formRender({ formData });
            }
        };
         formBuilder = $('.build-wrap').formBuilder(options);
        function render(formData) {
            $(".render-wrap").formRender();
            console.log("formbuilder saved");
            toggleEdit(false);
            $(".render-wrap").formRender({ formData });
        };
        function toggleEdit(editing) {
            document.body.classList.toggle("form-rendered", !editing);
        }

        document.getElementById("Btn_hinzufügen").onclick = function () {
            toggleEdit(true);
        };
    });

// second Tab var addtoolPageTab = document.getElementById("custom-tabs-one-profile-tab"); addtoolPageTab.addEventListener("click", (click) => { var formtoolBuilder = null; $(".tool-render-wrap").formRender( " "); const toolformData = '[ { "type": "text", "required": true, "label": "MultiControl Geräte-Seriennummer", "className": "form-control", "name": "Tool-Gerte-Seriennummer", "access": false, "subtype": "text" }, { "type": "text", "required": true, "label": "Maschine", "className": "form-control", "name": "Tool-Maschine", "access": false, "subtype": "text" }, { "type": "text", "required": true, "label": "Reifen vorne li", "className": "form-control", "name": "Reifen-vorne-li", "access": false, "subtype": "text" }, { "type": "text", "required": true, "label": "Reifen vorne re", "className": "form-control", "name": "Tool-Reifen-vorne-re", "access": false, "subtype": "text" }, { "type": "text", "required": true, "label": "Reifen hinten li", "className": "form-control", "name": "Tool-Reifen-hinten-li", "access": false, "subtype": "text" }, { "type": "text", "required": true, "label": "Reifen hinten re", "className": "form-control", "name": "Tool-Reifen-hinten-re", "access": false, "subtype": "text" } ]'; toolrender(toolformData);

        const tooloptions = {
            //disabledActionButtons: ['save'],
            editOnAdd: true,
            stickyControls: {
                enable: true
            },
            defaultFields: [{ "type": "text", "required": true, "label": "MultiControl Geräte-Seriennummer", "className": "form-control", "name": "Tool-Gerte-Seriennummer", "access": false, "subtype": "text" }, { "type": "text", "required": true, "label": "Maschine", "className": "form-control", "name": "Tool-Maschine", "access": false, "subtype": "text" }, { "type": "text", "required": true, "label": "Reifen vorne li", "className": "form-control", "name": "Reifen-vorne-li", "access": false, "subtype": "text" }, { "type": "text", "required": true, "label": "Reifen vorne re", "className": "form-control", "name": "Tool-Reifen-vorne-re", "access": false, "subtype": "text" }, { "type": "text", "required": true, "label": "Reifen hinten li", "className": "form-control", "name": "Tool-Reifen-hinten-li", "access": false, "subtype": "text" }, { "type": "text", "required": true, "label": "Reifen hinten re", "className": "form-control", "name": "Tool-Reifen-hinten-re", "access": false, "subtype": "text" }],

            //saveData();
            onSave: function (evt, formData) {
                toggleEdit(false);
                let Data = formtoolBuilder.actions.getData('json', true);
                var sss = $(".tool-render-wrap").formRender({ formData });
            }
        };
        formtoolBuilder = $('.tool-build-wrap').formBuilder(tooloptions);
        $("#Btn_tool_save").click(function () {
            toggletoolEdit(false);
            let formData = formtoolBuilder.actions.getData('json', true);
            var ss = $(".tool-render-wrap").formRender({ formData });
        });

        function toolrender(formData) {

            toggletoolEdit(false);
            $(".tool-render-wrap").formRender({ formData });
        };
        function toggletoolEdit(editing) {
            document.body.classList.toggle("tool-form-rendered", !editing);
        }
        function toggleEdit(editing) {
            document.body.classList.toggle("tool-form-rendered", !editing);
        }
        $("#Btn_tool-hinzufügen").click(function () {
            toggletoolEdit(true);
        });
    });

Screenshot - (optional)

[Hasnni]

i also solved this problem with different way. problem with form data is duplicating so i used checked to check if form data still is in builder then dont use another one and also few more checks.. if some one need help you can write me here in this issue