Post
Ask Question

Add or Remove Dynamic Textbox Using jQuery

Abstraction

Many new developers encounter a situation where there is a need to add dynamic control on the client side. This article will help them to understand how to add dynamic control on the client side using jQuery. Here I have described it using a step-by-step approach.

Initial chamber

Step 1

Open Visual Studio and create an empty website, provide a suitable name such as AddDynamicTextBox.

Step 2

In Solution Explorer you will get your empty website. Then add web forms.

For Web Form

AddDynamicTextBox (your empty website). Right-click and select Add New Item, then Web Form. Name it AddDynamicTextBox.aspx.

Design chamber

Step 3

Open AddDynamicTextBox.aspx file and write some code for the design of the application.

First add the jQuery plugin to your head section. Here I have used jquery-1.10.2.js plugin for demonstration purposes.

How to add in your page

  1. <script src="http://code.jquery.com/jquery-1.10.2.js"></script>  
Write some script for add or remove as in the following:
  1. <script type="text/javascript">  
  2.     $(document).ready(function () {  
  3.         $('#add').click(function () {  
  4.             var table = $(this).closest('table');  
  5.             console.log(table.find('input:text').length);  
  6.             if (table.find('input:text').length < 50) {  
  7.                 var x = $(this).closest('tr').nextAll('tr');  
  8.                 $.each(x, function (i, val) {  
  9.                     val.remove();  
  10.                 });  
  11.                 table.append('<tr><td style="width:200px;" align="right">First Name <td> <input type="text" id="current Name" value="" /> </td><td style="width:200px;" align="right">Last Name <td> <input type="text" id="current Name" value="" /> </td></tr>');  
  12.                 $.each(x, function (i, val) {  
  13.                     table.append(val);  
  14.                 });  
  15.             }  
  16.         });  
  17.         $('#del').click(function () {  
  18.             var table = $(this).closest('table');  
  19.             if (table.find('input:text').length > 1) {  
  20.                 table.find('input:text').last().closest('tr').remove();  
  21.             }  
  22.         });  
  23.     });  
  24. </script>  
Add HTML on your page and your page will look like the following:
  1. <div>  
  2.     <table border="0" cellspacing="2">  
  3.         <tr>  
  4.             <td style="width: 200px;" align="right">Name  
  5.     <td>  
  6.         <input type="text" id="Job Name" value="" />  
  7.     </td>  
  8.             </td>  
  9.         </tr>  
  10.         <tr>  
  11.             <td align="right">Versions</td>  
  12.             <td>  
  13.                 <select id="version" style="width: 350px;">  
  14.                     <option value="">SELECT</option>  
  15.                 </select>  
  16.             </td>  
  17.         </tr>  
  18.         <tr>  
  19.             <td align="right">Test Scripts</td>  
  20.             <td>  
  21.                 <select id="testscripts" style="width: 350px;"></select>  
  22.             </td>  
  23.         </tr>  
  24.         <tr>  
  25.             <td align="right">datas</td>  
  26.             <td>  
  27.                 <input type="button" id="add" value="Add" />  
  28.                 <input type="button" id="del" value="Del" />  
  29.             </td>  
  30.         </tr>  
  31.         <tr>  
  32.             <td style="height: 3px" colspan="2"></td>  
  33.         </tr>  
  34.   
  35.   
  36.   
  37.     </table>  
  38. </div>  
Now your code looks as in the following:

design

Now your page looks as in the following.

AddDynamicTextBox.aspx
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="AddDynamicTextBox.aspx.cs" Inherits="AddDynamicTextBox" %>  
  2.   
  3. <!DOCTYPE html>  
  4.   
  5. <html xmlns="http://www.w3.org/1999/xhtml">  
  6. <head runat="server">  
  7.     <title>C# corner article</title>  
  8.     <script src="http://code.jquery.com/jquery-1.10.2.js"></script>  
  9.     <script type="text/javascript">  
  10.         $(document).ready(function () {  
  11.             $('#add').click(function () {  
  12.                 var table = $(this).closest('table');  
  13.                 console.log(table.find('input:text').length);  
  14.                 if (table.find('input:text').length < 50) {  
  15.                     var x = $(this).closest('tr').nextAll('tr');  
  16.                     $.each(x, function (i, val) {  
  17.                         val.remove();  
  18.                     });  
  19.                     table.append('<tr><td style="width:200px;" align="right">First Name <td> <input type="text" id="current Name" value="" /> </td><td style="width:200px;" align="right">Last Name <td> <input type="text" id="current Name" value="" /> </td></tr>');  
  20.                     $.each(x, function (i, val) {  
  21.                         table.append(val);  
  22.                     });  
  23.                 }  
  24.             });  
  25.             $('#del').click(function () {  
  26.                 var table = $(this).closest('table');  
  27.                 if (table.find('input:text').length > 1) {  
  28.                     table.find('input:text').last().closest('tr').remove();  
  29.                 }  
  30.             });  
  31.         });  
  32.     </script>  
  33. </head>  
  34. <body>  
  35.     <form id="form1" runat="server">  
  36.         <div>  
  37.             <table border="0" cellspacing="2">  
  38.                 <tr>  
  39.                     <td style="width: 200px;" align="right">Name  
  40.             <td>  
  41.                 <input type="text" id="Job Name" value="" />  
  42.             </td>  
  43.                     </td>  
  44.                 </tr>  
  45.                 <tr>  
  46.                     <td align="right">Versions</td>  
  47.                     <td>  
  48.                         <select id="version" style="width: 350px;">  
  49.                             <option value="">SELECT</option>  
  50.                         </select>  
  51.                     </td>  
  52.                 </tr>  
  53.                 <tr>  
  54.                     <td align="right">Test Scripts</td>  
  55.                     <td>  
  56.                         <select id="testscripts" style="width: 350px;"></select>  
  57.                     </td>  
  58.                 </tr>  
  59.                 <tr>  
  60.                     <td align="right">datas</td>  
  61.                     <td>  
  62.                         <input type="button" id="add" value="Add" />  
  63.                         <input type="button" id="del" value="Del" />  
  64.                     </td>  
  65.                 </tr>  
  66.                 <tr>  
  67.                     <td style="height: 3px" colspan="2"></td>  
  68.                 </tr>  
  69.   
  70.   
  71.   
  72.             </table>  
  73.         </div>  
  74.     </form>  
  75. </body>  
  76. </html>  
In the code behind page, there is no need to write something here because I've provided everything from the front end.

AddDynamicTextBox.aspx.cs
  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.   
  8. public partial class AddDynamicTextBox : System.Web.UI.Page  
  9. {  
  10.     protected void Page_Load(object sender, EventArgs e)  
  11.     {  
  12.   
  13.     }  
  14. }  
Output

Here's a screenshot showing the interface before adding the TextBox.

Before creating textbox
Figure 1

Here's a screenshot showing the interface after adding the TextBox.

After creating
Figure 2

add text box
Figure 3

textbox
Figure 4

I hope you liked this. Have a good day. Thank you for reading.


Similar Articles