在console.log中打印动态DOM数据

我的目标是将所有textarea框（由用户添加）的数据提取到console.log。用我目前的代码，它只能从第一个框中获取。在console.log中打印动态DOM数据

Page Structure

Current Output

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

来源

2016-01-03 Sujay Kirti

As mentioned by 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}

来源

2016-01-03 21:14:28 Sachin

我试着做console.log（地址）;在您的代码后，但它不打印任何东西。我只是一个刚刚学习的初学者。 –

这应该与问题发布的代码一起工作，而不是根据praveen的回答发生任何更改。您需要替换： 'return { Address：$（this）.closest（'form'）。find（'[name =“nameField”]'）.val（） };' from your code with给出的代码。你可以在return语句之前使用console.log。 – Sachin

你是男人！它完全按照我的想法工作。非常感谢。现在我最好去理解它背后的逻辑。再次感谢。 :) –

如果您正在复制id，那么它将无法工作。

var addField = $('<div id="afield"><textarea 
//-------------------------^^^^^^

此外，$(this).closest('form').find('[name="nameField"]').val()可售只有一个值。您可能需要您的结构变更为：

<textarea name="address[]"> <!-- note the [] -->

而且使用$("#formId").serialize()得到的输出。我可以告诉你一个简单的例子：

$(function() { 
 
    $(".add").click(function() { 
 
    $(this).before('<textarea name="address[]"></textarea>'); 
 
    return false; 
 
    }); 
 
    $(".show").click(function() { 
 
    alert($("form").serialize()); 
 
    return false; 
 
    }); 
 
});

* {font-family: Segoe UI;} 
 
textarea {display: block; resize: none; width: 200px; height: 100px; margin: 0 0 5px;}

<script src="https://code.jquery.com/jquery-1.11.3.js"></script> 
 
<form> 
 
    <textarea name="address[]"></textarea> 
 
    <button class="add">Add</button> 
 
    <button class="show">Show</button> 
 
</form>

输出：http://output.jsbin.com/xakibohina

来源

2016-01-03 21:07:01

感谢您的回复超快普利文。我做了所有您推荐的更改。将ID更改为Class;使用'[]';使用'serialize（）'。产量也在增加，但出现了两个问题。 1）当我现在单击添加按钮时，它会使textarea框的数量加倍。 1> 2> 4> 8。它应该只添加1. 2）serialize（）也输出“name”。如果我只想要价值，那么我可以创建一个JSON呢？怎么做？ PS：我也没有完全理解添加'[]'的目的。如果你可以请解释或指向一些资源。非常感谢。 –

@SujayKirti 1. Omg ...双打？你是克隆人吗？这不是正确的方法。 2.'[]'创建一个值数组。 –

最初，它并没有增加一倍，但是在我将ID改为您指出的类后，它的行为如此。但是我没有使用clone（）。您可以查看OP中的代码。无论如何，做这件事的最佳做法是什么？ –

或者，也许试试这个：

$('.addSubmit').click(function(e){ 
      e.preventDefault(); 
    var address = [] 
    $(this).closest('form').find('[name="nameField"]').each(function(i,v){ 
     address.push($(v).val()); 
    }); 
    var data = {Address: address} 
    var jsonString = JSON.stringify(data); 
    console.log(jsonString); 
    });

来源

2016-01-03 22:41:39 Sachin

我从你的meta post得到了这个答案。既然答案似乎解决了OP的问题，您是否可以通过解释OP的方法无效的原因来扩展这个答案，以及为什么您的方法有效？（例如尝试提供官方参考/文档以帮助未来的读者）。谢谢。 –

+10

如果你仔细想想，答案一般不应以“或”开头。 –

@ Jean-FrançoisCorbett“我不知道”如何？人们在日常生活中使用这些。这是一个答案。 – choz

在console.log中打印动态DOM数据

回答

相关问题