Wie man Textbox dynamisch erhält?

Question

Am drei Textbox dynamisch auf ADD-Taste klicken ... Diese drei Textbox sind in gleichem div-Tag ... und jedes Textfeld mit unterschiedlichen Namen addieren ...

so neuen div drei Textbox mit erschaffe jeden Zeit, wenn ich auf die Schaltfläche HINZUFÜGEN klicken ...

Jetzt möchte ich auf Textfeld eingegebene Wert ... zugreifen?

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

Ich habe Reihe von Id aller div-Tag ... wie [item1, item2, item3]

Wie alle Textfeld eingegebene Text zugreifen ??

Answer 1

Verwenden .forEach und concatenateid mit # während das Element der Auswahl (machen es gültig ID Selektor).

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

Edit: Wenn item1,... sind id von parent-div-elements, Verwenden .find('input') zu finden Nachkommen <input> Elemente. .each könnte verwendet werden, um alle gefunden Elemente zu durchlaufen, um ihre value zu erhalten.

Hinweis: Sie müssen this.id passieren statt 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()); 
    }): 
}); 

Sie wahrscheinlich type="text" auf Ihre Eingaben hinzufügen sollten.

---

Beachten Sie auch, dass in Code Sie mehrere Vorkommen der gleichen ID haben. Das ist definitiv nicht gut.

Hier einen besseren Code finden, das zu vermeiden:

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>

gleiche `id` Werte,