Get array from input textboxes in JavaScript

Question

I've got a form like this:

<form>
<input type="text" name="name" value="object name"><br>
<input type="text" name="atrib[]" value="atrib name"><input type="text" name="val[]" value="default value"><br>
<input type="text" name="atrib[]" value="atrib name"><input type="text" name="val[]" value="default value"><br>
<input type="text" name="atrib[]" value="atrib name"><input type="text" name="val[]" value="default value"><br>
<div id="fooBar"></div>
<input type="button" value="Add" onclick="add();"><input type="button" value="Generate" onclick="gen();">
</form>

With some JavaScript like this:

<script>
function add() {
    //Create an input type dynamically.
    var element = document.createElement("input");
    var element2 = document.createElement("input");

    //Assign different attributes to the element.
    element.setAttribute("type", "text");
    element.setAttribute("value", "atrib name");
    element.setAttribute("name", "atrib[]");
    element2.setAttribute("type", "text");
    element2.setAttribute("value", "default value");
    element2.setAttribute("name", "val[]");

    // the div id, where new fields are to be added
    var bar = document.getElementById("bar");

    //Append the element in page (in span).
    bar.appendChild(element);
    bar.appendChild(element2);
    bar.innerHTML += "<br>";
}

function gen() {
    var inputAtrib = document.getElementsByName("atrib[]").value;
    var inputVal = document.getElementsByName("val[]").value;
    alert(inputAtrib);
    alert(inputVal);
}
</script>

What I need to do is retrieve both atrib[] and val[] arrays when a user clicks on generate onclick="gen();" button in order to loop trough them and perform some operations. When trying to do so, inputAtrib and inputVal return undefined. I wasn't able to find an easy answer for this, please, could you help me to find the right road to the solution of this problem?

I tried something like document.getElementsByName("atrib").value without any luck, it returns undefined — Cornezuelo del Centeno
– Cornezuelo del Centeno, Commented Feb 17, 2015 at 11:02
using atrib[] returns undefined as well. Also, I don't understand why the downvote. I've done my research and found nothing about this. I found a lot of useful information for retrieving data from normal inputs, but anything about arrays >.< — Cornezuelo del Centeno
– Cornezuelo del Centeno, Commented Feb 17, 2015 at 11:08
because this is not how you ask questions. "here is my markup, i want this and this. go and show me the code" is not how you ask on SO, show the code that you've tried and that does not work — Alex
– Alex, Commented Feb 17, 2015 at 11:09
I wasn't asking at all to write the code for me, I want to understand how should I do this and wanted some tips for puting myself on the road to the solution... — Cornezuelo del Centeno
– Cornezuelo del Centeno, Commented Feb 17, 2015 at 11:15

Vivek Pradhan · Accepted Answer · 2015-02-17 11:54:36Z

4

Your approach is on the right track. It's just that you're using the document.getElementsByName slightly wrong. From the docs(emphasis is mine):

The getElementsByName() method returns a collection of all elements in the document with the specified name (the value of the name attribute), as a NodeList object.

So in your code where you do:

document.getElementsByName("atrib[]") //This returns a NodeList object

In other words, this would be an array of elements that have the name attribute with value 'attrib[]' and therefore you can't just access the value attribute of that array, which is why you when you do this:

var inputAtrib = document.getElementsByName("atrib[]").value; //You get undefined

console.log(document.getElementsByName("atrib[]")); //This would return a node list and you can see all the matched input elements are returned

So you would want to do something like:

 var test = document.getElementsByName("atrib[]");
 console.log(test[0].value); //Outputs "atrib name 1"

You could also use document.querySelectorAll("input[name='atrib[]']").

I have incorporated both these approaches and made a Fiddle out of it. Feel free to play around with it.

Hope it gets you started in the right direction.

answered Feb 17, 2015 at 11:54

Vivek Pradhan

4,8653 gold badges28 silver badges47 bronze badges

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

2 Comments

Cornezuelo del Centeno Over a year ago

Thanks, that helped me a lot! With your info I managed to do what I wanted to do, I also made a Fiddle (jsfiddle.net/pdu8vLz5) with the result, if anyone is interested!

Lal Kumar Rai Over a year ago

instead of alert every name ,how can we save all the value in an object or array and later alter at once?

Cornezuelo del Centeno · Accepted Answer · 2015-02-17 12:09:13Z

0

My solution. JavaScript code that shows in an alert each input named atrib and val:

<script>
function gen() {
    var o = 0;
    while (o < document.getElementsByName("atrib").length) {
        var inputAtrib = document.getElementsByName("atrib")[o].value;
        var inputVal = document.getElementsByName("val")[o].value;
        alert(inputAtrib);
        alert(inputVal);
        o++;
    }
}
</script>

answered Feb 17, 2015 at 12:09

Cornezuelo del Centeno

5019 silver badges25 bronze badges

Collectives™ on Stack Overflow

Get array from input textboxes in JavaScript

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related