Dynamically Generate Multiple TextBoxes in ASP.Net

Here, you will see how to create multiple TextBoxes and Tabs dynamically using jQuery scripts and CSS.

Here, you will see how to create multiple TextBoxes and Tabs dynamically using jQuery scripts and CSS.

I hope this code is very helpful for creating a paper format for an online examination project. Check it out. If you have any concerns then let me know.

1. Add CSS and JavaScript file references

I need to add a CSS and jQuery reference to create a tab on a page:

 <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>

  
2. Create a UI for entering the number of TextBoxes you want to generate, also create the tabs
 
 I use a table for creating a TextBox and a Button. The following figure shows the structure table:

<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>
 
And after creating the table for entering the number of TextBoxes you want to generate, I use an unordered list to create the tabs.
 
The following figure shows the structure of the unordered list for the tabs:
 

<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>

3. Contents For Tabs
 
In these tabs I need to generate a TextBox limited in size, in other words the first tabs show only 5 TextBoxes and if you want to create more than show tab2 and greeted than 5 data are shown in the next tabs, tab2, tab3 & tab4. At end of the TextBoxes show the submit button.
For this we generate a div in a div.
 
The following figure shows the structure of the Content for tabs:
 

<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>
 
4. Use Of Tabs

Using tabs dynamically generates TextBoxes that are not shown together, they are divided by tabs.

5. Entire Code
 

<%@ 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 = document.getElementById("txtpaper").value();

            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>

 

6. Output

Creating-Multiple-Textbox-Dynamically.jpg

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

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

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