javascript - 从输入字段中获取 JSON

Question

我正在创建一个交互式、可排序的引导表单。用户将能够添加额外的输入字段行（以及从下拉列表中，但这是为了以后，我将逐步进行），目标是将数据从它们获取到 JSON。

我设法使表单创建部分正常工作（在不同的 stackoverflow 线程的帮助下），但我无法正确创建 JSON。我在这里想念什么？

请参阅下面的代码，我将不胜感激任何评论。

<div class="col">
  <button type="button" value="Add a field" class="btn btn-primary" id="add">Add row</button>
  <button type="button" value="Generate" class="btn btn-primary" id="preview">Generate JSON</button>
  <br><br><br>
  <div id="sortable">
    <!-- Filled by script -->
  </div>
</div>

<!-- Make form sortable using drag and drop -->
<script>
$(function() {
  $("#sortable").sortable();
  $("#sortable").disableSelection();
});
</script>
<!-- Create form and get JSON -->
<script>
$(document).ready(function() {
  $("#preview").click(function() {
    var arr = {};
    arr.items = [];
    $(".fieldwrapper").each(function() {
      var entry = {}
      var neighborhood = $(this).find("input[name='neighborhood']").val();
      var url = $(this).find("input[name='url']").val();
      entry["url"] = url;
      entry["name"] = neighborhood;
      arr.items.push(entry);
    });
    alert(JSON.stringify(arr, null, 4));
  });
  $("#add").click(function() {
    var intId = $("#sortable div").length + 1;
    var fieldWrapper = $("<div class=\"form-row\" id=\"field" + intId + "\"/>");
    var name = $("<div class=\"form-group col-md-4\"><input name=\"neighborhood\" type=\"text\" placeholder=\"Name of Neighborhood\"class=\"form-control\"></div>");
    var url = $("<div class=\"form-group col-md-4\"><input type=\"text\" name=\"url\" placeholder=\"Paste here the URL of the Image\"class=\"form-control\"></div>");
    var removeButton = $("<div class=\"form-group col-md-4\"><button type=\"button\"class=\"btn btn-primary btn-sm\">Usuń</button></div>");
    removeButton.click(function() {
      $(this).parent().remove();
    });
    fieldWrapper.append(name);
    fieldWrapper.append(url);
    fieldWrapper.append(removeButton);
    $("#sortable").append(fieldWrapper);
  });
});
</script>

标签： javascriptjqueryjsoninput