Post
Ask Question

How to Add TextBox Dynamically Using JavaScript in ASP.Net

Here, you will see how to create a TextBox upon each button click using JavaScript 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.

online examination project
 
Add TextBox Dynamically
.Aspx Code
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  3. <html xmlns="http://www.w3.org/1999/xhtml">  
  4. <head id="Head1" runat="server">  
  5.     <title></title>  
  6.     <style type="text/css">  
  7.         .TemplateTable  
  8.         {  
  9.             width: 80%;  
  10.             margin-left: 3%;  
  11.             border: 2px solid #a7a8a7;  
  12.             margin-top: 30px;  
  13.             padding-left: 35px;  
  14.             font-size: 15px;  
  15.             font-style: initial;  
  16.             font-weight: bold;  
  17.             color: #a7a8a7;  
  18.             padding-top: 3px;  
  19.             padding-bottom: 3px;  
  20.         }  
  21.         .TemplateTable tr td div  
  22.         {  
  23.             float: left;  
  24.             padding-right: 10px;  
  25.             font-size: 16px;  
  26.         }  
  27.         .TemplateTable tr td div a  
  28.         {  
  29.             color: Blue;  
  30.         }  
  31.         .custom-tablePopup  
  32.         {  
  33.             font-family: Arial, Helvetica, sans-serif;  
  34.             font-size: 13px;  
  35.             margin: 10px 0 0 0;  
  36.             padding: 0;  
  37.             border-right: 1px solid #bebebe;  
  38.             border-top: 1px solid #bebebe;  
  39.             border-bottom: 1px solid #bebebe;  
  40.         }  
  41.         .custom-tablePopup th  
  42.         {  
  43.             background: #ff5c00 !important;  
  44.             text-align: left;  
  45.             border-left: 1px solid #bebebe;  
  46.             border-bottom: 1px solid #bebebe;  
  47.             padding: 5px 8px;  
  48.             color: #fff;  
  49.         }  
  50.         .custom-tablePopup td  
  51.         {  
  52.             border-left: 1px solid #bebebe;  
  53.             padding: 4px 8px;  
  54.         }  
  55.         .custom-tablePopup tr:nth-child(even)  
  56.         {  
  57.             background: #f8f8f8;  
  58.         }  
  59.     </style>  
  60.     <script type="text/javascript">  
  61.         var count = "1";  
  62.         function addRow(in_tbl_name) {  
  63.             var tbody = document.getElementById(in_tbl_name).getElementsByTagName("TBODY")[0];  
  64.             // create row  
  65.             var row = document.createElement("TR");  
  66.             // create table cell 2  
  67.             var td1 = document.createElement("TD")  
  68.             var strHtml2 = "<input type=\"text\" name=\"SName\" size=\"30\" maxlength=\"30\" />";  
  69.             td1.innerHTML = strHtml2.replace(/!count!/g, count);  
  70.             // create table cell 3  
  71.             var td2 = document.createElement("TD")  
  72.             var strHtml3 = "<input type=\"text\" name=\"Email\" size=\"30\" maxlength=\"30\" />";  
  73.             td2.innerHTML = strHtml3.replace(/!count!/g, count);  
  74.             // create table cell 4  
  75.             var td3 = document.createElement("TD")  
  76.             var strHtml4 = "<input type=\"text\" name=\"Address\" size=\"30\" maxlength=\"30\" />";  
  77.             td3.innerHTML = strHtml4.replace(/!count!/g, count);  
  78.             // create table cell 5  
  79.             var td4 = document.createElement("TD")  
  80.             var strHtml5 = "<img src=\"Images/icon_03.png\" onclick=\"delRow()\" style=\"width: 22px; cursor:pointer;\" />";  
  81.             td4.innerHTML = strHtml5.replace(/!count!/g, count);  
  82.             // append data to row  
  83.             row.appendChild(td1);  
  84.             row.appendChild(td2);  
  85.             row.appendChild(td3);  
  86.             row.appendChild(td4);  
  87.             count = parseInt(count) + 1;  
  88.             // add to count variable  
  89.             // append row to table  
  90.             tbody.appendChild(row);  
  91.         }  
  92.         function delRow() {  
  93.             var current = window.event.srcElement;  
  94.             //here we will delete the line  
  95.             while ((current = current.parentElement) && current.tagName != "TR");  
  96.             current.parentElement.removeChild(current);  
  97.         }  
  98.     </script>  
  99. </head>  
  100. <body>  
  101.     <form id="form1" runat="server">  
  102.     <div>  
  103.         <table cellpadding="0" cellspacing="0" class="TemplateTable">  
  104.             <tr>  
  105.                 <td>  
  106.                     Add New Template  
  107.                 </td>  
  108.                 <td style="float: right; padding-right: 90px;">  
  109.                     <div>  
  110.                         <img id="Img1" src="~/Images/icon_04.png" width="20" runat="server" /></div>  
  111.                     <div>  
  112.                         <a title="Add more template" style="cursor: pointer;" onclick="addRow('tblPets')">Add  
  113.                             Template</a>  
  114.                     </div>  
  115.                 </td>  
  116.             </tr>  
  117.         </table>  
  118.     </div>  
  119.     <div style="margin-left: 3%;">  
  120.         <table id="tblPets" cellpadding="0" cellspacing="0" class="custom-tablePopup">  
  121.             <tr>  
  122.                 <th>Student Name</th>  
  123.                 <th>Email</th>  
  124.                 <th>Address</th>  
  125.                 <th></th>  
  126.             </tr>  
  127.             <tr>  
  128.                 <td><input type="text" name="SName" size="30" maxlength="30" /></td>  
  129.                 <td><input type="text" name="Email" size="30" maxlength="30" /></td>  
  130.                 <td><input type="text" name="Address" size="30" maxlength="30" /></td>  
  131.                 <td><img src="Images/icon_03.png" onclick="delRow()" style="width: 22px; cursor: pointer;" /></td>  
  132.             </tr>  
  133.         </table>  
  134.     </div>  
  135.     <div>  
  136.         <asp:Button ID="btnSave" runat="server" Text="Save" OnClick="btnSave_Click" />  
  137.     </div>  
  138.     <div>  
  139.         <asp:Literal ID="lit" runat="server"></asp:Literal>  
  140.     </div>  
  141.     </form>  
  142. </body>  
  143. </html> 

