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

Posted 2023-05-09

【中文标题】如何使用jQuery在关联数组中获取表单的输入值

【英文标题】：how get input value of form in associative array with 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>

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

array1:arrayterm-title:blue, color_quantity:10, color_price:200, 2:arrayterm-title:red, color_quantity:20, color_price:30,...

【问题讨论】：

我给你做了一个sn-p。我假设有一些表单标签和一个提交按钮？

您提供的脚本，即 serializeArray 是我想要的，输出对象将通过 ajax 发送到 php，我可以正确访问所有输入数据。非常感谢我的朋友:)

这不是我的剧本。我解释说你想要的格式不是由 serializeArray 创建的。我为你写了一个更复杂的脚本，因为你想要 array1:arrayterm-title:blue, color_quantity:10, color_price:200, 2:arrayterm-title:red, color_quantity:20, color_price:30,... 这不是 serializeArray 的输出

两个主题都可以用，都可以

【参考方案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": ""
]