Как извлечь текстовое значение из динамически созданных текстовых полей ввода через кнопку в JavaScript?

Мне нужна помощь в правильном извлечении «значений», введенных в «текстовое поле», которое было динамически создано на основе желаемого пользовательского ввода. Моя проблема прямо сейчас - моя кнопка «print usr» не вызывает функцию для печати значений, введенных в текстовые поля. Я не получаю никаких ошибок в консоли, поэтому я полностью озадачен тем, почему он не работает.Как извлечь текстовое значение из динамически созданных текстовых полей ввода через кнопку в JavaScript?

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

Вот общее представление о том, как он в настоящее время работает с графическим интерфейсом с моим HTML и JS код:

HTML:

<html> 
<head> 
    <script src="elemCreator.js"></script> 
</head> 

<body> 
    <b>Input # of users:</b> 
    <form id="usr_form" name="usr_form" method="get" action="mainmenu.html" onsubmit="elemCreator.createUserEntry(document.usr_form.usr_num.value);return false;"> 
     <input type="text" name="usr_num"> 
     <input type="submit" value="Submit"> 
    </form> 
</body> 
</html>

JavaScript:

function elementCreator() { 
    this.usrList = []; 
} 

var elemCreator = new elementCreator(); 

elementCreator.prototype.createUserEntry = function (usr_num) { 
    for (i = 0; i < usr_num; i++) { 
     document.body.innerHTML += '<b>User #' + (i + 1) + ': </b><br>'; 
     this.usrList[i] = document.createElement("INPUT"); 
     this.usrList[i].setAttribute("type","text"); 
     document.body.appendChild(this.usrList[i]); 

     document.body.appendChild(document.createElement("br")); 
     document.body.appendChild(document.createElement("br")); 
    } 

    document.body.innerHTML += '<form onsubmit="elemCreator.printUsrs(usr_num); return false;">'; 
    document.body.innerHTML += '<input type="submit" value="Print User Names">'; 
    document.body.innerHTML += '</form>'; 
} 

//Using this function below just to see whether or not the text values are being saved to the array 
elementCreator.prototype.printUsrs = function (usr_num) { 
    for (i = 0; i < usr_num; i++) { 
     document.body.innerHTML += '<br>' + this.usrList[i].value; 
    } 
}

Мой текущий HTML-код:

Текущий HTML-интерфейс работает, но кнопка внизу не работает.

источник

2016-07-13 ceekaytee

Поэтапное добавление разметки к документу - не очень хорошая идея, особенно когда вы добавляете закрывающие теги в отдельной операции в соответствующий тег открытия. Объедините разметку в одну строку и запишите ее сразу, убедившись, что она действительная разметка сама по себе. – RobG

Каково значение для * usr_num *, которое передается * printUsrs *? Кажется, не определено, поэтому цикл не зацикливается. – RobG

@RobG дает два замечательных подсказки относительно того, почему этот код не работает, но также, вероятно, пора научиться использовать jQuery или шаблонный инструмент, например Handlebars (или, возможно, React). Подобная прямая манипуляция DOM, как известно, трудно получить, особенно в кросс-платформенном виде. – smarx

Вот рабочий пример использования JQuery:

<html> 
<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
    <style> 
     html { font-family: Arial; } 
     input.name { margin-bottom: 20px; } 
     button { display: block; } 
     h2 { margin: 0; } 
    </style> 
</head> 

<body> 
    <h3>Input # of users:</h3> 
    <form id="user-form"> 
     <input type="text" id="number-of-users"> 
     <input type="submit" value="Submit"> 
    </form> 

    <script> 
     function createUserEntries(numberOfUsers) { 
      for (var i = 0; i < numberOfUsers; i++) { 
       $(document.body).append($('<h2>').text('User #' + (i + 1) + ': ')); 
       $(document.body).append($('<input>').attr('type', 'text').addClass('name')); 
      } 

      var button = $('<button>').text('Print User Names').click(function (e) { 
       e.preventDefault(); 
       printUsers(); 
      }); 
      $(document.body).append(button); 
     } 

     function printUsers() { 
      $('input.name').each(function() { 
       $(document.body).append($('<p>').text($(this).val())); 
      }); 
     } 

     $(function() { 
      $('#user-form').submit(function (e) { 
       e.preventDefault(); 
       createUserEntries($('#number-of-users').val()); 
      }); 
     }); 
    </script> 
</body> 
</html>

источник

2016-07-13 23:55:52 smarx

Большое спасибо! Это замечательная часть для меня, чтобы чаще использовать jQuery. – ceekaytee

Я согласен с RobG. Я воспроизвел ваш код в jsbin для исследования и обнаружил, что элемент формы закрывается перед добавлением кнопки отправки. Таким образом, кнопка отправки фактически находится вне формы.

Я исправил это, добавив вашу форму и кнопку ввода на одной строке.

Кроме того, чтобы отслеживать количество динамически генерируемых входов, я нашел один способ заставить его работать. При создании ввода я добавил имя класса. Затем onsubmit получает все входы с этим именем класса и сохраняет это в массиве и выводит все значения на экран.

Надеется, что это помогает, и я не калечить код слишком много: https://jsbin.com/loritaxoko/edit?html,css,js,output

источник

2016-07-13 23:56:12

innerHTML свойства/метод не метод DOM - люди, кажется, не понимают эту разницу - innerHTML является свойство а DHTML/метод.

Нельзя полностью использовать свойство innerHTML для создания элементов пользовательского интерфейса. Элементы пользовательского интерфейса не являются точными элементами html, они встроены в элементы управления в браузере, и они могут просто не полностью инициализироваться, если они были созданы после загрузки страницы с использованием простого html.

Рассмотрите возможность использования DOM-методов, таких как createElement («Тип интерфейса») и append ....

источник

2016-07-14 01:00:15

Как извлечь текстовое значение из динамически созданных текстовых полей ввода через кнопку в JavaScript?

ответ

Смежные вопросы