Fetch the value of dynamically created textbox

Question

I want to fetch the dynamically created textbox values. My js code is,

$('#Dynm_Device_Fields').append('<div class="col-sm-12 form-group"><div class="col-sm-1"><button type="button" name="add" class="btn btn-success btn-sm add"><span class="glyphicon glyphicon-plus"></span></button></div></div>');

$(document).on('click','.add',function(){
        inner_div = "";
        id_cnt = id_cnt + 1;
        inner_div = "<div class='col-sm-12 form-group'><label class='col-sm-4 control-label'></label><div class='col-sm-7'><div class='col-sm-4'><input name = 'Dynm_Key_"+id_cnt+"' id='Dynm_Key_"+id_cnt+"' type='text'  class='form-control adcol' placeholder='Field Name' /></div><div class='col-sm-4'><input name = 'Dynm_Val_"+id_cnt+"' id='Dynm_Val_"+id_cnt+"' type='text' class='form-control adcol' placeholder='Field Value' /></div></div><button name = 'DynmButtonBox' type='button' style='width:35px;' class='btn btn-danger remove col-sm-1 fa fa-close' data-toggle='tooltip' data-placement='right' data-original-title='Remove' ></button><br></div>";
        $('#Dynm_Device_Fields').append(inner_div);
});

Please help to find out the solution. Thanks

Answer 1

The textbox I am seeing is:

<input name='Dynm_Val_"+id_cnt+"' 
    id='Dynm_Val_"+id_cnt+"' 
    type='text' 
    class='form-control adcol' 
    placeholder='Field Value' />

Using JQuery:

var val = $('#Dynm_Val_' + id_cnt).val();

If you need to get an array of all the text boxes:

var textboxElements = $('input.adcol');

Or plain JavaScript, try:

var val = document.getElementById('Dynm_Val_' + id_cnt).value; // single
var textboxElements = document.querySelectorAll('input.adcol'); // array of elements