javascript - 如何通过Jquery从具有相同名称但不同索引的输入中获取所有值

Question

我有一项任务，现在这有点奇怪，我不知道该怎么做。因此，我有非特定数量的输入，名称相同 car 但索引不同，例如 sub、master 和 val.

看起来像这样:

<input type='text' name='bike[master]' value='some predefined value 1'>
<input type='text' name='bike[sub]' value='some predefined value 2'>
<input type='text' name='bike[val]' value='some predefined value 2.1'>
<input type='text' name='bike[sub]' value='some predefined value 3'>
<input type='text' name='bike[val]' value='some predefined value 3.1'>

我需要 jQuery，在用户点击输入后，将所有这些值从输入中提取到一个变量中，如果可能的话，然后发送到服务器，服务器会将这些数据放在一起并使用它们。

有什么想法吗？索引对我来说有点复杂。

Answer 1

您可以获取每个输入的值，name 以 bike 开头，点击并将其推送到一个数组中

var result = [];
$('button').click(function() {
  $('input[name^="bike"]').each(function() {
    result.push($(this).val());
  })
  console.log(result)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' name='bike[master]' value='some predefined value 1'>
<input type='text' name='bike[sub]' value='some predefined value 2'>
<input type='text' name='bike[val]' value='some predefined value 2.1'>
<input type='text' name='bike[sub]' value='some predefined value 3'>
<input type='text' name='bike[val]' value='some predefined value 3.1'>
<button>Send</button>

您还可以使用 JQuery serializeArray() 函数并返回数组，然后使用该数据

$('form').click(function() {
  var data = $(this).serializeArray();
  data.forEach((e) => {console.log(e.value)});
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="">
  <input type='text' name='bike[master]' value='some predefined value 1'>
  <input type='text' name='bike[sub]' value='some predefined value 2'>
  <input type='text' name='bike[val]' value='some predefined value 2.1'>
  <input type='text' name='bike[sub]' value='some predefined value 3'>
  <input type='text' name='bike[val]' value='some predefined value 3.1'>
  <input type="submit" value="Send">
</form>