.CS Code

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.UI;  
  6. using System.Web.UI.WebControls;  
  7. using System.Web.Script.Serialization;  
  8. using System.Data;  
  9. using System.Text;  
  10. public partial class _Default : System.Web.UI.Page  
  11. {  
  12.     protected void Page_Load(object sender, EventArgs e)  
  13.     {  
  14.     }  
  15.     protected void btnSave_Click(object sender, EventArgs e)  
  16.     {  
  17.         string[] SName = Request.Form.GetValues("SName");  
  18.         string[] Email = Request.Form.GetValues("Email");  
  19.         string[] Address = Request.Form.GetValues("Address");  
  20.         DataTable dtable = dt();  
  21.         for (int i = 0; i <= SName.Length - 1; i++)  
  22.         {  
  23.             DataRow row1 = dtable.NewRow();  
  24.             row1["SName"] = SName[i];  
  25.             row1["Email"] = Email[i];  
  26.             row1["Address"] = Address[i];  
  27.             dtable.Rows.Add(row1);  
  28.         }  
  29.         GetData(dtable);  
  30.     }  
  31.     static DataTable dt()  
  32.     {  
  33.         DataTable dt = new DataTable();  
  34.         dt.Columns.Add("SName");  
  35.         dt.Columns.Add("Email");  
  36.         dt.Columns.Add("Address");  
  37.         return dt;  
  38.     }  
  39.     protected void GetData(DataTable dt)  
  40.     {  
  41.         StringBuilder sb = new StringBuilder();  
  42.         if (dt.Rows.Count > 0)  
  43.         {  
  44.             sb.AppendLine("<table cellpadding=\"0\" cellspacing=\"0\" class=\"custom-tablePopup\">");  
  45.             sb.AppendLine("<tr><th>Student Name<th>");  
  46.             sb.AppendLine("<th>Email</th>");  
  47.             sb.AppendLine("<th>Address</th></tr>");  
  48.             foreach (DataRow dr in dt.Rows)  
  49.             {  
  50.                 sb.AppendLine("<tr>");  
  51.                 sb.AppendLine("<td>" + dr["SName"].ToString() + "</td>");  
  52.                 sb.AppendLine("<td>" + dr["Email"].ToString() + "</td>");  
  53.                 sb.AppendLine("<td>" + dr["Address"].ToString() + "</td>");  
  54.                 sb.AppendLine("</tr>");  
  55.             }  
  56.             sb.AppendLine("</table>");  
  57.             lit.Text = sb.ToString();  
  58.         }  
  59.     }  
  60. }


Similar Articles