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

Question

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

<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},...}

Answer 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>

Answer 2

你的意思是这样的

看例子后这个和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": ""
}]

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

how get input value of form in associative array with jQuery

forms

arrays

jquery

submission

multidimensional-array