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

$(document).on('click', '.adcol', function() { $(this).val() }); — Muhammad Usman
– Muhammad Usman, Commented Apr 19, 2018 at 11:48

Kyle B · Accepted Answer · 2018-04-19 12:18:11Z

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

edited Apr 19, 2018 at 12:18

answered Apr 19, 2018 at 11:49

Kyle B

2,9791 gold badge26 silver badges44 bronze badges

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

4 Comments

Prafulla Over a year ago

Thanks for above solution. But when I print the array of element then it gives me 'undefined'.

Kyle B Over a year ago

@Prafulla, I modified the selector for the class, maybe that will help, also how are you printing the array of elements?

Prafulla Over a year ago

var textboxElements = $('input.adcol'); alert(JSON.stringify(textboxElements); - I use this code to print. But gives me something else output.

Kyle B Over a year ago

@Prafulla, textboxElements is an array of elements, iterate it in a for loop and use .val() (or .value) on each individual element to print the value each textbox

Muhammad Usman · Accepted Answer · 2018-04-19 11:51:32Z

0

As it seems you have .addcol on dynamically added textboxes. Try this

$(document).on('click', '.adcol', function() { alert($(this).val()) });

answered Apr 19, 2018 at 11:51

Muhammad Usman

10.1k26 silver badges41 bronze badges

Collectives™ on Stack Overflow

Fetch the value of dynamically created textbox

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related