Dynamic Create TextBox Control and Submit value using Javascript

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="addcontrol.aspx.cs" Inherits="addcontrol" %>  
  2.   
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  4.   
  5. <html xmlns="http://www.w3.org/1999/xhtml">  
  6. <head runat="server">  
  7.     <title></title>  
  8.         <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>  
  9.     <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>  
  10.     <script>  
  11.     $(document).ready(function() {  
  12.         var iCnt = 0;  
  13.         // CREATE A "DIV" ELEMENT AND DESIGN IT USING JQUERY ".css()" CLASS.  
  14.         var container = $(document.createElement('div')).css({  
  15.             padding: '5px', margin: '20px', width: '170px', border: '1px dashed',  
  16.             borderTopColor: '#999', borderBottomColor: '#999',  
  17.             borderLeftColor: '#999', borderRightColor: '#999'  
  18.         });  
  19.         $('#btAdd').click(function() {  
  20.             if (iCnt <= 19) {  
  21.                 iCnt = iCnt + 1;  
  22.                 // ADD TEXTBOX.  
  23.                 $(container).append('<input type=text class="input" id=tb' + iCnt + ' value="Text Element ' + iCnt + '" />');  
  24.   
  25.                 if (iCnt == 1) {        // SHOW SUBMIT BUTTON IF ATLEAST "1" ELEMENT HAS BEEN CREATED.  
  26.                     var divSubmit = $(document.createElement('div'));  
  27.                     $(divSubmit).append('<input type=button class="bt" onclick="GetTextValue()" id=btSubmit value=Submit />');  
  28.                 }  
  29.                 $('#main').after(container, divSubmit);   // ADD BOTH THE DIV ELEMENTS TO THE "main" CONTAINER.  
  30.             }  
  31.             else {      // AFTER REACHING THE SPECIFIED LIMIT, DISABLE THE "ADD" BUTTON. (20 IS THE LIMIT WE HAVE SET)  
  32.                 $(container).append('<label>Reached the limit</label>');   
  33.                 $('#btAdd').attr('class', 'bt-disable');   
  34.                 $('#btAdd').attr('disabled', 'disabled');  
  35.             }  
  36.         });  
  37.         $('#btRemove').click(function() {   // REMOVE ELEMENTS ONE PER CLICK.  
  38.             if (iCnt != 0) { $('#tb' + iCnt).remove(); iCnt = iCnt - 1; }  
  39.             if (iCnt == 0) { $(container).empty();   
  40.                 $(container).remove();   
  41.                 $('#btSubmit').remove();   
  42.                 $('#btAdd').removeAttr('disabled');   
  43.                 $('#btAdd').attr('class', 'bt')   
  44.             }  
  45.         });  
  46.         $('#btRemoveAll').click(function() {    // REMOVE ALL THE ELEMENTS IN THE CONTAINER.  
  47.             $(container).empty();   
  48.             $(container).remove();   
  49.             $('#btSubmit').remove(); iCnt = 0;   
  50.             $('#btAdd').removeAttr('disabled');   
  51.             $('#btAdd').attr('class', 'bt');  
  52.         });  
  53.     });  
  54.   
  55.     // PICK THE VALUES FROM EACH TEXTBOX WHEN "SUBMIT" BUTTON IS CLICKED.  
  56.     var divValue, values = '';  
  57.     function GetTextValue() {  
  58.         $(divValue).empty();   
  59.         $(divValue).remove(); values = '';  
  60.         $('.input').each(function() {  
  61.             divValue = $(document.createElement('div')).css({  
  62.                 padding:'5px', width:'200px'  
  63.             });  
  64.             values += this.value + '<br />'  
  65.         });  
  66.         $(divValue).append('<p><b>Your selected values</b></p>' + values);  
  67.         $('body').append(divValue);  
  68.     }  
  69. </script>  
  70.   
  71. </head>  
  72. <body>  
  73.     <form id="form1" runat="server">  
  74.     <div id="main">  
  75.         <input type="button" id="btAdd" value="Add Element" class="bt" />  
  76.         <input type="button" id="btRemove" value="Remove Element" class="bt" />  
  77.         <input type="button" id="btRemoveAll" value="Remove All" class="bt" /><br />  
  78.     </div>  
  79.     </form>  
  80. </body>  
  81. </html>