Question

如果用户想要添加新行，我有一个动态添加一行文本输入的表单，它会自动使用与前一个具有相同ID和类的输入字段填充新行。我的问题是如何获得每个文本输入字段的值？

<div class="col-xs-12 col-md-12" id="items">
    <div class="row add-items">
        <div class="col-md-6 col-sm-12 mx-auto">
            <div class="form-group">
                <label for="item">Item:</label>
                <input type="text" class="form-control" id="item" placeholder="New item" name="item[]">
            </div>
        </div>
        <div class="col-md-3 col-sm-12 mx-auto">
            <div class="form-group">
                <label for="charge">Item cost:</label>
                <input type="text" class="form-control" name="charge[]" id="charge" placeholder="cost">
            </div>
        </div>
        <div class="col-md-3 col-sm-12 text-right">
            <button id="add-item" class="addBtn" type="button">+ item</button>
        </div>
    </div>
</div>

Answer 1

这就是我所做的：我开始通过将包含产品名称和价格的输入字段放入全局项目div来稍微改变您的架构。现在，每个产品（项目）都有自己的名称和价格字段！然后使用Jquery，如果我们点击add-item，我会把第一个项目作为outerHTML，然后将它添加到包含所有项目的div中

然后获取所有项目我创建了一个名为get-items的按钮，当按下它时，我创建一个数组，我浏览所有项目，对于每个项目，我取其字段名称和我推入的价格字段阵！

$("document").ready(function () {
	
  $("#add-item").on('click', function () {
  	$('.add-items').append($('.add-items .item')[0].outerHTML)
  })
  
 
  $("#get-items").on('click', function () {
  var arr = []
   $.each($(".item"), function () {
     arr.push({name: $(this).find('input').first().val(), cost:$(this).find('input').last().val()})
   })
   console.log(arr)
  })
})

<!-- I presume you've included Jquery like this -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="col-xs-12 col-md-12" id="items">
    <div class="row add-items">
      <div class="item">
        <div class="col-md-6 col-sm-12 mx-auto">
            <div class="form-group">
                <label for="item">Item:</label>
                <input type="text" class="form-control" id="item" placeholder="New item" name="item[]">
            </div>
        </div>
        <div class="col-md-3 col-sm-12 mx-auto">
            <div class="form-group">
                <label for="charge">Item cost:</label>
                <input type="text" class="form-control" name="charge[]" id="charge" placeholder="cost">
            </div>
        </div>
      </div>
     </div>
        <div class="col-md-3 col-sm-12 text-right">
            <button id="add-item" class="addBtn" type="button">+ item</button>
    </div>
    <div class="col-md-3 col-sm-12 text-right">
            <button id="get-items" class="addBtn" type="button">Get Items Array</button>
    </div>
</div>

Answer 2

这就是你如何获得文本输入值的值

document.getElementById("item").value
document.getElementById("charge").value

Answer 3

首先，如果您也可以发布您的JS代码，那么我可以帮助您更好一点。

其次我不会每次给相同的元素提供相同的ID，但是这个类很好。

现在您可以使用以下方式获取输入文本：

$(".your-input-class").map(function(){
    return this.val();
});

要获取最后一个（例如最新的）输入元素的文本：

$(".your-input-class").last().val();

由于我不确定你目前到底想要实现的目标，我也会留下这段代码：

// Access new item input text (if single input):
$("#item").val();

// Access new item input text (if multiple):
$("[name='item[]']").map(function(){ return this.val(); })

// Access charge input (if single input):
$("#charge").val();

// Access charge input (if multiple):
$("[name='charge[]']").map(function(){ return this.val(); })

Answer 4

$("#items").delegate("#charge", "blur", function(){
     var value = $(this).val();   
});

我终于找到了办法。

jQuery获取内部文本输入的值

4 个答案: