How to create Dynamic HTML Controls Using Javascript


Here we Learn how to create dynamic html controls like textBox, dropdownlist, Radiobutton and Radiobutton List or group using Javascript

For this Just know about basic asp.net controls and Html contrls

Javascript Code:

<script language="javascript" type="text/javascript">
// <!CDATA[

        function Button1_onclick(ControlType) {
            var Count = document.getElementById("Text1").value;

            if (ControlType == "TEXTBOX") {
                div_Controls.innerHTML = "";
                for (i = 0; i < Count; i++) {
                    var TextBox = document.createElement("INPUT");
                    TextBox.setAttribute("type", "text");
                    TextBox.setAttribute("onkeypress", "return allowOnlyDigits(event,this)");
                    TextBox.setAttribute("maxlength", "5");
                    TextBox.onpaste = function(e) { e.preventDefault() };
                    TextBox.setAttribute("size", "4");
                    TextBox.setAttribute("onchange", "validateHhMm(this);UpdateTimes(this.id);");
                    TextBox.setAttribute('id', 'txtTime_' + i);
                    div_Controls.appendChild(TextBox);
                }
            }

            if (ControlType == "DROPDOWNLIST") {
                div_Controls.innerHTML = "";
                for (i = 0; i < Count; i++) {
                    var DropDownList = document.createElement("SELECT");
                    DropDownList.setAttribute("onchange", "UpdateTimes(this.id);");
                    option0 = new Option("AM", "AM");
                    option1 = new Option("PM", "PM");
                    DropDownList.options[0] = option0;
                    DropDownList.options[1] = option1;
                    div_Controls.appendChild(DropDownList);
                }
            }
            if (ControlType == "RADIOBUTTON") {
                div_Controls.innerHTML = "";
                for (i = 0; i < Count; i++) {
                    var RadioButton = document.createElement("input");
                    var labelForRadio = document.createElement("label");
                    RadioButton.type = "radio";
                    RadioButton.setAttribute('id', 'RadioTime_' + i);
                    labelForRadio.setAttribute('for', 'RadioTime_' + i)
                    labelForRadio.innerHTML = 'Day' + (i + 1);
                    RadioButton.setAttribute('Value', 'Day' + (i + 1));
                    div_Controls.appendChild(RadioButton);
                    div_Controls.appendChild(labelForRadio);
                }
            }
            if (ControlType == "RADIOBUTTONGROUP") {
                div_Controls.innerHTML = "";
                for (i = 0; i < Count; i++) {
                    var RadioButton = document.createElement("input");
                    var labelForRadio = document.createElement("label");
                    RadioButton.type = "radio";
                    RadioButton.setAttribute('id', 'RadioTime_' + i);
                    labelForRadio.setAttribute('for', 'RadioTime_' + i)
                    RadioButton.setAttribute('name', 'RadioTime');
                    labelForRadio.innerHTML = 'Day' + (i + 1);
                    div_Controls.appendChild(RadioButton);
                    div_Controls.appendChild(labelForRadio);
                }
            }
            return false;
        }

// ]]>
    </script>

 

HTML Code:

<div>
        <table>
            <tr>
                <td>
                    No.Of Controls<input id="Text1" type="text" />
                </td>
            </tr>
            <tr>
                <td>
                    <asp:Button ID="Button2" runat="server" Text="Generate TextBox" OnClientClick=" return Button1_onclick('TEXTBOX');" /><br />
                    <asp:Button ID="Button3" runat="server" Text="Generate Dropdown List" OnClientClick=" return Button1_onclick('DROPDOWNLIST');" /><br />
                    <asp:Button ID="Button4" runat="server" Text="Generate Radio Button" OnClientClick=" return Button1_onclick('RADIOBUTTON');" /><br />
                    <asp:Button ID="Button1" runat="server" Text="Generate Radiobutton Group" OnClientClick=" return Button1_onclick('RADIOBUTTONGROUP');" />
                </td>
            </tr>
            <tr>
                <td id="div_Controls">
                </td>
            </tr>
        </table>
    </div>

