Get innerHTML value from dynamically generated textbox (in javascript)

Question

I'm using javascript to dynamically generate a dialogue box (it's a div element), containing a textbox and a submit button. I plan on submitting the value in the textbox to another page using AJAX.

THE PROBLEM: I can generate my textbox just fine, but I can't get the value from it. innerHTML comes back blank every time. I'm not sure what I'm doing wrong.

Any help would be great.

Thanks much.

JH

// 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 don't have an innerHTML property. Just read the value property like you would with any other form element.

document.getElementById(unique_textbox_id).value

Answer 2

The input type="text" fields have no innerHTML, they are usually represented as self-closing tags.

Use the value attribute instead:

document.getElementById(unique_textbox_id).value

Answer 3

Thanks very much gents. You got me on the right track. Also, for others in my boat, I want to show the solution. It turns out that I was adding elements in the wrong order.

I have to create the div element, add it to the document, and THEN add the children (textbox 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 the .value, all goes well.

Thanks again.

Answer 4

I have to create the div element, add it to the document, and THEN add the children (textbox and submit button).

No, you don't in general have to do that. What was causing your problem was this:

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

That access to document.getElementById().innerHTML is occurring at the time you create the string, that is during the execution of create_div_dynamic(), not when the button is pressed. At that point, the field has just been created and has no .value. (It also has no .innerHTML, but then it never will as it's an input element.)

Your revised code uses a proper JavaScript function which is called at onclick time, and fixes the property to value, so that's OK. This approach also doesn't die when there are apostrophes or backslashes in the value string.

dv.innerHTML += '<input ...

This serialises all the content in ‘dv’ to HTML text, then adds the string, and parses all the HTML back into DOM objects. This is really inefficient, and in the process you lose all JavaScript properties on the object, including event handlers and listeners.

“innerHTML+=” is always a mistake. Never use it.

txt.setAttribute('id',unique_textbox_id);

Don't use setAttribute(), it doesn't work for certain attributes under IE. Instead use the more readable DOM-HTML properties:

txt.type= 'text';
txt.id= unique_textbox_id;

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