printing text

tpeck · 07-14-2010, 03:57 AM

I have a routine that prints a textarea:

Code:

function printInput(f){
  var ifr = window.frames['printFrame'];
  if (ifr){ //print the content of the invisible iframe
     ifr.document.getElementById('content').innerHTML=f.WRKNOTEPAD.value.replace(/\n/g,'<br />');
     ifr.focus();
     ifr.print();
  }
  else { //print by opening a new window and then closing it
     var html='<html><head><style type="text/css">div{font:normal 14px Verdana}</style></head><body onload="window.print();window.close()"><div>'+f.WRKNOTEPAD.value.replace(/\n/g,'<br />');+'</div></body></html>'
     var win = window.open('','_blank','menubar,scrollbars,resizable');
     win.document.open();
     win.document.write(html);
     win.document.close();
  }
}

function writeContent(objIframe){
  var html='<html><head><style type="text/css">div{font:normal 14px Verdana}</style></head><body><div id="content"></div></body></html>'
  objIframe.document.write(html);
  objIframe.document.close();
}

This works nicely when the button is of input type:

Code:

<form name="FORMNOTES"><textarea name=WRKNOTEPAD cols=140 rows=20 wrap=yes style=\"font-family: Arial; font-size: 10pt\"></textarea><div>
<br>
<input type="button" value="Print notepad" onClick="printInput(this.form)">
</div>
<iframe name="I1" id="printFrame" src="javascript:parent.writeContent(this)" width="1" height="1"></iframe></form>

But when I try to make the input button an img button it errors:

Code:

<img border="0" src="/images/printnotes.gif" onClick="printInput(this.form)">

The error is "WRKNOTEPAD is null or not an object".

Is there any way to overcome this and use an image to achieve the same thing? I'm thinking that the image is not an element(?) - is that the reason?

Thanks for any light on this.

Old Pedant · 07-14-2010, 06:24 AM

Ummm...that is *NOT* how you specify an image button!

That is simply an ordinary <img> object and it has NO CONNECTION AT ALL to the <form>!!! That is "this.form" is null for it!

Try this:

Code:

<img border="0" src="/images/printnotes.gif" onClick="printInput(document.FORMNOTES)" />

Or you really *can* use an image button thus:

Code:

<input type="image" style="border: none;" src="/images/printnotes.giv"
       onclick="printInput(this.form);return false;" />

Don't forget the return false, or the image button will automatically submit the <form>.

tpeck · 07-14-2010, 08:56 AM

I see now. Thanks. I wish I could have worked it out myself. Now I have to commit the logic to memory!