Form using JS

[WizPS]

Looking for a way to create a form using only JS, something like attached picture.

Code:

    var $cont = $('<form/>', { id: 'ff0' });
    var $cont1 = $('<input/>', { id: 'ff1' });
    var $cont2 = $('<input/>', { id: 'ff2' });
    var $cont3 = $('<input/>', { id: 'ff3' });
    var $cont4 = $('<input/>', { id: 'ff4' });
    var $cont5 = $('<input/>', { id: 'ff5' });

    using(['combobox', 'textbox', 'filebox', 'passwordbox', 'linkbutton'], function () {
        $cont1.textbox({ label: "Name", name: "Name" }).wrap('<div/>', {});
        $cont2.textbox({ label: "Email", name: "Email" }).wrap('<div/>', {});
        $cont3.textbox({ label: "Phone", name: "Phone" }).wrap('<div/>', {});
        $cont4.filebox({ label: "File", name: "File" }).wrap('<div/>', {});
        $cont5.linkbutton({ iconCls: 'icon-ok', text: 'OK', width: 70}).wrap('<div/>', {});
    });

    $cont.append($cont1);
    $cont.append($cont2);
    $cont.append($cont3);
    $cont.append($cont4);
    $cont.append($cont5);

    $('body').append($('<div/>', { id: 'win_' }));
    using('window', function () {
        $('#win_').window({ title: 'Test js form', width: 300, height: 200, content: $cont });
    });

This works however not giving the right result, please advice.

[jarry]

Please use this code instead.

Code:

var $cont = $('<form/>', { id: 'ff0' });
var $cont1 = $('<input/>', { id: 'ff1' });
var $cont2 = $('<input/>', { id: 'ff2' });
var $cont3 = $('<input/>', { id: 'ff3' });
var $cont4 = $('<input/>', { id: 'ff4' });
var $cont5 = $('<input/>', { id: 'ff5' });

using(['combobox', 'textbox', 'filebox', 'passwordbox', 'linkbutton'], function () {
var $wrap = $('<div/>', {}).appendTo($cont);
$cont1.appendTo($wrap).textbox({ label: "Name", name: "Name", width:"100%" })
var $wrap = $('<div/>', {}).appendTo($cont);
$cont2.appendTo($wrap).textbox({ label: "Email", name: "Email", width:"100%" })
var $wrap = $('<div/>', {}).appendTo($cont);
$cont3.appendTo($wrap).textbox({ label: "Phone", name: "Phone", width:"100%" })
var $wrap = $('<div/>', {}).appendTo($cont);
$cont4.appendTo($wrap).filebox({ label: "File", name: "File", width:"100%" })
var $wrap = $('<div/>', {}).appendTo($cont);
$cont5.appendTo($wrap).linkbutton({ iconCls: 'icon-ok', text: 'OK', width: '100%', height: 30})
});
...

[WizPS]

I simplifyed

Code:

var controles = [
    { type: 'textbox', name: "Name", required: true }
    , { type: 'textbox', name: "Email" }
    , { type: 'textbox', name: "Phone" }
    , { type: 'filebox', name: "File" }
    , { type: 'linkbutton', iconCls: 'icon-ok', text: 'OK', height: 30 }
];

var $cont = $('<form/>', { id: 'ff0' });

$.each(controles, function (i, o) {
    using(o.type, function () {
        $cont.append($('<input/>', { id: 'ff' + i }).appendTo($('<div/>', {}).appendTo($cont))[o.type]($.extend({ width: "100%", label: o.name }, o)));
    });
});

$('body').append($('<div/>', { id: 'win_' }));
using('window', function () {
    $('#win_').window({ title: 'Test js form', width: 300, height: 200, content: $cont });
});

But button comes in the top. Any suggestions why, or how to make the code correct?