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

How to add Dynamic Colspan for td in xslt..?


<tr>
                                        <td style="border-top: 1px solid black;padding: 5px;">
                                            <xsl:for-each select="ChargeGroupNames">
                                                <xsl:variable name="norows" select="count(ChargeGroupsVo)"></xsl:variable>
                                                <xsl:if test="$norows &gt; 1">
                                                    <xsl:attribute name="colspan">
                                                        <xsl:value-of select="$norows + 2"/>
                                                    </xsl:attribute>
                                                </xsl:if>
                                            </xsl:for-each>
                                        </td>
                                    </tr>