Question

我正在使用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 + '\');" />';

}

Answer 1

Textarea元素没有 innerHTML 属性。只需阅读值属性，就像使用任何其他表单元素一样。

document.getElementById(unique_textbox_id).value

Answer 2

输入类型=“文本”字段没有innerHTML，它们通常表示为自闭标签。

改为使用value属性：

document.getElementById(unique_textbox_id).value

Answer 3

我必须创建div元素，将其添加到文档中，然后添加子元素（文本框和提交按钮）。

不，你通常不必这样做。造成问题的原因是：

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

对document.getElementById（）。innerHTML的访问是在创建字符串时发生的，即在执行create_div_dynamic（），而不是时按下按钮。此时，该字段刚刚创建，没有.value。（它也没有.innerHTML，但它永远不会，因为它是一个输入元素。）

您修改后的代码使用了一个正确的JavaScript函数，该函数在onclick时调用，并将该属性修复为value，这样就可以了。当值字符串中存在撇号或反斜杠时，此方法也不会消失。

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;

Answer 4

对于我船上的其他人，我想展示解决方案。事实证明我是以错误的顺序添加元素。

我必须创建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 ，一切顺利。

Answer 5

    $cid         =$_REQUEST['cid'];
    $name        =addslashes($_REQUEST['name']);
    $email       =$_REQUEST['email'];
    $comments    =$_REQUEST['comments'];
    $comment_type=$_REQUEST['type'];
    $gstatus     =(isset($_REQUEST['gstatus'])) ? $_REQUEST['gstatus'] : 'no';
    $user_type   =(!empty($_SESSION['user_id'])) ? 'author' : 'user';

从动态生成的文本框中获取innerHTML值（在javascript中）

5 个答案: