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.