使用特定键获取表单输入数组的数据

Question

所以，假设我有一个像这样的HTML表单：

<form id="myForm">
    <input type="text" name="dummy">
    <input type="text" name="people[0][first_name]" value="John">
    <input type="text" name="people[0][last_name]" value="Doe">
    <input type="text" name="people[1][first_name]" value="Jane">
    <input type="text" name="people[1][last_name]" value="Smith">
</form>

我想得到一个与real值相匹配的JavaScript数组。例如：

// If there was a sweet function for this...
var people = getFormDataByInputName( 'people' );

// Value of `people` is...
// [
//    {
//        'first_name' : 'John',
//        'last_name'  : 'Doe'
//    },
//    {
//        'first_name' : 'Jane',
//        'last_name'  : 'Smith'
//    }
// ]

对于特定的表单项（在本例中为people），有没有简单的方法可以做到这一点？或者我是否必须序列化整个表单然后只提取我想要的元素？

我还想到了可能使用以下方法：

var formData = new FormData( document.querySelector( '#myForm' ) );
var people = formData.get( 'people' );

但这似乎不起作用;之后人们就是空的。

Answer 1

您可以使用reduce方法使用普通js执行此操作，并返回每个人是一个对象。

const form = document.querySelectorAll('#myForm input');
const data = [...form].reduce(function(r, e) {
  const [i, prop] = e.name.split(/\[(.*?)\]/g).slice(1).filter(Boolean)
  if (!r[i]) r[i] = {}
  r[i][prop] = e.value
  return r;
}, [])

console.log(data)

<form id="myForm">
  <input type="text" name="dummy">
  <input type="text" name="people[0][first_name]" value="John">
  <input type="text" name="people[0][last_name]" value="Doe">
  <input type="text" name="people[1][first_name]" value="Jane">
  <input type="text" name="people[1][last_name]" value="Smith">
</form>

Answer 2

function getObject(name, key) {
  if(key.includes(name)) {
    var splitStr = key.split(/\[|\]/g);
    return {
      index: splitStr[1],
      key: splitStr[3],
    }
  }
  return null;
}

function getFormDataByInputName(name) {
 var formData = new FormData( document.querySelector('#myForm'));
 var results = [];
 for (var key of formData.keys()) {
   var obj = getObject(name, key);
   if (obj) {
      if (results[obj.index]) results[obj.index][obj.key] = formData.get(key);
      else results[obj.index] = { [obj.key]: formData.get(key) };
   }
 }
 return results;
}


var people = getFormDataByInputName('people');

console.log(people);

<form id="myForm">
    <input type="text" name="dummy">
    <input type="text" name="people[0][first_name]" value="John">
    <input type="text" name="people[0][last_name]" value="Doe">
    <input type="text" name="people[1][first_name]" value="Jane">
    <input type="text" name="people[1][last_name]" value="Smith">
</form>

Answer 3

你的代码不起作用，因为HTML / JS name只是一个字符串，它在提交表单时发送给服务器（名称/值对中的名称）。您可能认为它是数组，但HTML / JS没有。

所以没有任何一个班轮来完成工作。试试这个：在你的HTML中，添加<div class="name"> ...

（更新：感谢您的想法，@ Nenad，我从未尝试过其中一个片段）

var people = [];
$('.name').each(function() {
    people.push({
        first_name: $('input:nth-child(1)', this).val(),
        last_name: $('input:nth-child(2)', this).val()
    });
});
console.log(people);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form id="myForm">
  <input type="text" name="dummy">
  <div class="name">
    <input type="text" value="John">
    <input type="text" value="Doe">
  </div>
  <div class="name">
    <input type="text" value="Jane">
    <input type="text" value="Smith">
  </div>
</form>