How to get value of textbox dynamically?

Question

Am adding three textbox dynamically on ADD button click... These three textbox are in same div tag... and each text box having different name...

so am creating new div having three textbox each time when I click on ADD button...

Now I want to access text field entered value... how to access??

    <div class="ord" id="parent">

    </div>
    <button type="button" class="btn btn-primary fa fa-plus add btn-xs"> Add </button> 

JS

   var items = "<form role='form' class='form-inline' style='padding-bottom: 5px;'>"
                    + "<div class='form-group'><input id='med' placeholder='' class='form-control'></div>"
                    + "<div class='form-group' style='padding-left: 5px;'><input id='qua' placeholder='' class='form-control'></div>"
                    + "<div class='form-group' style='padding-left: 5px;'><input id='rem' placeholder='' class='form-control'></div>"

  $('.add').on("click",function(){
div_id = div_id + 1
$( ".ord" ).append('<div id="item'+div_id+'">' + items + '<button style="margin-left: 3px;" type="button" id="item'+div_id+'" class="btn btn-default btn-danger btn-xs fa fa-close" onclick=deleteitem(id)></button></form></div>');
   })

I have array of Id of all div tag... like [item1,item2,item3]

How to access all text field entered text ??

Answer 1

Use .forEach and concatenate id with # while selecting element(to make it valid ID selector).

 ['item1', 'item2', 'item3'].forEach(function(item) { $("#" + item).find('input').each(function() { console.log(this.value); }); });

Edit: If item1,... are id of parent-div-elements , Use .find('input') to find descendants <input> elements. .each could be used to iterate through all the found elements to get their value .

Note: You must pass this.id instead of id in deleteitem(id)

Answer 2

var items = ['item1', 'item2', 'item3']; // this is your "array of Id of all div tag"
items.forEach(function(item) {
    $('#' + item).find('input[type="text"]').each(function() {
        console.log($(this).val());
    }):
});

You should probably add type="text" to your inputs.

---

Also, note that in your code you will have several occurences of the same id. That's definitly not good.

Here, find a better code to avoid that:

 var items = []; var div_id = 0; // Make a function so you have only one occurence of each #med, #qua and #rem function getInputs(id) { var inputs = ""; inputs += '<form role="form" class="form-inline">'; inputs += ' <div class="form-group"><input type="text" id="med' + id + '" class="form-control" /></div>'; inputs += ' <div class="form-group"><input type="text" id="qua' + id + '" class="form-control" /></div>'; inputs += ' <div class="form-group"><input type="text" id="rem' + id + '" class="form-control" /></div>'; inputs += '</form>'; return inputs; } // When you click on your Add button $(".add").on("click", function() { var currentId = "item" + div_id; // Only once occurence of #item0, #item1, etc. var html = ""; html += '<div id="' + currentId + '">'; html += getInputs(div_id); html += ' <button type="button" data-delete="' + currentId + '" class="btn btn-danger btn-xs">Close</button>'; html += '</div>'; $(".ord").append(html); items.push(currentId); div_id++; }); // When you click on a Close button // We use data-* attribute in order to identify if a button is a "close" one, and which element it should closes $(document).on("click", "button[data-delete]", function(evt) { evt.preventDefault(); var id = $(this).data("delete"); $("#" + id).remove(); // remove this element from the items var index = items.indexOf(id); if (index !== -1) { items.splice(index, 1); } }); // When you change a value in one of your inputs $(document).on("change", 'input[type="text"]', function() { items.forEach(function(item) { $('#' + item).find('input[type="text"]').each(function() { console.log($(this).attr("id") + " => " + $(this).val()); }); }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <div class="ord" id="parent"> </div> <button type="button" class="btn btn-primary add">Add</button>