如何动态获取文本框的值

How to get value of textbox dynamically?

本文关键字：取文本 获取 何动态 动态      更新时间：2023-09-26

我在添加按钮单击时动态添加三个文本框...这三个文本框位于同一个div 标签中...并且每个文本框都有不同的名称...

所以每次当我单击添加按钮时，我都会创建一个具有三个文本框的新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 数组...如 [项目1，项目2，项目3]

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

在

选择元素时，使用.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) 

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>

相关文章：