locked
Adding a new textbox on button click RRS feed

  • Question

  • User1276038744 posted

    is there a way to dynamically add

    a text box, checkbox and button when i click on the add button?

    I have a text box, checkbox, a delete button and an add button. When the add button is clicked it adds a new text box, checkbox and button. And when the delete button is clicked it deletes the connecting textfield.

    Any Help?

    Thursday, September 25, 2008 7:05 AM

Answers

  • User1602246193 posted

    You could have a look at using multiviews Or you can set these controls to invisible and then whenever you clicks add button to make them visible.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, September 25, 2008 7:38 AM
  • User-712407825 posted

     Hi,

    Yes of course , there is one way but it is very tedious  

    eg.

    TextBox t = new TextBoc();

    t.Id = "mybox";

    this.Controls.Add(t);

    It may help you 

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, September 25, 2008 7:44 AM
  • User3011751 posted

    Hi,
    You can put the controls inside a div with a style of display:hidden.
    Then use the OnClientSide event of the buttons to play with the display of the div (put display:inline in order to show the div).

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, September 25, 2008 7:47 AM
  • User-808362359 posted

      

            <script language="javascript" type="text/javascript">
            var rowNum = 1;
            function AddAnotherItem()
            {
                var strAddRow;     
                
                rowNum++;
                
                strAddRow = '<table border="0" cellpadding="2" cellspacing="1"><tr>'; 
                strAddRow = strAddRow + '<td style="width:50px">   ' + rowNum + '.</td>';           
                strAddRow = strAddRow + '<td><input type="text" id="txtName' + rowNum + '" /></td>';
                strAddRow = strAddRow + '<td><input type="checkbox" id="checkbox' + rowNum + '" /></td>';
                strAddRow = strAddRow + '</tr></table>';
    
                document.getElementById("divCassy01").insertAdjacentHTML("beforeend",strAddRow);
                document.getElementById("txtName" + rowNum).focus();
                document.getElementById("btnRemove").disabled = false;
            }
            function RemoveItem()
            {
                if (rowNum > 1)
                {               
                    document.getElementById('divCassy01').removeChild(document.getElementById('divCassy01').children(--rowNum));
                    document.getElementById('txtName' + rowNum).focus();
                }
                if(rowNum == 1)
                {
                    document.getElementById("btnRemove").disabled = true;
                }            
            }
            </script>
    ---------------------------------------------------------------------------------------------------------------------------
    
        <div id="divCassy01">
        <table border="0" cellpadding="2" cellspacing="1">
            
            <tr>
                <td align="center"><asp:Label SkinID="Label" runat="server" ID="lblSlNo" Text="Sl. No." /></td>
                <td align="center"><asp:Label SkinID="Label" runat="server" ID="lblName" Text="Name" /></td>
                <td align="center"></td>
            </tr>
            <tr>
                <td style="width:50px">   1.</td>
                <td>
                    <input type="text" id="txtName1" /></td>
                <td>
                    <input type="checkbox" id="checkbox1" /></td>            
                
            </tr>        
          </table>
        </div>
        <input type="button" onclick="javascript:return AddAnotherItem();" value="Add Another" id="btnAddAnother"/>
         
        <input type="button" onclick="javascript:return RemoveItem();" value="Remove" disabled="disabled" id="btnRemove" />
     
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, September 25, 2008 8:05 AM
  • User-2119480821 posted

    Another way of doin, an example.

    If your are looking for this, try it out..

     <table cellSpacing="0" cellPadding="0" align="center" border="0" width="95%">
        <tr>
          <th height="18">TEST</th>
        </tr>
       <%
      Dim sRow As String = Request.QueryString("sNo")
      Dim i As Integer
      sRow =   If sRow <> 0 Then
       Response.Write("<tr><td align='center'><b>Count</b></td>")
       Response.Write("<td align='center'><b>No.</b></td>")
       Response.Write("<td align='center'><b>Connect From</b></td>")
       Response.Write("<td align='center'><b>Connect Till</b></td>")   
      End If
      For i = 1 To sRow
       Response.Write("<tr><td align='center'>"& i &"</td>")
       Response.Write("<td align='center'><input type='text' id='txtNo"& i &"' name='txtNo"& i &"' runat='server' style='WIDTH: 80px' /></td>")
       Response.Write("<td align='center'><input type='text' id='txtConn1"& i &"' name='txtConn1"& i &"' runat='server' style='WIDTH: 80px' /></td>")
       Response.Write("<td align='center'><input type='text' id='txtConn2"& i &"' name='txtConn2"& i &"' runat='server' style='WIDTH: 80px' /></td>")
      Next
     %>
     <tr>
      <td align="center">
       <input type="button" id="btnSubmit" runat="server" value="Submit">
      </td>
     </tr>
    </table>

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, September 25, 2008 8:33 AM

All replies

  • User1602246193 posted

    You could have a look at using multiviews Or you can set these controls to invisible and then whenever you clicks add button to make them visible.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, September 25, 2008 7:38 AM
  • User-712407825 posted

     Hi,

    Yes of course , there is one way but it is very tedious  

    eg.

    TextBox t = new TextBoc();

    t.Id = "mybox";

    this.Controls.Add(t);

    It may help you 

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, September 25, 2008 7:44 AM
  • User3011751 posted

    Hi,
    You can put the controls inside a div with a style of display:hidden.
    Then use the OnClientSide event of the buttons to play with the display of the div (put display:inline in order to show the div).

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, September 25, 2008 7:47 AM
  • User169219854 posted

    HI Cassy01,

    As someone told its correct. Instead of creating dynamic controls on runtime, have them hidden and make them visible on click.

    You can do it by:

    TextBox1.Visible = false;

    and

    TextBox1.Visible = true;

     

    why I am suggesting this is, if you create dynamic controls they are difficult to manage when postback happens. If you have very specific list of controls to appear use hide / show method.

    If you don't know how many controls you need to create dynamically (Its completely dependent on user) use dynamically created controls as told above.

     If it is usefull MARK IT AS ANSWER

    Thanks

    Thursday, September 25, 2008 7:59 AM
  • User-808362359 posted

      

            <script language="javascript" type="text/javascript">
            var rowNum = 1;
            function AddAnotherItem()
            {
                var strAddRow;     
                
                rowNum++;
                
                strAddRow = '<table border="0" cellpadding="2" cellspacing="1"><tr>'; 
                strAddRow = strAddRow + '<td style="width:50px">   ' + rowNum + '.</td>';           
                strAddRow = strAddRow + '<td><input type="text" id="txtName' + rowNum + '" /></td>';
                strAddRow = strAddRow + '<td><input type="checkbox" id="checkbox' + rowNum + '" /></td>';
                strAddRow = strAddRow + '</tr></table>';
    
                document.getElementById("divCassy01").insertAdjacentHTML("beforeend",strAddRow);
                document.getElementById("txtName" + rowNum).focus();
                document.getElementById("btnRemove").disabled = false;
            }
            function RemoveItem()
            {
                if (rowNum > 1)
                {               
                    document.getElementById('divCassy01').removeChild(document.getElementById('divCassy01').children(--rowNum));
                    document.getElementById('txtName' + rowNum).focus();
                }
                if(rowNum == 1)
                {
                    document.getElementById("btnRemove").disabled = true;
                }            
            }
            </script>
    ---------------------------------------------------------------------------------------------------------------------------
    
        <div id="divCassy01">
        <table border="0" cellpadding="2" cellspacing="1">
            
            <tr>
                <td align="center"><asp:Label SkinID="Label" runat="server" ID="lblSlNo" Text="Sl. No." /></td>
                <td align="center"><asp:Label SkinID="Label" runat="server" ID="lblName" Text="Name" /></td>
                <td align="center"></td>
            </tr>
            <tr>
                <td style="width:50px">   1.</td>
                <td>
                    <input type="text" id="txtName1" /></td>
                <td>
                    <input type="checkbox" id="checkbox1" /></td>            
                
            </tr>        
          </table>
        </div>
        <input type="button" onclick="javascript:return AddAnotherItem();" value="Add Another" id="btnAddAnother"/>
         
        <input type="button" onclick="javascript:return RemoveItem();" value="Remove" disabled="disabled" id="btnRemove" />
     
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, September 25, 2008 8:05 AM
  • User-2119480821 posted

    Another way of doin, an example.

    If your are looking for this, try it out..

     <table cellSpacing="0" cellPadding="0" align="center" border="0" width="95%">
        <tr>
          <th height="18">TEST</th>
        </tr>
       <%
      Dim sRow As String = Request.QueryString("sNo")
      Dim i As Integer
      sRow =   If sRow <> 0 Then
       Response.Write("<tr><td align='center'><b>Count</b></td>")
       Response.Write("<td align='center'><b>No.</b></td>")
       Response.Write("<td align='center'><b>Connect From</b></td>")
       Response.Write("<td align='center'><b>Connect Till</b></td>")   
      End If
      For i = 1 To sRow
       Response.Write("<tr><td align='center'>"& i &"</td>")
       Response.Write("<td align='center'><input type='text' id='txtNo"& i &"' name='txtNo"& i &"' runat='server' style='WIDTH: 80px' /></td>")
       Response.Write("<td align='center'><input type='text' id='txtConn1"& i &"' name='txtConn1"& i &"' runat='server' style='WIDTH: 80px' /></td>")
       Response.Write("<td align='center'><input type='text' id='txtConn2"& i &"' name='txtConn2"& i &"' runat='server' style='WIDTH: 80px' /></td>")
      Next
     %>
     <tr>
      <td align="center">
       <input type="button" id="btnSubmit" runat="server" value="Submit">
      </td>
     </tr>
    </table>

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, September 25, 2008 8:33 AM