How to Add TextBox Dynamically Using JavaScript in ASP.Net

Chandan Sharma
10y
59.5k
0
0

Article

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.

.Aspx Code

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

.TemplateTable

{

width: 80%;

margin-left: 3%;

border: 2px solid #a7a8a7;

margin-top: 30px;

padding-left: 35px;

font-size: 15px;

font-style: initial;

font-weight: bold;

color: #a7a8a7;

padding-top: 3px;

padding-bottom: 3px;

}

.TemplateTable tr td div

{

float: left;

padding-right: 10px;

font-size: 16px;

}

.TemplateTable tr td div a

{

color: Blue;

}

.custom-tablePopup

{

font-family: Arial, Helvetica, sans-serif;

font-size: 13px;

margin: 10px 0 0 0;

padding: 0;

border-right: 1px solid #bebebe;

border-top: 1px solid #bebebe;

border-bottom: 1px solid #bebebe;

}

.custom-tablePopup th

{

background: #ff5c00 !important;

text-align: left;

border-left: 1px solid #bebebe;

border-bottom: 1px solid #bebebe;

padding: 5px 8px;

color: #fff;

}

.custom-tablePopup td

{

border-left: 1px solid #bebebe;

padding: 4px 8px;

}

.custom-tablePopup tr:nth-child(even)

{

background: #f8f8f8;

}

</style>

var count = "1";

function addRow(in_tbl_name) {

var tbody = document.getElementById(in_tbl_name).getElementsByTagName("TBODY")[0];

// create row

var row = document.createElement("TR");

// create table cell 2

var td1 = document.createElement("TD")

var strHtml2 = "<input type=\"text\" name=\"SName\" size=\"30\" maxlength=\"30\" />";

td1.innerHTML = strHtml2.replace(/!count!/g, count);

// create table cell 3

var td2 = document.createElement("TD")

var strHtml3 = "<input type=\"text\" name=\"Email\" size=\"30\" maxlength=\"30\" />";

td2.innerHTML = strHtml3.replace(/!count!/g, count);

// create table cell 4

var td3 = document.createElement("TD")

var strHtml4 = "<input type=\"text\" name=\"Address\" size=\"30\" maxlength=\"30\" />";

td3.innerHTML = strHtml4.replace(/!count!/g, count);

// create table cell 5

var td4 = document.createElement("TD")

var strHtml5 = "<img src=\"Images/icon_03.png\" onclick=\"delRow()\" style=\"width: 22px; cursor:pointer;\" />";

td4.innerHTML = strHtml5.replace(/!count!/g, count);

// append data to row

row.appendChild(td1);

row.appendChild(td2);

row.appendChild(td3);

row.appendChild(td4);

count = parseInt(count) + 1;

// add to count variable

// append row to table

tbody.appendChild(row);

}

function delRow() {

var current = window.event.srcElement;

//here we will delete the line

while ((current = current.parentElement) && current.tagName != "TR");

current.parentElement.removeChild(current);

}

</script>

</head>

<body>

<div>

<tr>

<td>

Add New Template

</td>

<div>

<div>

<a title="Add more template" style="cursor: pointer;" onclick="addRow('tblPets')">Add

Template</a>

</div>

</td>

</tr>

</table>

</div>

<tr>

<th>Student Name</th>

<th>Email</th>

<th>Address</th>

</tr>

<tr>

</tr>

</table>

</div>

<div>

<asp:Button ID="btnSave" runat="server" Text="Save" OnClick="btnSave_Click" />

</div>

<div>

<asp:Literal ID="lit" runat="server"></asp:Literal>

</div>

</form>

</body>

</html>

.CS Code

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.Script.Serialization;

using System.Data;

using System.Text;

public partial class _Default : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

}

protected void btnSave_Click(object sender, EventArgs e)

{

string[] SName = Request.Form.GetValues("SName");

string[] Email = Request.Form.GetValues("Email");

string[] Address = Request.Form.GetValues("Address");

DataTable dtable = dt();

for (int i = 0; i <= SName.Length - 1; i++)

{

DataRow row1 = dtable.NewRow();

row1["SName"] = SName[i];

row1["Email"] = Email[i];

row1["Address"] = Address[i];

dtable.Rows.Add(row1);

}

GetData(dtable);

}

static DataTable dt()

{

DataTable dt = new DataTable();

dt.Columns.Add("SName");

dt.Columns.Add("Email");

dt.Columns.Add("Address");

return dt;

}

protected void GetData(DataTable dt)

{

StringBuilder sb = new StringBuilder();

if (dt.Rows.Count > 0)

{

sb.AppendLine("<table cellpadding=\"0\" cellspacing=\"0\" class=\"custom-tablePopup\">");

sb.AppendLine("<tr><th>Student Name<th>");

sb.AppendLine("<th>Email</th>");

sb.AppendLine("<th>Address</th></tr>");

foreach (DataRow dr in dt.Rows)

{

sb.AppendLine("<tr>");

sb.AppendLine("<td>" + dr["SName"].ToString() + "</td>");

sb.AppendLine("<td>" + dr["Email"].ToString() + "</td>");

sb.AppendLine("<td>" + dr["Address"].ToString() + "</td>");

sb.AppendLine("</tr>");

}

sb.AppendLine("</table>");

lit.Text = sb.ToString();

}

Up Next

Ebook Download

View all

Diving Into ASP.NET WebAPI

Read by 6.2k people

Download Now!

Learn

View all