In this article I will explain how to create, save and remove dynamic textbox at run time in asp.net using JavaScript. JavaScript is a very useful language for client side scripting. Often
you need to add control dynamically in your page. Sometimes you need
customization according to client selection criteria. JavaScript is very
handy to fulfill these. There are many ways to add a control
dynamically using JavaScript.
To start with i added code in default.aspx
then write code in default.aspx.cs file
<head runat="server">
<title></title>
<script src="scripts/dynamictextbox.js" type="text/javascript">
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:HiddenField ID="hdnValues" runat="server" />
<asp:HiddenField ID="addMore" runat="server" />
<img alt="" src="../images_common/blank.jpg"
onload="javascript:showaddElement('<%=strID%>','<%=objvalue%>');" />
<div>
<table>
<tr>
<td style="width: 100%">
<table width="100%">
<tr>
<td style="width: 20%" align="left">
TextBox1
</td>
<td style="width: 20%" align="left">
TextBox2
</td>
<td style="width: 20%" align="left">
TextBox3
</td>
</tr>
</table> </td> </tr>
<tr>
<td style="width: 100%">
<%-- For Only Example--%>
<div id="showexDiv" runat="server">
<table style="width: 100%">
<tr>
<td style="width: 25%">
<asp:TextBox ID="txt1" runat="server"
Text="example1" Enabled="false"></asp:TextBox>
</td>
<td style="width: 25%">
<asp:TextBox ID="txt2" runat="server"
Text="example2" Enabled="false"></asp:TextBox>
</td>
<td style="width: 25%">
<asp:TextBox ID="txt3" runat="server"
Text="example3" Enabled="false"></asp:TextBox>
</td>
<td style="width: 25%">
<a href="javascript:;" onclick="addElement();">
AddMore</a>
</td>
</tr>
</table>
</div>
<div id="showmyDiv" runat="server">
<table style="width: 100%">
<tr>
<td style="width: 25%">
</td>
<td style="width: 25%">
</td>
<td style="width: 25%">
</td>
<td style="width: 28%">
<a href="javascript:;" onclick="addElement();">
AddMore</a>
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td colspan="4">
<table style="width: 100%">
<tr>
<td>
<div id="myDiv">
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</form>
</body>
then write code in default.aspx.cs file
public static string strID = "";
public static string objvalue = "";
protected void Page_Load(object sender, EventArgs e)
{
this.showexDiv.Attributes.Add("style", "display:inline");
this.showmyDiv.Attributes.Add("style", "display:none");
}
private void SaveData()
{
// write code for save textbox values in DB
hdnValues.Value = ""; // give value from DB
if (hdnValues.Value != "")
{
this.showmyDiv.Attributes.Add("style", "display:inline");
this.showexDiv.Attributes.Add("style", "display:none");
}
else
{
this.showexDiv.Attributes.Add("style", "display:inline");
this.showmyDiv.Attributes.Add("style", "display:none");
}
}
Add code in dynamictextbox.js file
var numi;
var num;
var count;
function showaddElement(id, txtvalue) {
var data = txtvalue.split('>>')
var txtid = data[0];
var txtvalues = data[1];
if (id == txtid) {
var countvalue = txtvalues.split(';');
count = countvalue.length;
}
numi = document.getElementById("addMore");
if (count > 0) {
numi.value = count;
num = (count - 1) + 2;
numi.value = num;
var newdiv = document.createElement("div");
var showDiv = document.getElementById("myDiv");
for (var i = 0; i < count; i++) {
var newdiv = document.createElement("div");
var divIdName = "my" + (i + 1) + "Div";
newdiv.setAttribute("id", divIdName);
var cvalue = countvalue[i].split(',');
newdiv.innerHTML = newdiv.innerHTML + '<input type="text"
value="' + cvalue[0] + '" id="txt1' + (i + 1) + '"
disabled="true"/> ';
newdiv.innerHTML = newdiv.innerHTML + '<input type="text"
value="' + cvalue[1] + '" id="txt2' + (i + 1) + '"
disabled="true"/> ';
newdiv.innerHTML = newdiv.innerHTML + '<input type="text"
value="' + cvalue[2] + '" id="txt3' + (i + 1) + '"
disabled="true"/> ';
newdiv.innerHTML = newdiv.innerHTML + '<input type="button"
value="Populate" id="btnRemove' + (i + 1) + '"
onclick="removeElement(\'' + divIdName + '\',this)"/>';
newdiv.innerHTML = newdiv.innerHTML + '<br>';
showDiv.appendChild(newdiv);
}
}
else {
num = (document.getElementById("addMore").value - 1) + 2;
numi.value = num;
}
}
function addElement() {
var orgDV = document.getElementById("myDiv");
GetchildControls(orgDV);
var newdiv = document.createElement("div");
var divIdName = "my" + num + "Div";
newdiv.setAttribute("id", divIdName);
newdiv.innerHTML = newdiv.innerHTML + '<input type="text" value=""
id="txt1' + num + '" /> ';
newdiv.innerHTML = newdiv.innerHTML + '<input type="text" value=""
id="txt2' + num + '" /> ';
newdiv.innerHTML = newdiv.innerHTML + '<input type="text" value=""
id="txt3' + num + '" /> ';
newdiv.innerHTML = newdiv.innerHTML + '<input type="button"
value="Populate" id="btnRemove' + num + '" onclick="removeElement(
\'' + divIdName + '\',this)"/>';
num = (num - 1) + 2;
numi = num;
orgDV.appendChild(newdiv);
}
function GetchildControls(orgDV) {
var divs = orgDV.getElementsByTagName("div");
for (var i = 0; i < divs.length; i++) {
dv = document.getElementById(divs[i].id);
var collection = dv.getElementsByTagName('input');
for (var x = 0; x < collection.length; x++) {
if (collection[x].type.toUpperCase() == 'TEXT')
document.getElementById(collection[x].id).disabled = true;
}
}
}
function GetchildControlValues() {
var orgDV = document.getElementById('myDiv');
var divs = orgDV.getElementsByTagName("div");
var hdnValues = document.getElementById("hdnValues");
hdnValues.value = "";
for (var i = 0; i < divs.length; i++) {
dv = document.getElementById(divs[i].id);
var collection = dv.getElementsByTagName('input');
for (var x = 0; x < collection.length; x++) {
if (collection[x].type.toUpperCase() == 'TEXT') {
if (hdnValues.value == "") {
if (document.getElementById(collection[x].id).value != "")
hdnValues.value = document.getElementById(
collection[x].id).value;
}
else
if (document.getElementById(collection[x].id).value != "")
hdnValues.value = hdnValues.value + "," +
document.getElementById(collection[x].id).value;
}
if (collection[x].type.toUpperCase() == 'BUTTON') {
if (hdnValues.value != "")
hdnValues.value = hdnValues.value + "BUTTON";
}
}
}
hdnValues.value = hdnValues.value.substring(0,
hdnValues.value.lastIndexOf("BUTTON"));
}
function removeElement(divNum, btn) {
var orgDV = document.getElementById('myDiv');
var olddiv = document.getElementById(divNum);
if (btn.value.toLowerCase() == 'populate') {
if (olddiv != null) {
var collection = olddiv.getElementsByTagName('input');
for (var x = 0; x < collection.length; x++) {
if (collection[x].type.toUpperCase() == 'TEXT')
document.getElementById(collection[x].id).disabled = false;
if (collection[x].type.toUpperCase() == 'BUTTON')
document.getElementById(collection[x].id).value = "Remove";
}
}
}
else if (btn.value.toLowerCase() == 'remove') {
orgDV.removeChild(olddiv);
}
}
Just drop me a comment if you have any suggestion, comments or query.
gdsfgdfgdfgdfg
ReplyDeletedfgdfgsdfgdfgdfgfgfdg
ReplyDelete