<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>
    <script src="../../codebase/ext/dhtmlxform_dyn.js"></script>
    <script>
var myForm,
formData;
function doOnLoad() {
    formData = [{
        type: "settings",
        position: "label-left",
        labelWidth: 120,
        inputWidth: 160
    }, {
        type: "label",
        name: "newProject",
        label: "New project",
        list: [{
            type: "input",
            label: "Project Name",
            value: "New project",
            validate: "NotEmpty"
        }]
        }, {
        type: "label",
        name: "advanced",
        label: "Advanced",
        list: [{
            type: "input",
            label: "Command line options",
            rows: 2,
            value: "-vf crop=618:526:0:14,pp=lb"
        }, ]
        }, {
        type: "button",
        name: "button",
        value: "Save"
    }];
    myForm = new dhtmlXForm("myForm", formData);
 
    document.getElementById("b1").disabled = false;
    document.getElementById("b2").disabled = false;
    document.getElementById("b3").disabled = false;
    document.getElementById("b4").disabled = false;
}
var k = 1;
function addVideoSettings() {
 
    var itemData = {
        type: "label",
        label: "Video settings",
        list: [{
            type: "select",
            name: "video_codec",
            label: "Codec",
            validate: "NotEmpty",
            options: [{
                text: "DivX",
                value: "DivX"
            }, {
                text: "XviD",
                value: "XviD",
                selected: true
            }]
            }, {
            type: "select",
            name: "video_bitrate",
            label: "Bitrate",
            validate: "ValidTime",
            options: [{
                text: "728 kbps",
                value: "728"
            }, {
                text: "1226 kbps",
                value: "1226",
                selected: true
            }, {
                text: "2412 kbps",
                value: "2412"
            }]
            }]
        };
 
    myForm.addItem(null, itemData, k++);
}
function addAudioSettings() {
    var itemData = {
        type: "label",
        label: "Audio settings",
        list: [{
            type: "select",
            label: "Format",
            validate: "ValidTime",
            options: [{
                text: "AAC",
                value: "AAC"
            }, {
                text: "AC3",
                value: "AC3",
                selected: true
            }, {
                text: "MP3",
                value: "MP3"
            }, {
                text: "FLAC",
                value: "FLAC"
            }]
            }, {
            type: "select",
            label: "Bitrate",
            validate: "ValidTime",
            options: [{
                text: "128 kbps",
                value: "128"
            }, {
                text: "160 kbps",
                value: "160"
            }, {
                text: "256 kbps",
                value: "256"
            }, {
                text: "320 kbps",
                value: "320",
                selected: true
            }, {
                text: "448 kbps",
                value: "448"
            }]
            }, {
            type: "select",
            label: "Channels",
            validate: "ValidTime",
            options: [{
                text: "2.0 Stereo",
                value: "2_0"
            }, {
                text: "5.1 Dolby Digital",
                value: "5_1",
                selected: true
            }]
            }]
        };
 
    myForm.addItem(null, itemData, k++);
 
}
function removeAdvanced() {
    myForm.removeItem("advanced");
}
function removeButton() {
    myForm.removeItem("button");
}</script>
 
 
    <input type="button" id="b1" value="Add Video Settings" onclick="addVideoSettings();this.disabled=true;">
    <input type="button" id="b2" value="Add Audio Settings" onclick="addAudioSettings();this.disabled=true;">
    <input type="button" id="b3" value="Remove Advanced" onclick="removeAdvanced();this.disabled=true;">
    <input type="button" id="b4" value="Remove Button" onclick="removeButton();this.disabled=true;">
    <br><br><br><br>
    <div id="myForm" style="height:350px;"></div>