Create dynamic textboxes using javascript or jquery

Question

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

It sounds like you're talking about cascading textboxes a search on that term would likely help. — M.Babcock
– M.Babcock, Commented Jan 18, 2014 at 3:49
so its called cascading textboxes thanks dude i don't really know what is the exact term for this — Ken Hollis
– Ken Hollis, Commented Jan 18, 2014 at 3:50
you mean you want to create number of textboxes based on user's input ? Let's say user enters 5 and click on the button then 5 new textboxes should be created. am I right ? — HardikS
– HardikS, Commented Jan 18, 2014 at 4:17
@Newbie : I have provided my solution. Hope it is useful to you and you like it. Don't forget to up vote and mark it as an answer so that it may help other developer's as well — HardikS
– HardikS, Commented Jan 20, 2014 at 9:54

HardikS · Accepted Answer · 2014-01-22 11:08:55Z

2

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

edited Jan 22, 2014 at 11:08

answered Jan 20, 2014 at 9:53

HardikS

10.1k2 gold badges25 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ken Hollis Over a year ago

can you update this to show div depends on the user enter in the textbox ? because my new project now is to show div depends on the number entered by the user. I have edited the question. Hope you can help me sir

HardikS Over a year ago

Dont update question like this. it makes different answer of the question. undo this question amd post new one

Collectives™ on Stack Overflow

Create dynamic textboxes using javascript or jquery

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related