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.

Are you actually saying that you want to attach events to these inputs that updates a array when the input is modified? also are you using any javascript libraries at the moment (e.g. jQuery) that might help with this task? — user359135
– user359135, Commented May 14, 2013 at 10:13
Of course we can. gordatron is just asking for clarification because your question isn't clear. You might provide us with some of the code you've already created so that we can help you out, rather than actually do it for you. — Derek Henderson
– Derek Henderson, Commented May 14, 2013 at 10:23
@gogo, thanks for the clarification. I've provided a solution below. — Derek Henderson
– Derek Henderson, Commented May 14, 2013 at 11:10

Anoop Joshi P · Accepted Answer · 2013-05-14 09:57:37Z

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>

answered May 14, 2013 at 9:57

Anoop Joshi P

25.6k9 gold badges35 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ema Over a year ago

You obtain a string, not an array

Derek Henderson · Accepted Answer · 2013-05-14 11:24:04Z

1

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.

edited May 14, 2013 at 11:24

answered May 14, 2013 at 11:09

Derek Henderson

9,7364 gold badges46 silver badges72 bronze badges

5 Comments

gogo Over a year ago

Thanks.. I was able to solve it with the same idea where i assigned unique id's to each input element.. I used onblur method in input element where I sent 'i' as parameter to javascript and used this code to accomplish my task.. ch.push(document.getElementsByName(<%=i%>.value)); where 'i' is the input element's name.

Derek Henderson Over a year ago

Why onblur instead of onchange? onblur increases your overhead, as you only need to update the array when the values change.

Derek Henderson Over a year ago

onchange will only run the function if the value changes onblur, whereas onblur will run it every time. That overhead is unnecessary.

Derek Henderson Over a year ago

BTW, if you found my answer at all helpful, I wouldn't object to an upvote. ;)

gogo Over a year ago

vote up needs a minimum reputation.. as I am new to this forum,i dont have the minimum reputation to give your up vote. BTW Thanks for ur help UP VOTE ;)

Qvcool · Accepted Answer · 2013-05-14 19:26:05Z

0

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]);
    }
  }
}

edited May 14, 2013 at 19:26

answered May 14, 2013 at 10:02

Qvcool

4583 silver badges10 bronze badges

2 Comments

gogo Over a year ago

i want to assign it one by one into the array.. that is,after entering some value into the first text box and move onto the second one,the first value should be stored into the array.. its not working even if i use onblur

gogo Over a year ago

Your first code helped me to accomplish my task.. I had to modify it a bit to the way i wanted. It helped me a lot.. thanks !!!

ema · Accepted Answer · 2013-05-14 09:56:56Z

0

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

answered May 14, 2013 at 9:56

ema

5,7931 gold badge28 silver badges32 bronze badges

Comments

Prashant16 · Accepted Answer · 2013-05-14 09:58:30Z

0

You can do it using jquery

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

answered May 14, 2013 at 9:58

Prashant16

1,5264 gold badges18 silver badges40 bronze badges

Comments

Derek Henderson · Accepted Answer · 2013-05-14 10:54:56Z

-1

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);
}

edited May 14, 2013 at 10:54

Derek Henderson

9,7364 gold badges46 silver badges72 bronze badges

answered May 14, 2013 at 10:43

omi

7183 silver badges10 bronze badges

Collectives™ on Stack Overflow

Assigning Text Box Values to a String Array in Javascript?

javascript

home.jsp

6 Answers 6

1 Comment

5 Comments

Edit

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

javascript

home.jsp

6 Answers 6

1 Comment

5 Comments

Edit

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related