Question

在ADD按钮上动态添加三个文本框点击... 这三个文本框都在同一个div标签中...... 每个文本框都有不同的名称......

所以当我点击ADD按钮时，每次创建有三个文本框的新div ...

现在我想访问文本字段输入的值...如何访问??

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

我有所有div标签的Id数组...如[item1，item2，item3]

如何访问所有文本字段输入的文本??

Answer 1

选择元素时使.forEach和concatenate id与#一起使用（使其成为有效ID选择器）。

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

修改：如果item1,...为id parent-div-elements，请使用.find('input')查找后代<input>元素。可以使用.each遍历所有找到的元素来获取value。

注意：您必须在this.id

中传递id而不是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());
    }):
});

您可能应该在输入中添加type="text"。

另请注意，在您的代码中，您将有几个相同ID的出现。这绝对不好。

在这里，找到一个更好的代码来避免这种情况：

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>

如何动态获取文本框的价值？

2 个答案: