Изъять id,динамически созданного инпута

#javascript #html #jquery #dom #события

Создаю input элементы динамически, а далее нужно вытянуть из них данные. Как быть,
если создано сразу два или более input'ов? Мне нужно самому указывать id при динамическом
создании?


  



$("button").click(function() {
  $("div").append("");
  $("div").append("");
})

    

Ответы

Ответ 1

Создав динамически инпута, далее нужно вытянуть данные, а как если два три созданных? 


Поставить на их (class) счетчик, вот так first_0, second_1, ....


  Мне нужно самому указывать id при динамическом создании?


id это уникальный идентификатор, в вашем случае скорее надо использовать, атрибут class.

Вот так:



var counter = 0;
$("button").click(function() {
  // Добави child в div
  $("div").append(
    $("", { // Создать елемент
      type: 'text',
      "placeholder": 'first',
      class: 'first_' + counter
    })
    // Добавить sibling
    .add(
      $("", { // Создать елемент
        type: 'text',
        "placeholder": 'second',
        class: 'second_' + counter
      })
    )
  );
  // Увеличивает счётчик
  counter++
})


  







UPD:

Использования id, в целом рекомендуется ограничивать.

Ещё один возможный вариант кода без счётчика:



//----------------------------------------------------------------
// Вариант без счетчика
//----------------------------------------------------------------
$(".addField").click(function() {
  // Добави child в div
  $("div").append(
    $("", { // Создать елемент
      type: 'text',
      "placeholder": 'first',
      class: 'first' // только class 
    })
    // Добавить sibling
    .add(
      $("", { // Создать елемент
        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());
  })
})


  
  
  



Ответ 2

Мне нужно самому указывать id при динамическом создании?


Да, можно указать id='something' по аналогии с placeholder.

Также можно сделать вот так:



var $input = $("");
// Присваиваем val для теста:
$input.val('test');
$('div').append($input);

console.log($input.val());





Ответ 3


    


$("button").on('click', function() {
    $("div").append("");
    $("div").append("");
});

$(document).on('change', '.first', function(){
    console.log($(this).val());
});

$(document).on('change', '.second', function(){
    console.log($(this).val());
});


Ответ 4

Чтобы вытащить значения у произвольного числа элементов, вложенных в другой элемент,
есть циклы. Например, вы можете получить все input элементы внутри нужного вам div
блока и с помощью цикла получить их значения. Как-то так:

var values = []; // сюда запишем значения из input
$('div input').each(function(el){
  values[] = $(el).val();
));


Вообще, для нормальной работы с input элементами следует использовать атрибут name,
чтобы идентифицировать название хранимой переменной в этом input элементе. Атрибут
id, конечно, используется для связки с тегом label и вообще хорош сам по себе, но при
сериализации формы (автоматическом получении значений всех инпутов вложенных в тег
form) собирается строка именно из пар name=value&name1=value1&... и т.д.

Поэтому, если вам нужно в дальнейшем будет передавать эти данные на сервер или ещё
куда — то посмотрите на тег 
 и возможности jQuery по сериализации его полей (jQuery.serialize)