使用Java脚本获取动态列表中的输入值

Question

我想创建一个可以添加或删除输入的表单。

我将用它发送请求到我的web服务。
我希望我可以添加尽可能多的参数，我想要的。

按钮添加添加两个输入和删除按钮
按钮来删除2个输入和按键

屏幕

我选择把这个字段的动态列表。

HTML

<ul class="fields" id="fields"> 
</ul> 
<input type="button" value="ADD" name="addField" id="addField" class="addField"> 

JS

<script type="text/javascript"> 

     var buttonAddField = document.getElementById('addField'); 
     var fields = document.getElementById('fields'); 

     //add fields and delete fields 
     buttonAddField.addEventListener('click', function() { 

      var li = document.createElement('li'); 

      var buttonDelete = document.createElement('button'); 
      buttonDelete.addEventListener('click', function() { 
       fields.removeChild(li); 

      }); 
      buttonDelete.appendChild(document.createTextNode("DELETE")); 

      var inputName = document.createElement("input"); 
      inputName.type = "text"; 



      var inputValue = document.createElement("input"); 
      inputValue.type = "text"; 


      li.appendChild(inputName); 
      li.appendChild(inputValue); 
      li.appendChild(buttonDelete); 

      fields.appendChild(li); 

     }); 
</script> 

当我想送我的请求，我想在我的名单得到键/值。

我有这样的想法：

var data = new FormData(); 

var items = fields.getElementsByTagName('li'); 

for (var i = 0; i < items.length; i++) { 
    console.log(items[i]); 
} 

它返回

<li>...</li> 

如何获得键/值？

Answer 1

我发现问题出在哪里：
Google Chrome发送给我：<li>...</li>因为对象太大。

这里是我的解决方案：

var items = fields.getElementsByTagName('li'); 

    for (var i = 0; i < items.length; i++) { 
      console.log(items[i].childNodes[0].value); 
      console.log(items[i].childNodes[1].value); 
    }