如何使用jQuery在关联数组中获取表单的输入值答案

【问题标题】：how get input value of form in associative array with jQuery如何使用jQuery在关联数组中获取表单的输入值
【发布时间】：2020-09-03 20:56:00
【问题描述】：

有一个带有列表包装器的表单，其中输入标签是动态创建的。

<div class="wrapper">
  <div class="action-elements cross-icon"> X </div>
  <input name="term-title" type="text" value="blue" class="action-elements term-title" id="term-title">
  <div class="action-elements term-quantity-price">
    <input name="color_quantity" class="color_quantity" id="color_quantity" type="number" placeholder="Quantity">
    <input name="color_price" class="color_price" id="color_price" type="number" placeholder="Price">
  </div>
</div>

<div class="wrapper">
  <div class="action-elements cross-icon"> X </div>
  <input name="term-title" type="text" value="red" class="action-elements term-title" id="term-title">
  <div class="action-elements term-quantity-price">
    <input name="color_quantity" class="color_quantity" id="color_quantity" type="number" placeholder="Quantity">
    <input name="color_price" class="color_price" id="color_price" type="number" placeholder="Price">
  </div>
</div>

提交表单时如何获取多维数组的输入。像这样的

array{1:array{term-title:blue, color_quantity:10, color_price:200}, 2:array{term-title:red, color_quantity:20, color_price:30},...}

【问题讨论】：

我给你做了一个sn-p。我假设有一些表单标签和一个提交按钮？
您提供的脚本，即 serializeArray 是我想要的，输出对象将通过 ajax 发送到 php，我可以正确访问所有输入数据。非常感谢我的朋友:)
这不是我的剧本。我解释说你想要的格式不是由 serializeArray 创建的。我为你写了一个更复杂的脚本，因为你想要 array{1:array{term-title:blue, color_quantity:10, color_price:200}, 2:array{term-title:red, color_quantity:20, color_price:30},...} 这不是 serializeArray 的输出
两个主题都可以用，都可以

标签： jquery arrays forms multidimensional-array submission

【解决方案1】：

是表单标签内的包装器吗？如果是，请查看serializeArray()。

一般而言，如果您想获取表单中的所有数据，可以使用serialize() 或serializeArray()。

这是一个例子：

$("form").submit(function(event) {
  event.preventDefault();
  console.log($(this).serializeArray());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <div class="wrapper">
    <div class="action-elements cross-icon"> X </div>
    <input name="term-title" type="text" value="blue" class="action-elements term-title" id="term-title">
    <div class="action-elements term-quantity-price">
      <input name="color_quantity" class="color_quantity" id="color_quantity" type="number" placeholder="Quantity">
      <input name="color_price" class="color_price" id="color_price" type="number" placeholder="Price">
    </div>
  </div>

  <div class="wrapper">
    <div class="action-elements cross-icon"> X </div>
    <input name="term-title" type="text" value="red" class="action-elements term-title" id="term-title">
    <div class="action-elements term-quantity-price">
      <input name="color_quantity" class="color_quantity" id="color_quantity" type="number" placeholder="Quantity">
      <input name="color_price" class="color_price" id="color_price" type="number" placeholder="Price">
    </div>
  </div>
  <input type="submit" />
</form>

【讨论】：

这将产生一个 {name:name,value:value} arr
你能分享你从控制台得到的结果吗？
你可以拥有自己。只需点击编辑，然后[<>] sn-p 编辑器
他想要[[{term-title:blue, color_quantity:10, color_price:200}],[{term-title:red, color_quantity:20, color_price:30}]]
你的给[ { "name": "term-title", "value": "blue" }, { "name": "color_quantity", "value": "" }, { "name": "color_price", "value": "" }, { "name": "term-title", "value": "red" }, { "name": "color_quantity", "value": "" }, { "name": "color_price", "value": "" } ]

【解决方案2】：

你的意思是这样的

例子后面看看this和serializeArray的区别

$(function() {
  $("#myForm").on("submit",function(e) {
    e.preventDefault(); // remove if you want the form to submit
    const arr = []
    $(".wrapper").each(function(i,div) {
      arr[i] = $(":input",this).map(function() { // OR your can consider $(":input",this).serializeArray()
        return { [$(this).attr("name")]:$(this).val() }
      }).get()
    })
    console.log(arr)
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="myForm">
  <div class="wrapper">
    <div class="action-elements cross-icon"> X </div>
    <input name="term-title" type="text" value="blue" class="action-elements term-title" id="term-title">
    <div class="action-elements term-quantity-price">
      <input name="color_quantity" class="color_quantity" id="color_quantity" type="number" placeholder="Quantity">
      <input name="color_price" class="color_price" id="color_price" type="number" placeholder="Price">
    </div>
  </div>

  <div class="wrapper">
    <div class="action-elements cross-icon"> X </div>
    <input name="term-title" type="text" value="red" class="action-elements term-title" id="term-title">
    <div class="action-elements term-quantity-price">
      <input name="color_quantity" class="color_quantity" id="color_quantity" type="number" placeholder="Quantity">
      <input name="color_price" class="color_price" id="color_price" type="number" placeholder="Price">
    </div>
  </div>
  <input type="submit" />
</form>

上面的脚本给出了你所要求的

[
  [{
      "term-title": "blue"
    },
    {
      "color_quantity": ""
    },
    {
      "color_price": ""
    }
  ],
  [{
      "term-title": "red"
    },
    {
      "color_quantity": ""
    },
    {
      "color_price": ""
    }
  ]
]

除非你事后按摩它，否则你不能使用 serializeArray 来获取你的输出

[{
  "name": "term-title",
  "value": "blue"
}, {
  "name": "color_quantity",
  "value": ""
}, {
  "name": "color_price",
  "value": ""
}, {
  "name": "term-title",
  "value": "red"
}, {
  "name": "color_quantity",
  "value": ""
}, {
  "name": "color_price",
  "value": ""
}]

【讨论】：