CODEWITHSUNDEEP
javascripthtmljqueryajaxinput
StAndrews
StAndrews

Reputation: 3

Is there a way to get multiple input values?

<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},

I have multiple input fields like this and I would like to get the values from the inputs and send them to python.

I tried to assign them ids and call them, but this causes an issue when I create a button to create more input fields. I have no idea how to auto id them.

It seems like calling them with document.getElementsByName does not work. I always get the first value only. Is there any way to get all the values of tickers and weights at once?

I would like Tickers = [ticker1, ticker 2, ticker 3 ..] Weights = [weight1, weight 2, weight 3...]

Thank you,

Upvotes: 0

Views: 72

Answers (1)

T.J. Crowder
T.J. Crowder

Reputation: 1074148

Yes, you can get an array of values fairly easily:

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

Live Example:

$("[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>

The map creates a new jQuery object with the values in it instead of HTML elements, and then get converts that to an array.

You can also do it the other way around:

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

Live Example:

$("[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>

Without jQuery, in modern environments, you can take advantage of the fact that the NodeList from querySelectorAll is iterable now (again, in modern environments):

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

Live Example:

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

Or actually, use the mapping feature of Array.from (you may have to polyfill it, but that's easily done):

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

Live Example:

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

Upvotes: 2

Related Questions