Dynamically Generate Multiple TextBoxes in ASP.Net

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MutipleTexbox.aspx.cs" Inherits="MultipleTexboxUsingJquery.MutipleTexbox" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1" runat="server">
    <title></title>
    <link href="css/jquery-ui-1.9.2.custom.min.css" rel="Stylesheet" type="text/css" />
    <script src="jquery/jquery-1.8.3.js" type="text/javascript"></script>
    <script src="jquery/jquery-ui-1.9.2.custom.min.js" type="text/javascript"></script>
    <script type="text/javascript" language="javascript">
        function GetTextBox() {
            debugger;
            $("#tabs").tabs();
            var txtid = $("#txtpaper").val();
            var tab1 = document.getElementById("part1");
            var tab2 = document.getElementById("part2");
            var tab3 = document.getElementById("part3");
            var tab4 = document.getElementById("part4");
            var btnsubmit = document.getElementById("btnsubmit");
            var tabs;
            var fieldArray = ['Question', 'Ans1', 'Ans2', 'Ans3', 'Ans4', 'Correct Answer'];
            for (var i = 1; i <= txtid; i++) {
                if (i <= 5) {
                    tabs = tab1;
                    alert("Enter More than 5");
                } else if (i > 5 && i <= 10) {
                    $("#tabs").show();
                    $("#ui-id-3").hide();
                    $("#ui-id-4").hide();
                    $("#part2btn").html('<input type="button" id="btnsubmit" value="Submit" />');
                    $("#part3btn").hide();
                    $("#part4btn").hide();
                    tabs = tab2;
                } else if (i > 10 && i <= 15) {
                    $("#tabs").show();
                    $("#part3btn").html('<input type="button" id="btnsubmit" value="Submit"/>');
                    $("#part3btn").show();
                    $("#ui-id-3").show();
                    $("#ui-id-4").hide();
                    $("#part2btn").hide();
                    $("#part4btn").hide();
                    tabs = tab3;
                } else if (i > 15) {
                    $("#tabs").show();
                    $("#ui-id-4").show();
                    $("#part4btn").html('<input type="button" id="btnsubmit" value="Submit"/>');
                    $("#part4btn").show();
                    $("#part2btn").hide();
                    $("#part3btn").hide();
                    tabs = tab4;
                }
                for (var j = 0; j < 6; j++) {
                    var a = fieldArray[j];
                    if (j == 0) {
                        a += i.toString();
                        tabs.innerHTML = tabs.innerHTML + a + '<Textarea id="id' + i.toString() + j.toString() + '"></Textarea><br><br><br>';
                    } else {
                        tabs.innerHTML = tabs.innerHTML + a + '<input name="DynamicTextBox" type="text" id="id' + i.toString() + j.toString() + '"/><br><br><br>';
                    }
                }
            }
        }
    </script>
</head>

<body>
    <form id="form1" runat="server">
        <table>
            <tr>
                <td>
                    <asp:Label ID="lbltextno" runat="server" Text="Enter Number Of TextBox"></asp:Label>
                </td>
                <td>
                    <input type="text" id="txtpaper" />
                </td>
                <td>
                    <input type="button" value="Click" id="show" onclick="GetTextBox()" />
                </td>
            </tr>
        </table>
        <div id="tabs" style="display: none">
            <ul>
                <li><a href="#part1">Part1</a></li>
                <li><a href="#part2">Part2</a></li>
                <li><a href="#part3">Part3</a></li>
                <li><a href="#part4">Part4</a></li>
            </ul>
            <div id="part1">
                <div id="part1btn">
                </div>
            </div>
            <div id="part2">
                <div id="part2btn">
                </div>
            </div>
            <div id="part3">
                <div id="part3btn">
                </div>
            </div>
            <div id="part4">
                <div id="part4btn">
                </div>
            </div>
        </div>
    </form>
</body>

</html>

Output

This output means, that if you enter 1 to 5 then TextBoxes does not show the 6 required and that means the 6-question format shows 36 TextBoxes.

• 1st for Question,
• 2nd for Answer2,
• 3rd Answer3,
• 4th Answer4,
• 5th Correct Answer

In this ans1, 2, 3, and 4 are options.