在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}更多推荐
发布评论