Friday, 15 June 2012

Create,Populate & Remove dynamic textbox at runtime using javascript

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

 <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"/>&nbsp;';  
       newdiv.innerHTML = newdiv.innerHTML + '<input type="text" 
value="' + cvalue[1] + '" id="txt2' + (i + 1) + '" 
disabled="true"/>&nbsp;';  
       newdiv.innerHTML = newdiv.innerHTML + '<input type="text" 
value="' + cvalue[2] + '" id="txt3' + (i + 1) + '"
disabled="true"/>&nbsp;';  
       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 + '" />&nbsp;';  
   newdiv.innerHTML = newdiv.innerHTML + '<input type="text" value="" 
id="txt2' + num + '" />&nbsp;';  
   newdiv.innerHTML = newdiv.innerHTML + '<input type="text" value="" 
id="txt3' + num + '" />&nbsp;';  
   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.

2 comments: