How to add dynamic asp.net textbox controls using jquery or javascript

Question

0.00/5 (No votes)

See more:

Hello,
I am new to javascript that I have a requirement.When I click + button the below row controls should be added. By using only asp.net control..Dont use html controls...
Would you please tell the coding for that?
This is my coding...

XML

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MedicalAndPolicies.aspx.cs" Inherits="Tax_Declaration_Format.MedicalAndPolicies" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
    <title></title>
    <style type="text/css">
        .style1
        {
            font-size: xx-large;
        }
        .style2
        {
            font-size: medium;
        }
    </style>



   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {

        var selector = $('#<%= MAndP1.ClientID %>');

       selector.hide();
        $('#<%= Yes.ClientID %>').change(function () {
            debugger
            selector.show();
        });

        $('#<%= No.ClientID %>').click(function () {
            selector.hide();
        });
    });

</script>

</head>
<body>
    <form id="form1" runat="server">
    <div align="center" class="style1">
        <strong>Medical And Policies</strong>

    <table id="MAndP" align="center">
        <tr>

            <td class="style2"><strong>Are parents included or not:</strong></td>
            <td>
                <asp:RadioButton ID="Yes"  runat="server" GroupName="YesOrNo" Text="Yes" onchange="handleChange1();"
                    style="font-size: medium" />
                <asp:RadioButton ID="No" runat="server" GroupName="YesOrNo" Text="No"  onchange="handleChange1();"
                    style="font-size: medium" /></td>
                </tr>
                </table>

    <table id="MAndP1" align="center"  runat="server">

        <tr>
            <td><asp:TextBox ID="TxtName"  placeholder="Enter Parent Name" runat="server"
                   ></asp:TextBox></td>
            <td><asp:TextBox ID="TxtAge" runat="server" placeholder="Enter Age"
                    Width="130px"></asp:TextBox></td>
                    <td>
                        <asp:FileUpload ID="FU1" runat="server" Width="184px" /></td>

            <td><asp:Button ID="BtnPlus" runat="server" Text="+"
                    onclick="BtnPlus_Click"  Width="24px" /></td>
             <td><asp:Button ID="BtnMinus" runat="server" Text="-"  /></td>

        </tr>
        </table>

    <table runat="server" id="MAndP2" align="center">

        <tr><td><asp:TextBox ID="TxtPloicyValue" runat="server" placeholder="Enter Policy Amount"></asp:TextBox></td>
        <td>
            <asp:Button ID="BtnPlusValue" runat="server" Text="+" /></td>
        </tr>
        </table>
        </div>


    </form>
</body>
</html>

Posted 29-May-14 20:30pm

dileeppeddinti

Add a Solution

Comments

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 30-May-14 4:18am

Here we answer specific questions which members face during programming.

We can't work on the whole source code. You need to do that yourself.
If you face any difficulty while coding, feel free to come back here and ask

another question with specific issue describing the scenario.

Members will be happy to help you then.

Happy Coding. :)

2 solutions

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Debabrata_Das · Answer 1 · 2014-06-02T20:57:00

Hi, I tried to create a small demo on this problem. This might be helpful to you.

XML

<script type="text/javascript">
    $(document).ready(function () {
        var counter = 2;
        function addRow() {
            var html = '<tr class="rowstyle"><td>Select File: <input type="file" id="FU' + counter + '" name="FU' + counter + '"></td><td><input type="button" class="BtnPlus" value="+" /></td><td><input type="button" class="BtnMinus" value="-" /></td>'
            $(html).appendTo($("#MAndP1"))
            counter++;
        };
        $("#MAndP1").on("click",".BtnPlus", addRow);
    });
</script>

XML

<table id="MAndP1" cellspacing="3">
    <tr class="rowstyle">
        <td>Select File: <asp:FileUpload ID="FU1" runat="server" /></td>
        <td><input type="button" class="BtnPlus" value="+" /></td>
        <td><input type="button" class="BtnMinus" value="-" /></td>
    </tr>
</table>

Debabrata_Das · Answer 2 · 2014-06-02T18:33:00

Solution 1

Hello friend, you may visit the below link:

http://www.ssiddique.info/different-ways-to-add-row-to-a-table-using-jquery.html[^]

Hope this will be helpful!

Posted 2-Jun-14 18:33pm

Debabrata_Das

How to add dynamic asp.net textbox controls using jquery or javascript

2 solutions

Solution 2

Solution 1

Add your solution here

Preview 0

How to add dynamic asp.net textbox controls using jquery or javascript

2 solutions

Solution 2

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us