Total Code:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head runat="server">
    <title></title>

    <script language="javascript" type="text/javascript">
// <!CDATA[

        function Button1_onclick(ControlType) {
            var Count = document.getElementById("Text1").value;

            if (ControlType == "TEXTBOX") {
                div_Controls.innerHTML = "";
                for (i = 0; i < Count; i++) {
                    var TextBox = document.createElement("INPUT");
                    TextBox.setAttribute("type", "text");
                    TextBox.setAttribute("onkeypress", "return allowOnlyDigits(event,this)");
                    TextBox.setAttribute("maxlength", "5");
                    TextBox.onpaste = function(e) { e.preventDefault() };
                    TextBox.setAttribute("size", "4");
                    TextBox.setAttribute("onchange", "validateHhMm(this);UpdateTimes(this.id);");
                    TextBox.setAttribute('id', 'txtTime_' + i);
                    div_Controls.appendChild(TextBox);
                }
            }

            if (ControlType == "DROPDOWNLIST") {
                div_Controls.innerHTML = "";
                for (i = 0; i < Count; i++) {
                    var DropDownList = document.createElement("SELECT");
                    DropDownList.setAttribute("onchange", "UpdateTimes(this.id);");
                    option0 = new Option("AM", "AM");
                    option1 = new Option("PM", "PM");
                    DropDownList.options[0] = option0;
                    DropDownList.options[1] = option1;
                    div_Controls.appendChild(DropDownList);
                }
            }
            if (ControlType == "RADIOBUTTON") {
                div_Controls.innerHTML = "";
                for (i = 0; i < Count; i++) {
                    var RadioButton = document.createElement("input");
                    var labelForRadio = document.createElement("label");
                    RadioButton.type = "radio";
                    RadioButton.setAttribute('id', 'RadioTime_' + i);
                    labelForRadio.setAttribute('for', 'RadioTime_' + i)
                    labelForRadio.innerHTML = 'Day' + (i + 1);
                    RadioButton.setAttribute('Value', 'Day' + (i + 1));
                    div_Controls.appendChild(RadioButton);
                    div_Controls.appendChild(labelForRadio);
                }
            }
            if (ControlType == "RADIOBUTTONGROUP") {
                div_Controls.innerHTML = "";
                for (i = 0; i < Count; i++) {
                    var RadioButton = document.createElement("input");
                    var labelForRadio = document.createElement("label");
                    RadioButton.type = "radio";
                    RadioButton.setAttribute('id', 'RadioTime_' + i);
                    labelForRadio.setAttribute('for', 'RadioTime_' + i)
                    RadioButton.setAttribute('name', 'RadioTime');
                    labelForRadio.innerHTML = 'Day' + (i + 1);
                    div_Controls.appendChild(RadioButton);
                    div_Controls.appendChild(labelForRadio);
                }
            }
            return false;
        }

// ]]>
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table>
            <tr>
                <td>
                    No.Of Controls<input id="Text1" type="text" />
                </td>
            </tr>
            <tr>
                <td>
                    <asp:Button ID="Button2" runat="server" Text="Generate TextBox" OnClientClick=" return Button1_onclick('TEXTBOX');" /><br />
                    <asp:Button ID="Button3" runat="server" Text="Generate Dropdown List" OnClientClick=" return Button1_onclick('DROPDOWNLIST');" /><br />
                    <asp:Button ID="Button4" runat="server" Text="Generate Radio Button" OnClientClick=" return Button1_onclick('RADIOBUTTON');" /><br />
                    <asp:Button ID="Button1" runat="server" Text="Generate Radiobutton Group" OnClientClick=" return Button1_onclick('RADIOBUTTONGROUP');" />
                </td>
            </tr>
            <tr>
                <td id="div_Controls">
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>

Output:

Generating TextBoxes

 Generating DropdownLists

 Generating Radiobuttons

 Generating Radiobutton Group

Advertisements

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