Dynamic textbox creation based on textbox input

Question

If I give semicolon as input means I have to create a textbox in jQuery. I tried this code and it flows correctly but it didn't show me the result.

$(document).ready(function (){
        $("#hellotxt").on('keyup', function (event){
            if (event.keyCode == 59)
            {
                var txt = $("#hellotxt").val();
                var valueArray = txt.split(';');
                var valueSortArray = valueArray.sort();
                for (var i = 0; i < valueSortArray.length - 1; i++) {
                    alert("friends");
                    addbox();
                }
            }
        });
});

addbox code is here

 function addbox() {
        var table = $(this).closest('table');
        if (table.find('input:text').length >= 0) {
            table.append('<tr> <input type="text" id="current Name" value="" /></td> <td><input type="text" id="current Name" value="" /> </td></tr>');
        }
    }

My ASp.Net Markup is

<asp:TextBox ID="hellotxt" runat="server" placeholder="hi;ji;ki;li;">    </asp:TextBox>
   <table border="0" cellspacing="2">   
<tr>        
    <td>
        <input type="button" id="add" value="Add" />
        <input type="button" id="del" value="Del" />
    </td>
</tr>

What do you mean by "If I give semicolon as input means I have to create a textbox in jQuery"? It makes no sense at all. — JP_
– JP_, Commented Mar 13, 2015 at 6:39
So you need dynamic textboxes if user gives input as ";". Why are you complicating this? Is it not possible to give a button to add a new text box? — SelvaS
– SelvaS, Commented Mar 13, 2015 at 6:54
ya i like to add it in dynamic..i need it in textbox event not in button click [email protected] works in button click i tried already — Selvakumar Duraipandian
– Selvakumar Duraipandian, Commented Mar 13, 2015 at 7:00

Selvakumar Duraipandian · Accepted Answer · 2015-03-13 10:58:59Z

3

you will get answer from this code..please you all guys check it out

$(document).ready(function (){
  //page load
    $("#hellotxt").on('keypress', function (event) {
        console.log(event.which)
        if (event.which == 59 || event.which == 186) {
            var txt = $("#hellotxt").val();
            var valueArray = txt.split(';');
            var valueSortArray = valueArray.sort();
            for (var i = 0; i < valueSortArray.length - 1; i++) {
                addbox.call(this, valueSortArray);
            }
        }
    });

 function addbox(valueSortArray) {
 var table = $(this).next('table').find("tbody");
 table.find(".dyn").remove()
 $.each(valueSortArray, function (i, v) {
 console.log(i,v)
 if (v)
     table.append('<tr class="dyn"><td><input type="text"  value="' + v + '" /></td></tr> ');
})

edited Mar 13, 2015 at 10:58

Selvakumar Duraipandian

4575 silver badges25 bronze badges

answered Mar 13, 2015 at 10:53

Nagaraj M

4993 silver badges17 bronze badges

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

Comments

Nishit Maheta · Accepted Answer · 2015-03-13 08:01:28Z

2

check below code keycode for ';' is 186 . check working example on fiddle

 $("#hellotxt").on('keyup', function (event){

 if (event.keyCode == 186)
    {
        var OBJ = $(this);
        var txt = $("#hellotxt").val();
        var valueArray = txt.split(';');
        var valueSortArray = valueArray.sort();
        for (var i = 0; i < valueSortArray.length - 1; i++) {
            addbox(OBJ);
        }
    }
});

pass $(this)(hellotxt object) as argument in function

function addbox( OBJ ) {
   var table = OBJ.next('table');

   if (table.find('input').length >= 0) {
    table.append('<tr> <input type="text" id="current Name" value="" /></td> <td><input type="text" id="current Name" value="" /> </td></tr>');
  }
}

edited Mar 13, 2015 at 8:01

answered Mar 13, 2015 at 7:37

Nishit Maheta

6,0413 gold badges19 silver badges32 bronze badges

2 Comments

Selvakumar Duraipandian Over a year ago

go through my answer please @jquery i upvoted you for answering me

Nishit Maheta Over a year ago

yes just check .. see my answer its simple solution of your question . great you got your answer :) .

Collectives™ on Stack Overflow

Dynamic textbox creation based on textbox input

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related