简体   繁体   中英

Dynamic textbox creation based on textbox input

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>

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> ');
})

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>');
  }
}

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM