多形式DATAS到數組通過JavaScript

Question

我有一些形式是這樣的：

<div class="well"> 
    <form> 
     <span class="remove pull-right"><i class="fa fa-times pointer"></i></span> 
     <div class="form-group" style="margin:0"> 
      <label for="image-link">Image Link</label> 
      <input type="text" name="image-link" value="" class="form-control" > 
     </div> 
     <div class="form-group" style="margin:0">       
      <label for="content">Content</label> 
      <textarea class="form-control" name="content" rows="10"></textarea> 
     </div> 
     <div class="form-group" style="margin:0"> 
      <label for="author">Author</label> 
      <input type="text" name="author" value="" class="form-control" > 
     </div> 
    </form> 
</div> 

....

<div class="well"> 
    <form> 
     <span class="remove pull-right"><i class="fa fa-times pointer"></i></span> 
     <div class="form-group" style="margin:0"> 
      <label for="image-link">Image Link</label> 
      <input type="text" name="image-link" value="" class="form-control" > 
     </div> 
     <div class="form-group" style="margin:0">       
      <label for="content">Content</label> 
      <textarea class="form-control" name="content" rows="10"></textarea> 
     </div> 
     <div class="form-group" style="margin:0"> 
      <label for="author">Author</label> 
      <input type="text" name="author" value="" class="form-control" > 
     </div> 
    </form> 
</div> 

的形式將加入越來越多，當我點擊添加按鈕，所以會有多種形式。 我想多DATAS提交到JSON arrayjust看起來是這樣的：

"quotes":[ 
{"image":"image_link","content":"content","author:"author"} 
{"image":"image_link","content":"content","author:"author"} 
... 
{"image":"image_link","content":"content","author:"author"} 
] 

這是一個數組將包含所有形式的DATAS的。而表格的數量並不固定。當我點擊添加按鈕時它會被改變。 那麼我怎麼能自動做到這一點。 非常感謝！

Answer 1

您可以通過調用下面的函數，通過頁面上的所有表單元素迭代：

function generateArrayData() { 
    var forms = document.querySelectorAll(".well form"); 
    var quotes = []; 

    for(var i = 0; i < forms.length; i++) { 
    var form = forms[i]; 
    quotes.push({ 
     image: form.querySelector("input[name='image-link']").value, 
     content: form.querySelector("textarea").value, 
     author: form.querySelector("input[name='author']").value 
    }) 
    } 
    return quotes; 
} 

這種工作方式是與類querySelectorAll加載頁面上所有的表單元素的div內.well。然後，我們遍歷前一個查詢中的元素，並使用querySelector來提取我們想要提取的每個單獨元素。