Assigning Text Box Values to a String Array in Javascript?

Question

Is there a way to assign each of the values I enter into multiple text boxes into a string array in JavaScript?

javascript

<script type="text/javascript">
  var ch[];

  function getAllValues() {
   alert('Entered');

   for(var i=0;i<5;i++) {
      ch.push(document.getElementsByName("src")[i]);
    };

 alert(ch);
}
</script>

home.jsp

<form method="post" name="myform" onsubmit="getAllValues();">//
    <%
        for (int i = 0; i < 5; i++) {
    %>
    <input type="text" name="src"/ >
    <%
        }
    %>
    <input type="submit" value="submit">
</form>


var ch[];

Here there are 5 text boxes. I want to assign the values entered here into an array using JavaScript.

Does anybody have any idea how to do this? I was stuck on this for 2 days.

Answer 1

 <script>
 var str = "";
 function getAllValues() {
     var inputs = document.getElementsByTagName('input');
     for (i = 0; i < inputs.length; i++) {
         str += inputs[i].value + "  ";
     }
     alert(str);
 }
</script>

Answer 2

First, to save yourself a headache, you might consider giving your inputs unique names/ids, like this:

<% for (int i = 0; i < 5; i++) { %>
    <input type="text" name="src<%= i %>" id="src<%= i %>"/ >
<% } %>

Then your JavaScript would be something like this:

var inputs = document.querySelectorAll('input[type=text]'),
    inputLen = inputs.length,
    ch = [],
    i,
    updateVal = function () {
        var id = this.id.replace('src', '');
        ch[id] = inputs[id].value;
    };

for (i = 0; i < inputLen; i += 1) {
    ch[i] = inputs[i].value;
    inputs[i].onchange = updateVal;
}

And you can see in this demo that it works. It populates the ch array with the initial (blank) values of the inputs and then updates the values every time you change an input.

Answer 3

Give a class to your inputs, for example inp. Then you can write:

var result = $('.inp').map(function(m, i){ return i.value;})

result will be the array of values

Answer 4

You can do it using jquery

var arr = new Array();
    $("input[name='src']").each(function () {
        arr.push($(this).val());
    })

Answer 5

for(i=0;i<5;i++) {
  ch.push(document.getElementsByName("src")[i]);
}

Edit

<% for(int i=0;i<5;i++) { %>      
  <input type="text" name="src" onBlur="srcBlur()" />
<% } %>

...

var src = new Array();

function srcBlur(this) {
  if(this == document.getElementsByName("src")[0]) src[0] = this.value;
  else if(this == document.getElementsByName("src")[1]) src[1] = this.value;
  else if(this == document.getElementsByName("src")[2]) src[2] = this.value;
  else if(this == document.getElementsByName("src")[3]) src[3] = this.value;

  if(src[0] && src[1] && src[2] && src[3] && src[4]) {
    for(i=0;i<5;i++) {
      ch.push(src[i]);
    }
  }
}

Answer 6

var stringArr = [];

for (i = 0; i < 6; i++) {
    var element = document.createElement("input");
    element.setAttribute("type", "text");
    element.setAttribute("name", "textbox_" + i);
    element.setAttribute("id", "textbox_" + i);
    element.onkeyup = function () {
        keyPressFunc(this.id)
    };
    document.body.appendChild(element);
    stringArr.push("");
}

function keyPressFunc(elem) {
    var index = elem.split("_")[1];
    stringArr[index] = document.getElementById(elem).value;
    alert(stringArr);
}