Создаю input элементы динамически, а далее нужно вытянуть из них данные. Как быть, если создано сразу два или более input'ов? Мне нужно самому указывать id при динамическом создании?
<div>
<button>Click!!</button>
</div>
$("button").click(function() {
$("div").append("<input type='text' placeholder='first'>");
$("div").append("<input type='text' placeholder='second'>");
})
Создав динамически инпута, далее нужно вытянуть данные, а как если два три созданных?
Поставить на их (class) счетчик, вот так first_0, second_1, ...
.
Мне нужно самому указывать id при динамическом создании?
id
это уникальный идентификатор, в вашем случае скорее надо использовать, атрибут class
.
Вот так:
var counter = 0;
$("button").click(function() {
// Добави child в div
$("div").append(
$("<input/>", { // Создать елемент
type: 'text',
"placeholder": 'first',
class: 'first_' + counter
})
// Добавить sibling
.add(
$("<input/>", { // Создать елемент
type: 'text',
"placeholder": 'second',
class: 'second_' + counter
})
)
);
// Увеличивает счётчик
counter++
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<button>Click!!</button>
</div>
UPD:
Использования id
, в целом рекомендуется ограничивать.
Ещё один возможный вариант кода без счётчика:
//----------------------------------------------------------------
// Вариант без счетчика
//----------------------------------------------------------------
$(".addField").click(function() {
// Добави child в div
$("div").append(
$("<input/>", { // Создать елемент
type: 'text',
"placeholder": 'first',
class: 'first' // только class
})
// Добавить sibling
.add(
$("<input/>", { // Создать елемент
type: 'text',
"placeholder": 'second',
class: 'second' // только class
})
)
);
})
//----------------------------------------------------------------
// Пробегается по всем данным
//----------------------------------------------------------------
$('.getData').click(function() {
var ar_first = $('.first')
var ar_second = $('.second')
$.each(ar_first, function(i) {
console.log(i, $(this).val());
})
$.each(ar_second, function(i) {
console.log(i, $(this).val());
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<!-------- Добалены классы -------->
<button class='addField'>Click!!</button>
<button class='getData'>Get data</button>
</div>
Мне нужно самому указывать id при динамическом создании?
Да, можно указать id='something'
по аналогии с placeholder
.
Также можно сделать вот так:
var $input = $("<input type='text' placeholder='first'>");
// Присваиваем val для теста:
$input.val('test');
$('div').append($input);
console.log($input.val());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
<div>
<button>Click!!</button>
</div>
$("button").on('click', function() {
$("div").append("<input type='text' placeholder='first' class='first'>");
$("div").append("<input type='text' placeholder='second' class='second'>");
});
$(document).on('change', '.first', function(){
console.log($(this).val());
});
$(document).on('change', '.second', function(){
console.log($(this).val());
});
Чтобы вытащить значения у произвольного числа элементов, вложенных в другой элемент, есть циклы. Например, вы можете получить все input
элементы внутри нужного вам div
блока и с помощью цикла получить их значения. Как-то так:
var values = []; // сюда запишем значения из input
$('div input').each(function(el){
values[] = $(el).val();
));
Вообще, для нормальной работы с input
элементами следует использовать атрибут name
, чтобы идентифицировать название хранимой переменной в этом input
элементе. Атрибут id
, конечно, используется для связки с тегом label
и вообще хорош сам по себе, но при сериализации формы (автоматическом получении значений всех инпутов вложенных в тег form
) собирается строка именно из пар name=value&name1=value1&...
и т.д.
Поэтому, если вам нужно в дальнейшем будет передавать эти данные на сервер или ещё куда — то посмотрите на тег <form>
и возможности jQuery по сериализации его полей (jQuery.serialize)
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
Виртуальный выделенный сервер (VDS) становится отличным выбором
Нашел в интернете неплохой набор компонентов для ReactМанипулируя ими можно многократно ускорить процесс разработки веб-сайта, относительно...
Задача написать HTML и залить на сотовый для поездки в Крым, пока, по приезду нет интернетаНакидал 40 маршрутов с достопримечательностями как...
Стилизация TinyMCE страдает, не видно текстового поля, с чем может быть связана проблема?
Всем привет, я - начинающий и нужен совет по организации лендинга