<link rel="stylesheet" type="text/css" href="../../codebase/skins/dhtmlxform_dhx_skyblue.css">
    <script src="../../codebase/dhtmlxcommon.js"></script>
    <script src="../../codebase/dhtmlxform.js"></script>
    <style>
        div#simpleLog {
            height: 200px;
            font-family: Tahoma;
            font-size: 11px;
            overflow: auto;
        }
    </style>
    <script>
var myForm,
formData,
logObj;
function doOnLoad() {
    formData = [{
        type: "settings",
        position: "label-left",
        labelWidth: "auto",
        inputWidth: "auto"
    }, {
        type: "label",
        label: "Generate query"
    }, {
        type: "label",
        list: [{
            type: "select",
            label: "SELECT",
            options: [{
                value: "1",
                text: "*",
                selected: true
            }, {
                value: "2",
                text: "userId"
            }, {
                value: "3",
                text: "userName"
            }]
            }, {
            type: "newcolumn"
        }, {
            type: "select",
            label: "FROM",
            options: [{
                value: "1",
                text: "users",
                selected: true
            }]
            }, {
            type: "newcolumn"
        }, {
            type: "select",
            label: "WHERE",
            options: [{
                value: "1",
                text: "userId"
            }, {
                value: "2",
                text: "userName"
            }]
            }, {
            type: "newcolumn"
        }, {
            type: "select",
            label: " ",
            options: [{
                value: "1",
                text: "LIKE"
            }, {
                value: "2",
                text: "="
            }, {
                value: "3",
                text: ">"
            }, {
                value: "4",
                text: ">="
            }, {
                value: "5",
                text: "<"
            }, {
                value: "6",
                text: "<="
            }]
            }, {
            type: "newcolumn"
        }, {
            type: "input",
            label: " ",
            inputWidth: 50
        }, {
            type: "newcolumn"
        }, {
            type: "select",
            label: "ORDER BY",
            options: [{
                value: "1",
                text: "userId"
            }, {
                value: "2",
                text: "userName"
            }]
            }, {
            type: "newcolumn"
        }, {
            type: "select",
            label: " ",
            options: [{
                value: "1",
                text: "ASC"
            }, {
                value: "2",
                text: "DESC"
            }]
            }]
        }, {
        type: "label",
        list: [{
            type: "label",
            labelWidth: 150
        }, {
            type: "newcolumn"
        }, {
            type: "button",
            value: "Reset",
            name: "button_reset"
        }, {
            type: "newcolumn"
        }, {
            type: "button",
            value: "Validate",
            name: "button_validate"
        }, {
            type: "newcolumn"
        }, {
            type: "button",
            value: "Test",
            name: "button_test"
        }, {
            type: "newcolumn"
        }, {
            type: "button",
            value: "Submit",
            name: "button_submit"
        }]
        }];
    myForm = new dhtmlXForm("myForm", formData);
    myForm.attachEvent("onButtonClick", function(name) {
        logEvent("onButtonClick event called, item name '" + name + "'<br>");
    });
}
function logEvent(t, name, command) {
    if (!logObj)
        logObj = document.getElementById("simpleLog");
    logObj.innerHTML += t;
}
function clearLog() {
    if (!logObj)
        logObj = document.getElementById("simpleLog");
    logObj.innerHTML = "";
}</script>
 
 
    <table>
        <tr><td><div id="myForm"></div></td></tr>
        <tr><td><b>Log (<a href="javascript:void(0);" onclick="clearLog();">clear</a>)</b></td></tr>
        <tr><td><div id="simpleLog"></div></td></tr>
    </table>