Get innerHTML value from dynamically created text field (in javascript)

Question

I use JavaScript to dynamically create a dialog box (this is a div element) containing a text box and a submit button. I plan to send the value in a text box to another page using AJAX.

My problem is that I can generate my text box just fine, but I cannot get the value from it. innerHTML is returned every time. I'm not sure what I'm doing wrong.

// 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 elements do not have an innerHTML property . Just read the value property , as with any other form element.

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 time, , . , .

dv.innerHTML += '<input ...

dv to 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

For others in my boat, I want to show a solution. Turns out I was adding items in the wrong order.

I need to create a div element, add it to the document, and then add the children (text box and submit button).

  //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);

Once this is done, and I use .value , everything will be fine.

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';