Получить массив из входных текстовых полей в JavaScript

Question

У меня есть форма, как это:

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

С некоторыми JavaScript, как это:

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

Что мне нужно сделать, это получить как atrib[] и val[] массивы, когда пользователь нажимает кнопку генерации onclick="gen();", чтобы перебрать их через них и выполнить некоторые операции. При попытке сделать это, inputAtrib и inputVal возвращение undefined. Я не смог найти легкий ответ для этого, пожалуйста, не могли бы вы помочь мне найти правильный путь для решения этой проблемы?

Answer 1

Ваш подход находится на правильном пути. Просто вы неправильно используете document.getElementsByName. Из docs (курсив мой):

Метод getElementsByName() возвращает коллекцию всех элементов в документе с заданным именем (значение атрибута Name), как NodeList объекта.

Так что в вашем коде, где вы делаете:

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

Другими словами, это будет массив элементов, которые имеют атрибут name с 'Attrib [] значение, и поэтому вы не можете только доступ к атрибуту этого массива value, поэтому вы, когда вы это делаете:

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 

Так что вы хотели бы сделать что-то вроде:

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

Вы также можете использовать document.querySelectorAll("input[name='atrib[]']").

Я включил оба этих подхода и сделал из него Fiddle. Не стесняйтесь играть с ним.

Надеюсь, вы начнете в правильном направлении.

Answer 2

Мое решение. JavaScript-код, который показывает в боевой готовности каждого вход по имени atrib и 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>