<link rel="stylesheet" type="text/css" href="../../codebase/skins/dhtmlxform_dhx_skyblue.css">
<link rel="stylesheet" type="text/css" href="../../../dhtmlxCombo/codebase/dhtmlxcombo.css">
<script src="../../codebase/dhtmlxcommon.js"></script>
<script src="../../codebase/dhtmlxform.js"></script>
<script src="../../codebase/ext/dhtmlxform_dyn.js"></script>
<script src="../../codebase/ext/dhtmlxform_item_combo.js"></script>
<script src="../../../dhtmlxCombo/codebase/dhtmlxcombo.js"></script>
<style>
    div#simpleLog {
        width: 500px;
        height: 200px;
        font-family: Tahoma;
        font-size: 11px;
        overflow: auto;
        margin-top: 10px;
    }
</style>
<script>
var myForm,
formData,
logObj;
var localOpts = [{
    value: "1",
    text: "Columnar Cacti"
}, {
    value: "2",
    text: "Barrel Cacti"
}, {
    value: "3",
    text: "Hedgehog Cacti",
    selected: true
}, {
    value: "4",
    text: "Pincushion Cacti"
}, {
    value: "5",
    text: "Cholla Cacti"
}, {
    value: "6",
    text: "Prickly Pear Cacti"
}];
function doOnLoad() {
    dhtmlx.skin = "dhx_skyblue";
    window.dhx_globalImgPath = "../../../dhtmlxCombo/codebase/imgs/";
    formData = [{
        type: "settings",
        position: "label-left",
        labelWidth: 80,
        inputWidth: 130
    }, {
        type: "select",
        name: "sel",
        label: "Select",
        connector: "php/opts_select.php?etc=" + new Date().getTime()
        }, {
        type: "combo",
        name: "combo",
        label: "Combo",
        connector: "php/opts_select.php?mode=combo&etc=" + new Date().getTime(),
        offsetTop: 5
    }, {
        type: "multiselect",
        name: "msel",
        label: "Multiselect",
        connector: "php/opts_select.php?etc=" + new Date().getTime(),
        size: 6,
        offsetTop: 5
    }, 
    // buttons;
    {
        type: "button",
        value: "Cars",
        name: "cars",
        offsetTop: 20
    }, {
        type: "button",
        value: "Colors",
        name: "colors"
    }, {
        type: "button",
        value: "Cactus",
        name: "cactus"
    }];
    myForm = new dhtmlXForm("myForm", formData);
    myForm.attachEvent("onButtonClick", function(name) {
        for (var a in {
            sel: 1,
            combo: 1,
            msel: 1
        }) {
            if (name == "cars" || name == "colors") {
                myForm.reloadOptions(a, "php/opts_select.php?mode=" + a + "&type=" + name + "&etc=" + new Date().getTime());
            } else {
                myForm.reloadOptions(a, localOpts);
            }
        }
    });
    myForm.attachEvent("onOptionsLoaded", function(name) {
        logEvent("onOptionsLoaded, item name '" + name + "'<br>");
    });
    myForm.attachEvent("onChange", function(name, value) {
        logEvent("onChange, item name '" + name + "', value '" + value.toString() + "'<br>");
    });
}
function logEvent(t) {
    if (!logObj)
        logObj = document.getElementById("simpleLog");
    logObj.innerHTML += t;
}
function clearLog() {
    if (!logObj)
        logObj = document.getElementById("simpleLog");
    logObj.innerHTML = "";
}</script>
 
<div id="myForm" style="height:270px;"></div>
<div style="clear: both;">
    * ext/dhtmlxform_dyn.js required<br>
    cars and colors loaded from url, cactus loaded from local array<br><br>
</div>
<div><b>Log (<a href="javascript:void(0);" onclick="clearLog();">clear</a>)</b></div>
<div id="simpleLog"></div>