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

180
30 августа 2018, 15:00

Создаю 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'>");
})
Answer 1

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

Поставить на их (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>

Answer 2

Мне нужно самому указывать 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>

Answer 3
<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());
});
Answer 4

Чтобы вытащить значения у произвольного числа элементов, вложенных в другой элемент, есть циклы. Например, вы можете получить все 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)

READ ALSO
Аналоги babel для разбора JSX в браузере

Аналоги babel для разбора JSX в браузере

Нашел в интернете неплохой набор компонентов для ReactМанипулируя ими можно многократно ускорить процесс разработки веб-сайта, относительно...

157
Перебор 10+ массивов JS HTML

Перебор 10+ массивов JS HTML

Задача написать HTML и залить на сотовый для поездки в Крым, пока, по приезду нет интернетаНакидал 40 маршрутов с достопримечательностями как...

291
TinyMCE - Не видно поле, проблемы со стилизацией

TinyMCE - Не видно поле, проблемы со стилизацией

Стилизация TinyMCE страдает, не видно текстового поля, с чем может быть связана проблема?

142
Как лучше организовать такой лендинг с косыми блоками?

Как лучше организовать такой лендинг с косыми блоками?

Всем привет, я - начинающий и нужен совет по организации лендинга

205