javascript: document.getElementsByName ("sample []") не работает

Question

У меня есть форма, где вы можете добавить дополнительные данные, если это необходимо.Поэтому я назвал свою форму следующим образом.

<input type="text" name="sample[]" />

Я хочу получить доступ ко всем значениям входов с именем «sample []» и сохранить их в массиве, используя JavaScript.Я использовал этот код ниже:

 var sample = document.getElementsByName(sample[]);

Как я могу получить все значения по отдельности?Любая помощь будет принята с благодарностью.Спасибо!!!

Answer 1

В ES6:

var values = [...document.querySelectorAll("input[name='sample[]']")].map(x => x.value);

Но я бы воздержался от использования sample[] в качестве имени входа.

Answer 2

Имя входа name="sample[]".Параметр getElementsByName является значением атрибута name элемента (ов), поэтому должно быть "sample[]".

getElementsByName вернет NodeList , для которого вы можете использовать foreach для зацикливания, используйте item , чтобы вернуть узел из NodeList по индексу или использоватьindex sample[0].

Чтобы получить все значения в массиве в es6, вы можете использовать оператор распространения и карту:

let items = [...document.getElementsByName("sample[]")].map(i => i.value);

var sample = document.getElementsByName("sample[]");
console.log(sample[0].value);
console.log(sample.item(0).value);
let items = [...document.getElementsByName("sample[]")].map(i => i.value);
console.log(items);

<form>
  <input type="text" name="sample[]" value="value1" />
  <input type="text" name="sample[]" value="value2" />
</form>

Answer 3

var sample = document.getElementsByName('sample[]');
Добавить кавычки между sample[].Старайтесь избегать [] во входном имени.

Answer 4

Добавьте это к вашей функции js, и вы получите входные значения в массиве значений.Здесь я получаю NodeList всех элементов с name = "sample []" и преобразовываю в Array для легкой обработки данных.

var sample = Array.prototype.slice.call(document.getElementsByName('sample[]'));
var values = sample.map((o) => o.value);

Протестировал его, а затем ссылка на скрипку.https://jsfiddle.net/mfw4rv9o/13/

Answer 5

Строковое значение 'sample []' полностью отличается от значения eval sample[].Отсюда и путаница над всеми.Если вы уверены, что хотите передать 'sample []' в виде (строки) значения name prop of, убедитесь, что вы его преобразовали в строку и добавили.