Получить значение innerHTML из динамически сгенерированного текстового поля (в javascript)

Я использую JavaScript для динамического создания диалогового окна (это элемент div), содержащего текстовое поле и кнопку отправки. Я планирую отправить значение в текстовом поле на другую страницу с помощью AJAX.

Моя проблема в том, что я могу нормально сгенерировать свое текстовое поле, но не могу получить от него значение. innerHTML каждый раз возвращается пустым. Я не уверен, что я делаю неправильно.

// Generate dialogue box using div 
function create_div_dynamic()
{ 
  //Create the div element
  dv = document.createElement('div');

  //unique tags
  var unique_div_id = 'mydiv' + Math.random() * .3245;
  var unique_textbox_id = 'mytext' + Math.random() * .3245;

  //Set div id
  dv.setAttribute('id',unique_div_id);

  //Set div style
  dv.style.position = 'absolute';       
  dv.style.left = '100 px';
  dv.style.top = '100 px';
  dv.style.width = '500px';
  dv.style.height = '100px';
  dv.style.padding = '7px';
  dv.style.backgroundColor = '#fdfdf1';
  dv.style.border = '1px solid #CCCCCC';
  dv.style.fontFamily = 'Trebuchet MS';
  dv.style.fontSize = '13px';

  //Create textbox element
  txt = document.createElement('input');
  txt.setAttribute('id',unique_textbox_id);
  txt.setAttribute('type','text');
  txt.style.marginRight = '10px';

  //Add textbox element to div
  dv.appendChild(txt)

  //Add the div to the document
  document.body.appendChild(dv);

  dv.innerHTML += '<input type="button" id="mysubmit" value="Read Textbox" onclick="javascript:alert(\'' + document.getElementById(unique_textbox_id).innerHTML + '\');" />';

}

javascript textbox
person Ducain    schedule 16.03.2009    source источник

Ответы (4)


arrow_upward
10
arrow_downward

Элементы Textarea не имеют свойства innerHTML. Просто прочитайте свойство value, как и любой другой элемент формы.

document.getElementById(unique_textbox_id).value
person Peter Bailey    schedule 16.03.2009
comment
Текстовые области имеют свойство innerHTML, но это обычное текстовое поле ввода, которого на самом деле нет. (Хотя даже с текстовыми областями .value был бы намного лучшим способом чтения текста.) - person bobince; 17.03.2009

arrow_upward
5
arrow_downward

Поля input type="text" не имеют innerHTML, они обычно представлены в виде самозакрывающихся тегов.

Вместо этого используйте атрибут value:

document.getElementById(unique_textbox_id).value
person Christian C. Salvadó    schedule 16.03.2009

arrow_upward
1
arrow_downward

Мне нужно создать элемент div, добавить его в документ, а ЗАТЕМ добавить дочерние элементы (текстовое поле и кнопку отправки).

Нет, в общем, не нужно этого делать. Причиной вашей проблемы было следующее:

...'onclick="javascript:alert(\'' + document.getElementById(unique_textbox_id).innerHTML + '\');" />';

Этот доступ к document.getElementById().innerHTML происходит во время создания строки, то есть во время выполнения create_div_dynamic(), а не при нажатии кнопки . В этот момент поле только что было создано и не имеет .value. (У него также нет .innerHTML, но он никогда не будет, поскольку это входной элемент.)

В вашем исправленном коде используется правильная функция JavaScript, которая вызывается во время клика и фиксирует значение свойства, так что все в порядке. Этот подход также не умирает, когда в строке значения есть апострофы или обратные косые черты.

dv.innerHTML += '<input ...

Это сериализует все содержимое «dv» в текст HTML, затем добавляет строку и анализирует весь HTML обратно в объекты DOM. Это действительно неэффективно, и в процессе вы теряете все свойства JavaScript объекта, включая обработчики событий и прослушиватели.

«innerHTML+=» всегда является ошибкой. Никогда не используйте его.

txt.setAttribute('id',unique_textbox_id);

Не используйте setAttribute(), он не работает для определенных атрибутов в IE. Вместо этого используйте более читаемые свойства DOM-HTML:

txt.type= 'text';
txt.id= unique_textbox_id;
person bobince    schedule 17.03.2009
comment
Вы сказали, что «innerHTML+=» — это всегда ошибка. Никогда не используйте его. Что следует использовать вместо этого? Спасибо за все указатели! - person Ducain; 17.03.2009
comment
Вы можете записать содержимое во вновь созданный ‹div›.innerHTML, а затем добавить дочерний элемент div обратно к элементу, где вы хотите. Но для одного элемента, подобного этому, вам, вероятно, лучше просто создать его с помощью createElement() и напрямую установить атрибуты. - person bobince; 18.03.2009

arrow_upward
0
arrow_downward

Для других в моей лодке я хочу показать решение. Оказывается, я добавлял элементы в неправильном порядке.

Мне нужно создать элемент div, добавить его в документ, а ЗАТЕМ добавить дочерние элементы (текстовое поле и кнопку отправки).

  //DIV
  dv = document.createElement('div');
  dv.setAttribute('id',unique_div_id);
  dv.style.position = 'absolute';       
  dv.style.left = xx + 'px';
  dv.style.top = yy + 'px';
  dv.style.width = '500px';
  dv.style.height = '20px';
  dv.style.padding = '7px';
  dv.style.backgroundColor = '#fdfdf1';
  dv.style.border = '1px solid #CCCCCC';
  dv.style.fontFamily = 'Trebuchet MS';
  dv.style.fontSize = '13px';

  //Add div element to body
  document.body.appendChild(dv);

  //TEXTBOX
  txt = document.createElement('input'); 
  txt.setAttribute('id',unique_textbox_id);
  txt.setAttribute('type','text');
  txt.style.marginRight = '10px';

  //Add textbox to div element
  document.getElementById('mydiv').appendChild(txt);

  var sbt = document.createElement('input');
  sbt.setAttribute('id','mysubmit');
  sbt.setAttribute('type','submit');
  sbt.setAttribute('value','GO');
  sbt.onclick = function() { alert(document.getElementById('mytext').value); };

  //Add submit to div element
  document.getElementById('mydiv').appendChild(sbt);

Как только это будет сделано, и я использую .value, все пойдет хорошо.

person Ducain    schedule 16.03.2009