Доступ к массиву текстовых полей ввода HTML с помощью jQuery или плоскости JavaScript
Я надеюсь создавать форму, которая содержит динамическое количество входных текстовых полей. Я хотел бы, чтобы каждое текстовое поле явилось частью массива (это будет в теории помогать мне циклично выполниться через них, тем более, что я не буду знать количество текстовых полей, которые будут в конечном счете существовать). HTML-код хотел бы что-то как:
<p>Field 1: <input type="text" name="field[1]" id="field[1]"></p>
<p>Field 2: <input type="text" name="field[2]" id="field[2]"></p>
<p>Field 3: <input type="text" name="field[3]" id="field[3]"></p>
<p>Field 4: <input type="text" name="field[4]" id="field[4]"></p>
<p>Field 5: <input type="text" name="field[5]" id="field[5]"></p>
Эти данные были бы затем отправлены в Сценарий PHP и будут представлены как массив - или по крайней мере, это - теория.
Таким образом, мой первый вопрос, это достижимое использование HTML? Формы разработаны для прокладывания себе путь?
Если бы ответ на это - "да", как я затем пошел бы о доступе к каждому из тех, которые используют jQuery или сбой это, простой JavaScript?
Я попытался достигнуть этого с помощью следующего кода jQuery:
someval = $('#field[1]').val();
и
someval = $('#field')[1].val();
и следующий JavaScript:
someval = document.getElementById('related_link_url')[1].value;
Но у меня не было удачи.
Заранее спасибо.
Править:
Я должен отметить, что с точки зрения JavaScript, у меня был он работа, где идентификатор каждого элемента - что-то как field_1, field_2 и т.д. Однако я чувствую, что, если бы я могу достигнуть его путем размещения каждого текстового поля в массив, это сделало бы для более опрятного и более легкого для управления кодом.
2 ответа
Прежде всего, атрибут id не может содержать [ или ] символа.
Существует множество способов получить ссылки jQuery/plain JavaScript на эти элементы. Вы можете использовать потомственный селектор:
<fieldset id="list-of-fields">
<!-- your inputs here -->
</fieldset>
$("#list-of-fields input");
document.getElementById("list....").getElementsByTagName("input");
Вы также можете использовать селектор атрибутов:
$("input[name^=field]");
Я не уверен, что это единственный способ, но я думаю, что в простом JavaScript вам придется извлечь все элементы input (-документ. getElementsByTagName), а затем пройтись по массиву этих элементов и проверить каждый элемент (имеет ли он атрибут name, значение которого начинается с поля ).
Дайте каждому элементу класс и получите доступ к группе с помощью jQuery:
<p>Field 1: <input type="text" name="field[1]" class="fields"></p>
<p>Field 2: <input type="text" name="field[2]" class="fields"></p>
<!-- etc... -->
jQuery:
$("input.fields").each(function (index)
{
// Your code here
});
Это запустит анонимную функцию для каждого элемента input с именем класса «fields», с ключевое слово this , указывающее на текущий элемент. См. http://api.jquery.com/each/ для получения дополнительной информации.