Question

用户可以通过html输入添加尽可能多的项目。输入看起来像;

 <input class="form-control" name="part_number[]" number" type="text">
 <input class="form-control" name="part_number[]" number" type="text">
 <input class="form-control" name="part_number[]" number" type="text">

 <input class="form-control item" name="description[]" type="text">
 <input class="form-control item" name="description[]" type="text">
 <input class="form-control item" name="description[]" type="text">

我想将项目添加到数据库中进行存储。.如何遍历每个输入？零件编号和描述属于同一行。

Answer 1

function getdata() {
  var partNumbers = [];
  var descriptions = [];
  $('[name="part_number[]"]').each(function() {
    partNumbers.push(this.value);
  })
  $('[name="description[]"]').each(function() {
    descriptions.push(this.value);
  })
  var data = {
    partNumbers: partNumbers,
    descriptions: descriptions
  }
  $('#output').val(JSON.stringify(data))
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="form-control" name="part_number[]" type="text" value="part number 1">
<input class="form-control" name="part_number[]" type="text" value="part number 2">
<input class="form-control" name="part_number[]" type="text" value="part number 3">
<br>
<input class="form-control item" name="description[]" type="text" value="description 1">
<input class="form-control item" name="description[]" type="text" value="description 2">
<input class="form-control item" name="description[]" type="text" value="description 3">
<hr>
<button type="button" onclick="getdata()">get data</button>
<textarea id="output" rows="10" cols="100" placeholder="output"></textarea>

Answer 2

如果输入在表单内，则可以使用.serializeArray()然后使用.reduce()创建一个对象，该对象存储多种输入类型的键和数组值，如下所示。然后，您可以将该数据提交到服务器，然后存储在数据库中：

const data = $("#myform").serializeArray().reduce((acc, o) => {
  if (o.name.slice(-2) === "[]") {
    acc[o.name] = acc[o.name] || [];
    acc[o.name].push(o.value);
  } else {
    acc[o.name] = o.value;
  }
  return acc;
}, {});

console.log(data); // data to POST

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form id="myform">
  <input class="form-control" name="part_number[]" value="pn1" type="text">
  <input class="form-control" name="part_number[]" value="pn2" type="text">
  <input class="form-control" name="part_number[]" value="pn3" type="text">

  <input class="form-control item" name="description[]" value="desc1" type="text">
  <input class="form-control item" name="description[]" value="desc2" type="text">
  <input class="form-control item" name="description[]" value="desc3" type="text">

  <input class="form-control item" name="single_data" value="non-array data" type="text">
</form>

Answer 3

根据您的问题，我知道您希望连续输入描述和部件号。请使用jQuery的.each函数找到我的答案。

.each()函数遍历所有指定的元素，并返回每个元素的索引位置。在这里，我要遍历零件号，因此我想采用相应的描述，即在part_number索引位置的描述。为了实现这一点，我们使用了另一个jQuery选择器:eq()。它将选择匹配集中索引n处的元素。

$(".submit").on("click", function(){
let user_input = [];
$("input[name='part_number[]']").each(function(index){
 user_input.push({
 part_number: $(this).val(),
 description: $(`.item:eq(${index})`).val()
 });
});
console.log("final result = ", user_input);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="form-control" name="part_number[]"  placeholder="number" type="text">
 <input class="form-control" name="part_number[]" placeholder="number" type="text">
 <input class="form-control" name="part_number[]" placeholder="number" type="text">

 <input class="form-control item" name="description[]" placeholder="description" type="text">
 <input class="form-control item" name="description[]" placeholder="description" type="text">
 <input class="form-control item" name="description[]" placeholder="description" type="text">
 
 <button type="submit" class="submit"> Save</button>

Answer 4

与修复之后的数据相比，我更愿意修复HTML。

您有items和值description和part_number，为了对数据进行分组，我首先会在HTML中通过对每个{{1} } + part_number对：

description

此后，我们修复了输入名称'，并将其添加到<div class="item"> <input type="text" name="part_number[]" /> <input type="text" name="decription[]" /> </div>组中：

item

要在表单中添加多个项目元素，则需要在将每个项目添加到表单时为每个项目添加一个ID：

<div class="item">
    <input type="text" name="item[part_number]" />
    <input type="text" name="item[decription]" />
</div>

将这些值添加到数据库中后，您可以像这样迭代它们：（我只是猜测您将使用PHP）

<div class="item">
    <input type="text" name="item[0][part_number]" />
    <input type="text" name="item[0][decription]" />
</div>
<div class="item">
    <input type="text" name="item[1][part_number]" />
    <input type="text" name="item[1][decription]" />
</div>

jQuery-从html数组输入获取值

4 个答案: