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，在现代环境中，您可以利用以下事实：NodeList中的querySelectorAll现在可以迭代（同样在现代环境中）：

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">

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

1 个答案: