How do I print the a list of arrays from multiple text input using javascript?

Question

Code description:

Clicking the button (id=a1) will add text input brackets (e.g. 3 clicks will give 3 text input). I am trying to get the values from all the text inputs and show it on the page,however, my code only prints out the value from the first text input. How can I get it to print all the values from all the text inputs?

// add textbox function onclick
var a1 = 0;
var x = [];

function addInput() {
  document.getElementById('text').innerHTML += "Load magnitude <input type='text' id='a1' value=''/><br />";

  a1 += 1;
}

//Adds inout into list var x
function pushData()

{
  //get value from input text
  var inputText = document.getElementById('a1').value;


  //append data to the array
  x.push(inputText);
  var pval = x;
  document.getElementById('pText').innerHTML = pval;
}

<!--Loadtype selection-->
<div class="test">
  Load type:<br>
  <img src="https://upload.wikimedia.org/wikipedia/commons/a/a0/Circle_-_black_simple.svg" width="50 height=" 50 alt="unfinished bingo card" onclick="addInput()" />
  <br><br>
</div>

<p id="text"></p>
<button onclick="pushData();">Submit</button>
<p id="pText">List from input inserted here!</p>
<p id="pText2">value of a1</p>

You need to change your input id bacause you are creating N input with the same id a1. So you print always the first value. — Fabio_MO, May 25 '18 at 11:11
@Fabio_MO, I did the "a1 + = 1" so that the input name changes, am I doing it wrong? — Royston Teo, May 25 '18 at 11:18
I added a couple more duplicates. Please use the search and google — baao, May 25 '18 at 11:18
The core issue is a duplicate..correct. You just need to make the `id` of the generated inputs dynamic and probably store them in an array. Then later read from each of those inputs accordingly. — gotomanners, May 25 '18 at 11:21

score 0 · Answer 1 · answered May 25 '18 at 11:30

I have made a couple of improvements to your code, that you can see in the code snippet below.

The essential changes you need to make would be,

Use a class selector instead of ID selector. When you invoke document.getElementById it returns one element having the provided ID. Instead you want all the textboxes that were dynamically created. So you can add a CSS class to the input at the time of creation (class='magnitude-input') and afterwards use it to get all inputs (document.getElementsByClassName('magnitude-input')).
Once you get a list of inputs, you can iterate over them and collect their values into an array (x in your case). Note that x should be definied within the function pushData, otherwise it will retain values previously added to it.
Also, the variable a1 seems unnecessary after that. So you can remove it.

// add textbox function onclick
function addInput() {
  document.getElementById('text').innerHTML += "Load magnitude <input type='text' class='magnitude-input' value=''/><br />";
}

//Adds inout into list var x
function pushData() {
  var x = [];
  
  //get value from input text
  var inputs = document.getElementsByClassName('magnitude-input');
  
  for(var i = 0; i < inputs.length; i++) {
    var inputText = inputs[i].value;
  
    //append data to the array
    x.push(inputText);  
  }
  
  document.getElementById('pText').innerHTML = x;
}

<!--Loadtype selection-->
<div class="test">
  Load type:<br>
  <img src="https://upload.wikimedia.org/wikipedia/commons/a/a0/Circle_-_black_simple.svg" width="50 height=" 50 alt="unfinished bingo card" onclick="addInput()" />
  <br><br>
</div>

<p id="text"></p>
<button onclick="pushData();">Submit</button>
<p id="pText">List from input inserted here!</p>
<p id="pText2">value of a1</p>

How do I print the a list of arrays from multiple text input using javascript?

1 Answers1