CODEWITHSUNDEEP
javascriptarrays
M. Haseeb Akhtar
M. Haseeb Akhtar

Reputation: 867

How to add values of dynamically added inputboxes into an array?

I am creating 8 dynamic input boxes at max, one at a time on click. I want to store their values in an array in such a way that if I have added 4 button, store 4 values into array and display them in alert, if I have added 5 values, store 5 values into array and display them in alert etc. What I have done so far:

Javascript:

function show(){
  var data = [];
  for(fieldValue=1;fieldValue<=8;fieldValue++){
    var input = document.getElementById('input - '+fieldValue).value;
    data.push(input);
  }
 alert(data);
}

It only alerts the values of inputboxes If I have added all 8 input boxes, otherwise it says " Cannot read property 'value' of null ". Edit: I am giving IDs to theses inputboxes as (partial):

  var inputField = document.createElement('INPUT');
  inputField.id = 'input - '+fieldValue;

  fieldValue++;

It set IDs as input - 1, input - 2 and so on.. Thanks in advance.

Upvotes: 0

Views: 61

Answers (3)

big nol
big nol

Reputation: 41

As people have mentioned you are iterating 8 times even if there are not 8 input elements. It can be much easier using a class selector and jQuery and iterating for each element that shares that class.

function show(){
    var data = [];
    $.each($('.input-item'), function(key, val){
        data.push($(val).val());
    })
   alert(data);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form>
  <input type="text" id="input-1" class="input-item" />
  <input type="text" id="input-2" class="input-item" />
  <input type="text" id="input-3" class="input-item" />
  <input type="text" id="input-4" class="input-item" />
  <input type="text" id="input-5" class="input-item" />
  <input type="text" id="input-6" class="input-item" />
  <input type="text" id="input-7" class="input-item" />
  <input type="text" id="input-8" class="input-item" />
  <button type="button" onclick="show()">Click me</button>
</form>

Upvotes: 0

Guillaume Georges
Guillaume Georges

Reputation: 4020

You are looping from 1 to 8.

If you added less than 8 input boxes (let's say 5), at some point document.getElementById('input - '+fieldValue) will return null because there won't be an element with the id 'input - 6' in the document.

To secure your code, you have to check if document.getElementById('input - '+fieldValue) is not null before trying to retrieve the data. 

function show(){
  var data = [];
  for(fieldValue=1;fieldValue<=8;fieldValue++){
    var input = document.getElementById('input - '+fieldValue);
    if (input != null) 
       data.push(input.value);
  }
 alert(data);
}

Upvotes: 2

bluehipy
bluehipy

Reputation: 2294

function show() {
  var data = [];
  for (fieldValue = 1; fieldValue <= 8; fieldValue++) {
    var input = document.getElementById('input - ' + fieldValue);
    if (inpt) {
      input = input.value;
      data.push(input);
    }

  }
  alert(data);
}

Upvotes: -1

Related Questions