JavaScript / JQuery: Create Label, TextBox, Select List Dynamically

Below are some JavaScript/JQuery function to create HTML Control dynamically on the fly.

1. Create Label

function CreateLabel(containerId, labelId, html) {
    if (containerId && labelId) {
        var label = document.createElement('label');
        label.innerHTML = html;
        label.id = labelId;
        $('#' + containerId).append(label).trigger('create');
    }
}

2. Create TextBox

function CreateTextBox(containerId, inputId) {
    if (containerId && inputId) {
        var input = document.createElement('input');
        input.type = 'text';
        input.id = inputId;
        input.name = inputId;
        $('#' + containerId).append(input).trigger('create');
    }
}

3. Create Select Menu

function CreateDropDownList(containerId, selectId, placeHolderText, optionTextArray, optionValueArray) {
    if (containerId) {
        var select = document.createElement('select');
        select.id = selectId;
        select.name = selectId;
        if (placeHolderText && placeHolderText != '') {
            var dfOpt = document.createElement('option');
            dfOpt.value = '';
            dfOpt.text = placeHolderText;
            select.options.add(dfOpt);
        }
        
        for (i = 0; i < optionTextArray.length && i < optionValueArray.length; i++) {
            var opt = document.createElement('option');
            opt.value = optionValueArray[i];
            opt.text = optionTextArray[i];
            select.options.add(opt);
        }
        $('#' + containerId).append(select).trigger('create');
    }
}

Create Mini Select Menu for JQuery Mobile

function CreateMiniDropDownList(containerId, selectId, placeHolderText, optionTextArray, optionValueArray) {
    if (containerId) {
        var select = document.createElement('select');

        var select = document.createElement('select');
        var attr = document.createAttribute("data-mini");
        attr.value = "true";
        select.setAttributeNode(attr);
        var attr = document.createAttribute("data-inline");
        attr.value = "true";
        select.setAttributeNode(attr);

        select.id = selectId;
        select.name = selectId;
        if (placeHolderText && placeHolderText != '') {
            var dfOpt = document.createElement('option');
            dfOpt.value = '';
            dfOpt.text = placeHolderText;
            select.options.add(dfOpt);
        }
        
        for (i = 0; i < optionTextArray.length && i < optionValueArray.length; i++) {
            var opt = document.createElement('option');
            opt.value = optionValueArray[i];
            opt.text = optionTextArray[i];
            select.options.add(opt);
        }
        $('#' + containerId).append(select).trigger('create');
    }
}
Advertisements
JavaScript / JQuery: Create Label, TextBox, Select List Dynamically

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s