Post
Ask Question

Dynamically Generate Multiple TextBoxes in ASP.Net

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:
  1. <link href="css/jquery-ui-1.9.2.custom.min.css" rel="Stylesheet" type="text/css" />  
  2. <script src="jquery/jquery-1.8.3.js" type="text/javascript"></script>  
  3. <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:
  1. <body>  
  2.     <form id="form1" runat="server">  
  3.         <table>  
  4.             <tr>  
  5.                 <td>  
  6.                     <asp:Label ID="lbltextno" runat="server" Text="Enter Number Of TextBox"></asp:Label>  
  7.                 </td>  
  8.                 <td>  
  9.                     <input type="text" id="txtpaper" />  
  10.                 </td>  
  11.                 <td>  
  12.                     <input type="button" value="Click" id="show" onclick="GetTextBox()" />  
  13.                 </td>  
  14.             </tr>  
  15.         </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:
  1. <div id="tabs" style="display:none">  
  2.     <ul>  
  3.         <li><a href="#part1">Part1</a></li>  
  4.         <li><a href="#part2">Part2</a></li>  
  5.         <li><a href="#part3">Part3</a></li>  
  6.         <li><a href="#part4">Part4</a></li>  
  7.     </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:
  1. <div id="part1">  
  2.     <div id="part1btn"></div>  
  3. </div>  
  4. <div id="part2">  
  5.     <div id="part2btn">  
  6.     </div>  
  7. </div>  
  8. <div id="part3">  
  9.     <div id="part3btn">  
  10.     </div>  
  11. </div>  
  12. <div id="part4">  
  13.     <div id="part4btn">  
  14.     </div>  
  15. </div> 
4. Use Of Tabs
 
 Using tabs dynamically generates TextBoxes that are not shown together, they are divided by tabs.
 
5. Entire Code
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MutipleTexbox.aspx.cs"  
  2.     Inherits="MultipleTexboxUsingJquery.MutipleTexbox" %>  
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  4. <html xmlns="http://www.w3.org/1999/xhtml">  
  5.   
  6.     <head id="Head1" runat="server">  
  7.         <title></title>  
  8.         <link href="css/jquery-ui-1.9.2.custom.min.css" rel="Stylesheet" type="text/css" />  
  9.         <script src="jquery/jquery-1.8.3.js" type="text/javascript"></script>  
  10.         <script src="jquery/jquery-ui-1.9.2.custom.min.js" type="text/javascript"></script>  
  11.         <script type="text/javascript" language="javascript">  
  12.         function GetTextBox() {  
  13.             debugger;  
  14.             $("#tabs").tabs();  
  15.             // var txtid = document.getElementById("txtpaper").value();  
  16.             var txtid = $("#txtpaper").val();  
  17.             var tab1 = document.getElementById("part1");  
  18.             var tab2 = document.getElementById("part2");  
  19.             var tab3 = document.getElementById("part3");  
  20.             var tab4 = document.getElementById("part4");  
  21.             var btnsubmit = document.getElementById("btnsubmit");  
  22.             var tabs;  
  23.             var fieldArray = ['Question', 'Ans1', 'Ans2', 'Ans3', 'Ans4', 'Correct Answer'];  
  24.             for (var i = 1; i <= txtid; i++) {  
  25.                 if (i <= 5) {  
  26.                     tabs = tab1;  
  27.                     alert("Enter More than 5");  
  28.                 } else if (i > 5 && i <= 10) {  
  29.                     $("#tabs").show();  
  30.                     $("#ui-id-3").hide();  
  31.                     $("#ui-id-4").hide();  
  32.                     $("#part2btn").html(' <input type="button" id="btnsubmit" value="Submit" />');  
  33.                     $("#part3btn").hide();  
  34.                     $("#part4btn").hide();  
  35.                     tabs = tab2;  
  36.                 } else if (i > 10 && i <= 15) {  
  37.                     $("#tabs").show();  
  38.                     $("#part3btn").html(' <input type="button" id="btnsubmit" value="Submit"/>');  
  39.                     $("#part3btn").show();  
  40.                     $("#ui-id-3").show();  
  41.                     $("#ui-id-4").hide();  
  42.                     $("#part2btn").hide();  
  43.                     $("#part4btn").hide();  
  44.                     tabs = tab3;  
  45.                 } else if (i > 15) {  
  46.                     $("#tabs").show();  
  47.                     $("#ui-id-4").show();  
  48.                     $("#part4btn").html(' <input type="button" id="btnsubmit" value="Submit"/>');  
  49.                     $("#part4btn").show();  
  50.                     $("#part2btn").hide();  
  51.                     $("#part3btn").hide();  
  52.                     tabs = tab4;  
  53.                 }  
  54.                 for (var j = 0; j < 6; j++) {  
  55.                     var a = fieldArray[j];  
  56.                     if (j == 0) {  
  57.                         a += i.toString();  
  58.                         tabstabs.innerHTML = tabs.innerHTML + a + '<Textarea id="id' + i.toString() + j.toString() + '"></Textarea><br><br> <br>'  
  59.                     } else {  
  60.                         tabstabs.innerHTML = tabs.innerHTML + a + '<input name="DynamicTextBox" type="text" id="id' + i.toString() + j.toString() + '"/><br><br><br>'  
  61.                     }  
  62.                 }  
  63.             }  
  64.         }  
  65.         </script>  
  66.     </head>  
  67.   
  68.     <body>  
  69.         <form id="form1" runat="server">  
  70.             <table>  
  71.                 <tr>  
  72.                     <td>  
  73.                         <asp:Label ID="lbltextno" runat="server" Text="Enter Number Of TextBox"></asp:Label>  
  74.                     </td>  
  75.                     <td>  
  76.                         <input type="text" id="txtpaper" />  
  77.                     </td>  
  78.                     <td>  
  79.                         <input type="button" value="Click" id="show" onclick="GetTextBox()" />  
  80.                     </td>  
  81.                 </tr>  
  82.             </table>  
  83.             <div id="tabs" style="display: none">  
  84.                 <ul>  
  85.                     <li><a href="#part1">Part1</a></li>  
  86.                     <li><a href="#part2">Part2</a></li>  
  87.                     <li><a href="#part3">Part3</a></li>  
  88.                     <li><a href="#part4">Part4</a></li>  
  89.                 </ul>  
  90.                 <div id="part1">  
  91.                     <div id="part1btn">  
  92.                     </div>  
  93.                 </div>  
  94.                 <div id="part2">  
  95.                     <div id="part2btn">  
  96.                     </div>  
  97.                 </div>  
  98.                 <div id="part3">  
  99.                     <div id="part3btn">  
  100.                     </div>  
  101.                 </div>  
  102.                 <div id="part4">  
  103.                     <div id="part4btn">  
  104.                     </div>  
  105.                 </div>  
  106.             </div>  
  107.         </form>  
  108.     </body>  
  109.   
  110. </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.


Similar Articles