How To Create TextBox Dynamically using Javascript and Read Control Value In Code Behind

Step1.Create an asp.net application with 2 Button  and a GridViewas shown below.

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

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

  <script type="text/javascript">
function addElement() {
    var ni = document.getElementById('myDiv');
    var numi = document.getElementById('theValue');
    var num = (document.getElementById('theValue').value -1)+2;
    numi.value = num;
    var newdiv = document.createElement('div');
    var divIdName = 'my'+num+'Div';
    newdiv.setAttribute('id',divIdName);
    newdiv.innerHTML = '<input type="text"  name="TextBox'+num+'" value="TextBox'+num+'" >';    
    ni.appendChild(newdiv);
  } 


  </script>

  <title>Untitled Page</title>
</head>
<body>
  <form id="form1" runat="server">
      <asp:GridView ID="GridView1" runat="server">
      </asp:GridView>
      <div id="myDiv">
      </div>
      <input type="button" id="btnOfficial" value="Add Another TextBox" onclick="addElement();" />
      <input type="hidden" value="1" id="theValue" runat="server" />
      <asp:Button ID="btnSave" runat="server" OnClick="btnSave_Click" Text="Read" />
  </form>
</body>
</html>
Step 2: Add the following code behind.

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class DynamicTextboxJavascript : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{

}
protected void btnSave_Click(object sender, EventArgs e)
{

     ArrayList alForm = new ArrayList();
        //Because my textbox id is started
       // with 2 like(TextBox2,TextBox3.....
        for (int i = 2; i< Request.Form.Count - 2;i++)
        {
            string strId = "TextBox" + i.ToString();
            string strValue = Request.Form[strId].ToString();
            alForm.Add(strValue);
            strValue = "";


     }
      //Uncomment this line and test.
    //foreach (string x in Request.Form)
   //{

    //   string strValue = Request.Form[x].ToString();
     //  alForm.Add(strValue);

   //}
  GridView1.DataSource = alForm;
  GridView1.DataBind();
  

}
}
Reactions

Post a Comment

8 Comments

  1. Its a very Nice ariticle towards Dynamic creation of controls.Thanx.

    ReplyDelete
  2. This is nice
    Thanks

    But what i want is to create Asp:Textbox....

    so that i can directly find control at server side code... to save the data...

    Please tell how to do....

    thanx...

    ReplyDelete
  3. Hi Bhaarat,
    u can also create server control dynamically at server side.
    check this post
    http://aspdotnetcodebook.blogspot.com/2008/03/how-to-create-textbox-control.html

    ReplyDelete
  4. how can we add drop down control in similar way and retrieve the value

    ReplyDelete
  5. i really pleased to read that article,
    thank you so much.

    ReplyDelete

Please do not post any spam link in the comment box😊

Emoji
(y)
:)
:(
hihi
:-)
:D
=D
:-d
;(
;-(
@-)
:P
:o
:>)
(o)
:p
(p)
:-s
(m)
8-)
:-t
:-b
b-(
:-#
=p~
x-)
(k)

Close Menu