Dynamically Generate Multiple TextBoxes in ASP.Net

Shaina Arora
Sep 05, 2013
26.6k
0
5
Article

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:

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>

<table>

<tr>

<td>

<asp:Label ID="lbltextno" runat="server" Text="Enter Number Of TextBox"></asp:Label>

</td>

<td>

</td>

<td>

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

<ul>

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

</div>

</div>

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

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>

<table>

<tr>

<td>

<asp:Label ID="lbltextno" runat="server" Text="Enter Number Of TextBox"></asp:Label>

</td>

<td>

</td>

<td>

</td>

</tr>

</table>

<ul>

</ul>

</div>

</div>

</div>

</div>

</form>

</body>

</html>

6. Output

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