javascript - JQuery - 从 html 数组输入中获取值

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>