<link rel="stylesheet" type="text/css" href="../../codebase/skins/dhtmlxform_dhx_skyblue.css">
    <link rel="stylesheet" type="text/css" href="../../../dhtmlxTabbar/codebase/dhtmlxtabbar.css">
    <script src="../../codebase/dhtmlxcommon.js"></script>
    <script src="../../../dhtmlxTabbar/codebase/dhtmlxcontainer.js"></script>
    <script src="../../../dhtmlxTabbar/codebase/dhtmlxtabbar.js"></script>
    <script src="../../codebase/dhtmlxform.js"></script>
    <script src="../../codebase/ext/dhtmlxform_backup.js"></script>
    <style>
        div#tabbar {
            position: relative;
            width: 340px;
            height: 170px;
            margin-top: 50px;
            margin-left: 30px;
        }
        div#form {
            position: absolute;
            top: 45px;
            left: 0px;
            overflow: hidden;
            background-color: #ffffff;
            z-index: 2;
        }
        .dhx_tabbar_zone_top .dhx_tab_element {
            -moz-user-select: none;
        }
    </style>
    <script>
var myForm,
formData,
dhxTabbar
 
// init values for form, will loaded on demoand and then deleted
var initValues = {
    "a1": {
        name: "Patrik O'Brain",
        addr: "22 Acacia Avenue",
        mail: "patrik@mailme.com"
    },
    "a2": {
        name: "Michael Staminsky",
        addr: "19 Elm Street",
        mail: "michael@mailme.com"
    },
    "a3": {
        name: "Lisa Walsh",
        addr: "13 Jan Street",
        mail: "lisa@mailme.com"
    },
    };
 
// here backup ids will stored
var backupIds = {};
 
function doOnLoad() {
    formData = [{
        type: "block",
        offsetLeft: 12,
        list: [{
            type: "settings",
            position: "label-left",
            labelWidth: 110,
            inputWidth: 150
        }, {
            type: "input",
            name: "name",
            label: "Full Name",
            value: ""
        }, {
            type: "input",
            name: "addr",
            label: "Address",
            value: ""
        }, {
            type: "input",
            name: "mail",
            label: "Email",
            value: ""
        }]
        }];
    dhxTabbar = new dhtmlXTabBar("tabbar");
    dhxTabbar.setImagePath("../../../dhtmlxTabbar/codebase/imgs/");
    dhxTabbar.setSkin("dhx_skyblue");
    dhxTabbar.addTab("a1", "Tab 1", 70);
    dhxTabbar.addTab("a2", "Tab 2", 70);
    dhxTabbar.addTab("a3", "Tab 3", 70);
    dhxTabbar.enableContentZone(0);
 
    myForm = new dhtmlXForm("form", formData);
 
    dhxTabbar.attachEvent("onSelect", function(to, from) {
 
        // save backup for current active tab
        if (from != null) {
            backupIds[from] = myForm.saveBackup();
        }
 
        // check if tab opened first time load init values into form otherwise load backup
        if (initValues[to] != null) {
            myForm.setFormData(initValues[to]);
            initValues[to] = null;
            delete initValues[to];
        } else {
            myForm.restoreBackup(backupIds[to]);
            myForm.clearBackup(backupIds[to]);
        }
 
        return true;
    });
 
    dhxTabbar.setTabActive("a1");
}</script>
 
 
    <div>Single form used to keep several datasets</div>
    <div id="tabbar">
        <div id="form"></div>
    </div>