CODEWITHSUNDEEP
c#jqueryasp.netbuttontextbox
Ken Hollis
Ken Hollis

Reputation: 71

Create dynamic textboxes using javascript or jquery

I don't know what is it called(new in programming)but I need to make 1 TextBox and 1 Button that if user enter any number in TextBox and clicks the Button, TextBox will display depends on the number entered in TextBox for example user entered 5 in TextBox after clicking the button 5 TextBox will show

<table style="margin-top:10px; margin-bottom:10px">
                <tr>
                    <td width="300" style="text-align:left"><asp:Label ID="lbres1" runat="server"                            Text="Address"></asp:Label></td>
                    <td width="300"><asp:TextBox ID="txtres2" class="basetxt" runat="server" Width="290"></asp:TextBox></td>
                </tr>
                <tr>
                    <td style="text-align:left"><asp:Label ID="lbres3" runat="server" Text="Number of House occupant"></asp:Label></td>
                    <td><asp:TextBox ID="txtres4" class="basetxt" runat="server" Width="290">  </asp:TextBox></td>
                </tr>
                <tr>
                    <td style="text-align:left"><asp:Button ID="btnAddOccupant" runat="server" Text="+" />
                    <asp:Label ID="lbres5" runat="server" Text="Add Occupant"></asp:Label></td>
                </tr>
            </table>

should I add 1 TextBox and c# or jquery will do the rest?

It's inside the jquery dialog box btw

Upvotes: 0

Views: 5472

Answers (1)

SpiderCode
SpiderCode

Reputation: 10122

You can do it using javascript or JQuery. Here i am providing you using both JavaScript and JQuery. Please find the below sample for the same :

Using JavaScript : 

<input type="text" id="textInput" value="" />&nbsp;
<input type="button" id="buttonCreateTextbox" value="Create Textbox" onclick="CreateText();"/>

<div id="divDynamicTexts"></div>

<script type="text/javascript" language="javascript">
    function CreateText() {
        var text = '<input type="text#" id="textInput" value="" /><br/>';
        var textCount = document.getElementById('textInput').value;
        var html = '';
        for (var i = 0; i < $('#textInput').val() ; i++) {
            html = document.getElementById('divDynamicTexts').innerHTML;
            document.getElementById('divDynamicTexts').innerHTML = html + text.replace('#', i);
        }
    }
</script>

Using JQuery :

<input type="text" id="textInput" value="" />&nbsp;
<input type="button" id="buttonCreateTextbox" value="Create Textbox" onclick="CreateText();"/>

<div id="divDynamicTexts"></div>

<script type="text/javascript" language="javascript">
    $('#buttonCreateTextbox').click(function () {
        var text = '<input type="text#" id="textInput" value="" /><br/>';
        for (var i = 0; i < $('#textInput').val(); i++) {
            $('#divDynamicTexts').append(text.replace('#', i));
        }
    })
</script>

Note: Above examples are just sample. You can change it as per your requirement

Upvotes: 2

Related Questions