有没有办法获得多个输入值？

Question

<div> 
 <input type="text" class="form-control" name='tickers' id="ticker1" placeholder="Ticker">
  <input type="number" max=100 min=0 class="form-control weight-input" name='weights' id="weight1" placeholder="weight">
 </div>
 <div> 
 <input type="text" class="form-control" name='tickers' id="ticker2" placeholder="Ticker">
  <input type="number" max=100 min=0 class="form-control weight-input" name='weights' id="weight2" placeholder="weight">
 </div>

.
.
.

function optimization() {
    let ticker1 = document.getElementsByName('tickers').val();
    let weight1 = document.getElementsByName('weights').val();
    $.ajax({
        type: "POST",
        url: "/p",
        data: {ticker1: ticker1, weight1: weight1},

我有多个这样的输入字段，我想从输入中获取值并将它们发送到 python。

我尝试为它们分配 ID 并调用它们，但是当我创建一个按钮以创建更多输入字段时，这会导致问题。我不知道如何自动识别它们。

似乎用 document.getElementsByName 调用它们不起作用。我总是只得到第一个值。 有什么方法可以一次获取所有代码和权重的值？

我想要 代码 = [代码 1，代码 2，代码 3 ..] 权重 = [权重 1、权重 2、权重 3...]

谢谢，

Answer 1

是的，你可以很容易地得到一组值：

const array = $("[name=tickers]").map((i, elm) => elm.value).get();

现场示例：

$("[type=button]").on("click", () => {
    const array = $("[name=tickers]").map((i, elm) => elm.value).get();
    console.log(array);
});

<div>
  <input type="text" class="form-control" name='tickers' id="ticker1" placeholder="Ticker">
  <input type="number" max=100 min=0 class="form-control weight-input" name='weights' id="weight1" placeholder="weight">
</div>
<div>
  <input type="text" class="form-control" name='tickers' id="ticker2" placeholder="Ticker">
  <input type="number" max=100 min=0 class="form-control weight-input" name='weights' id="weight2" placeholder="weight">
</div>
<input type="button" value="Click For Array">

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

map 创建一个新的 jQuery 对象，其中包含值而不是 HTML 元素，然后get 将其转换为数组。

你也可以反过来做：

const array = $("[name=tickers]").get().map(elm => elm.value);

现场示例：

$("[type=button]").on("click", () => {
    const array = $("[name=tickers]").get().map(elm => elm.value);
    console.log(array);
});

<div>
  <input type="text" class="form-control" name='tickers' id="ticker1" placeholder="Ticker">
  <input type="number" max=100 min=0 class="form-control weight-input" name='weights' id="weight1" placeholder="weight">
</div>
<div>
  <input type="text" class="form-control" name='tickers' id="ticker2" placeholder="Ticker">
  <input type="number" max=100 min=0 class="form-control weight-input" name='weights' id="weight2" placeholder="weight">
</div>
<input type="button" value="Click For Array">

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

没有 jQuery，在现代环境中，您可以利用querySelectorAll 中的NodeList 现在可迭代（同样，在现代环境中）这一事实：

const array = [...document.querySelectorAll("[name=tickers]")].map(elm => elm.value);

现场示例：

document.querySelector("[type=button]").addEventListener("click", () => {
    const array = [...document.querySelectorAll("[name=tickers]")].map(elm => elm.value);
    console.log(array);
});

<div>
  <input type="text" class="form-control" name='tickers' id="ticker1" placeholder="Ticker">
  <input type="number" max=100 min=0 class="form-control weight-input" name='weights' id="weight1" placeholder="weight">
</div>
<div>
  <input type="text" class="form-control" name='tickers' id="ticker2" placeholder="Ticker">
  <input type="number" max=100 min=0 class="form-control weight-input" name='weights' id="weight2" placeholder="weight">
</div>
<input type="button" value="Click For Array">

或者实际上，使用Array.from 的映射功能（您可能需要对其进行填充，但这很容易做到）：

const array = Array.from(document.querySelectorAll("[name=tickers]"), elm => elm.value);

现场示例：

document.querySelector("[type=button]").addEventListener("click", () => {
   const array = Array.from(document.querySelectorAll("[name=tickers]"), elm => elm.value);
    console.log(array);
});

<div>
  <input type="text" class="form-control" name='tickers' id="ticker1" placeholder="Ticker">
  <input type="number" max=100 min=0 class="form-control weight-input" name='weights' id="weight1" placeholder="weight">
</div>
<div>
  <input type="text" class="form-control" name='tickers' id="ticker2" placeholder="Ticker">
  <input type="number" max=100 min=0 class="form-control weight-input" name='weights' id="weight2" placeholder="weight">
</div>
<input type="button" value="Click For Array">