Блог

Главная - Вопросы по программированию - Не удается прочитать значения динамически созданных текстовых полей.Столкнулся с неопределенной ошибкой html

Не удается прочитать значения динамически созданных текстовых полей.Столкнулся с неопределенной ошибкой html

#javascript #jquery #html

#javascript #jquery #HTML

Вопрос:

Я создаю строку из 3 текстовых полей динамически.Но я не могу прочитать значения того же самого.

Ниже приведен код для создания текстовых полей.

 $(function() {
  $('#addVNFButton').on('click', function() {
    if (vnfCounter > 10) {
      alert("only 10 vnf's are allowed");
      return false;
    }
    //e.preventDefault();
    $('<div/>').addClass('col-md-12')

      .html('<div class="col-md-3 col-sm-3 col-xs-3"><label class="control-label">Vendor</label> <input type="text" class="form-control" id="vnfVendor"/></div><div class="col-md-3 col-sm-3 col-xs-3"><label class="control-label">Product Name</label> <input type="text" class="form-control" id="vnfProductName"/></div><div class="col-md-3 col-sm-3 col-xs-3"><label class="control-label">Release</label> <input type="text" class="form-control" id="vnfRelease"/></div>')
      .append($('<button/>').addClass('btn btn-action remove').text('Delete'))
      .insertAfter($('#vnfSection'));
    vnfCounter  ;
  });
});

приведенный выше код создает 3 текстовых поля подряд, как показано ниже.

введите описание изображения здесь

Ниже приведен код, с помощью которого я пытался прочитать значения.

 for (var i = 1; i < vnfCounter; i  ) {
  var vnfVendor = "";
  var vnfProduct = "";
  var vnfRelease = "";
  vnfVendor  = $('#vnfVendor'   i).val();

  vnfProduct  = $('#vnfProductName'   i).val();
  vnfRelease]  = $('#vnfRelease'   i).val();
}

Я получаю результат как неопределенный HTML-объект.Пожалуйста, помогите

Комментарии:

1. Не видя рабочего примера проблемы, мы можем только догадываться. Но я полагаю, что проблема в том, что reset vnfVendor и другие в цикле, поэтому каждый раз, когда вы выполняете цикл, вы выбираете значения в нем.

2. Я не вижу никаких элементов с идентификатором vnfVendor[n] — только один с жестко запрограммированным vnfVendor . Возможно, в этом и заключается проблема.

3. Также обратите внимание, что вы не присваиваете новый идентификатор новым объектам, поэтому вы получаете дублированный идентификатор, и это большое «нет».

4. Итак, я должен использовать UUID?

Ответ №1:

Вы используете закрывающий тег div <div/> вместо открывающего тега div <div> . 

 $('<div>').addClass('col-md-12')

Надеюсь, это поможет вам. Удачного кодирования …!

Ответ №2:

Добавьте имя attr. к вашему динамически созданному текстовому полю 

  var Titles = $("input[name='TitleField']").map(function () { return $(this).val().trim(); }).get();

приведенный выше код вернет все текстовые поля vlaue в массиве.
У меня это работает