在console.log中打印动态DOM数据(Printing dynamic DOM data in console.log)

在console.log中打印动态DOM数据(Printing dynamic DOM data in console.log)

我的目标是从所有textarea框（由用户添加）中获取数据到console.log。 使用我当前的代码，它只从第一个框中获取。

HTML

<form class="" action="" method="post"> <div class="form-group" id="testID"> <div id="afield"> <textarea rows="2" cols="160" class="form-control nField" name="nameField" placeholder="Enter address here." required ></textarea> <br> </div> <div class="col-sm-11"> <p class="help-block">Hit the + to add more fields.</p> </div> <div class="col-sm-1"> <button type="button" class="btn btn-default" id="addBtn" style="margin-top:5px!important;"> <i class="fa fa-plus fa-lg"></i> </button> </div> <button type="submit" class="btn btn-primary addSubmit"> Save </button> </div> </form>

JS：

$('#addBtn').click(function(){ var addField = $('<div id="afield"><textarea rows="2" cols="160" class="form-control nField" name="nameField" placeholder="Enter address here." required ></textarea></div><br>'); $('#afield').append(addField); }); $('.addSubmit').click(function(e){ e.preventDefault(); var data = $('#testID').map(function() { return { Address: $(this).closest('form').find('[name="nameField"]').val() }; }).get(); var jsonString = JSON.stringify(data); console.log(jsonString); });

My target is to fetch the data from all the textarea boxes (as added by user), to console.log. With my current code, it's only fetching from first box.

HTML

<form class="" action="" method="post"> <div class="form-group" id="testID"> <div id="afield"> <textarea rows="2" cols="160" class="form-control nField" name="nameField" placeholder="Enter address here." required ></textarea> <br> </div> <div class="col-sm-11"> <p class="help-block">Hit the + to add more fields.</p> </div> <div class="col-sm-1"> <button type="button" class="btn btn-default" id="addBtn" style="margin-top:5px!important;"> <i class="fa fa-plus fa-lg"></i> </button> </div> <button type="submit" class="btn btn-primary addSubmit"> Save </button> </div> </form>

JS:

$('#addBtn').click(function(){ var addField = $('<div id="afield"><textarea rows="2" cols="160" class="form-control nField" name="nameField" placeholder="Enter address here." required ></textarea></div><br>'); $('#afield').append(addField); }); $('.addSubmit').click(function(e){ e.preventDefault(); var data = $('#testID').map(function() { return { Address: $(this).closest('form').find('[name="nameField"]').val() }; }).get(); var jsonString = JSON.stringify(data); console.log(jsonString); });

最满意答案

如Praveen所述 ，

$(this).closest('form').find('[name="nameField"]').val()

只能返回第一个值。

您可以使用此代替：

var address = [] $(this).closest('form').find('[name="nameField"]').each(function(i,v){ address.push($(v).val()); }); return {Address: address}

As mentioned by Praveen,

$(this).closest('form').find('[name="nameField"]').val()

Can return only the first value.

You can use this instead:

var address = [] $(this).closest('form').find('[name="nameField"]').each(function(i,v){ address.push($(v).val()); }); return {Address: address}