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>

当我点击添加按钮时，表单将被添加得越来越多，因此将有多个表单。我想将多个数据提交到json数组中，如下所示：

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

这是一个数组将包含所有表格＆＃39; 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来提取我们想要提取的每个元素。

Multi通过Javascript将数据表单转换为数组

1 个答案: