Get array from input textboxes in JavaScript - Stack Overflow

admin管理员组

文章数量:1406759

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'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?

• javascript
• arrays
• input
• textbox

Share Improve this question Follow edited Feb 17, 2015 at 11:17 Cornezuelo del Centeno asked Feb 17, 2015 at 10:46 Cornezuelo del CentenoCornezuelo del Centeno 50199 silver badges2525 bronze badges 7

• I tried something like document.getElementsByName("atrib").value without any luck, it returns undefined – Cornezuelo del Centeno Commented Feb 17, 2015 at 11:02
• because your name attribute is not atrib but atrib[] – Alex Commented Feb 17, 2015 at 11:04
• 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 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 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 Commented Feb 17, 2015 at 11:15

 |  Show 2 more ments

2 Answers 2

Sorted by: Reset to default 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.

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>

本文标签： Get array from input textboxes in JavaScriptStack Overflow