document.getElementById doesn't get newly entered HTML text input value

Question

I use the following code.

The idea is to print the contents of the div with name "PrintThis" which incorporates the text input area "textarea1".

The problem is that getElementById only ever returns the string loaded with the page; "cake" in this case.

If I change "cake" to "pie" by clicking and typing into "textarea1" on the page then printContents still has "cake" not "pie".

<html> 
<head> </head> 
<script type="text/javascript">

function printFunction(divName) {
var printContents = document.getElementById(divName).innerHTML;
//Now call a script to print (not included)
}
</script>
 <body> 
  <div id="printThis" name="printThis">
   <textarea id="textarea1" cols="1" rows="10" style="width:95%!important;" ">cake</textarea>
  </div>

  <input type="button" value="Print Div" onClick="printFunction('printThis')">
</body></html>

In my production version I also use AJAX to post the text area value back to the server, so could in theory use a page refresh, though that doesn't run, I tried using these options.

document.location.reload(true);
window.top.location=window.top.location;

The production version does have jQuery available too.

OK, I will take a look at jQuery option, but bear in mind in the production version, printThis Div will have multiple elements. — Nick T
– Nick T, Commented Aug 28, 2014 at 11:25
I think what you want is the same as: stackoverflow.com/questions/16818395/… — Tobías
– Tobías, Commented Aug 28, 2014 at 12:03

khizerbajwa · Accepted Answer · 2014-08-28 11:04:08Z

1

first of all you are trying to get innerHTML of the div, instead of the actual textarea. secondly instead of trying to get innerHTML try using value.

http://jsfiddle.net/qdymvjz8/

<div id="printThis" name="printThis">
   <textarea id="textarea1" cols="1" rows="10">cake</textarea>
  </div>
<input type="button" value="PrintDiv" onClick="printFunction('textarea1')">

function printFunction(divName) {
var printContents = document.getElementById(divName).value;
}

answered Aug 28, 2014 at 11:04

khizerbajwa

3244 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Nick T Over a year ago

See my comment to user1371641, again sorry if it wasn't clear in the question.

khizerbajwa Over a year ago

Before accessing innerHTML of the div you can first get the value of its children and update their innerHTML before getting value of the div. I have updated the fiddle, do check it out.

function printFunction(divName) {     textArea = document.getElementById("textarea1"); textArea.innerHTML = textArea.value;     var printContents = document.getElementById(divName).innerHTML;     alert(printContents); }

David · Accepted Answer · 2014-08-28 11:46:06Z

0

If you are having multiple items in your div in production then you can iterate through the children of the div and drag out the values.

function printFunction(divName) {
  var printContents = document.getElementById(divName),
    childItemCount = 0,
    stringToPrint = '';

 for (childItemCount; childItemCount < printContents.children.length; childItemCount++) {
    stringToPrint += printContents.children[childItemCount].value;
 }

 console.log(stringToPrint);
 //Now call a script to print (not included)
}

edited Aug 28, 2014 at 11:46

answered Aug 28, 2014 at 11:16

David

1046 bronze badges

2 Comments

Nick T Over a year ago

I am trying to access the whole of the 'printThis' DIV in the production version. The example given in the question is simplified. Sorry if this isn't clear and thank you for your answer.

David Over a year ago

And you can of course use innerHTML for DOM elements that does not reflect anything on the value property (label, span...).

Collectives™ on Stack Overflow

document.getElementById doesn't get newly entered HTML text input value

2 Answers 2

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related