I am trying to print the full content of a text area not just the 1 row specified on the input form. I am trying to do so by moving the textarea to a DIV which is hidden on the input but displayed when printing. See my sample code. Any ideas why it doesn't work? Any suggestions on how to accomplish the end result using a better method?
<HTML>
<HEAD>
<STYLE type="text/css" media="print">
DIV.div1 {
DISPLAY: none }
DIV.div2 {
FONT-FAMILY: Arial, Verdana, sans-serif;
FONT-SIZE: 11px;
FONT-WEIGHT: bold;
BORDER: none;
WIDTH: 100% }
</STYLE>
<STYLE type="text/css">
TEXTAREA.textareastyle {
WIDTH: 100%;
FONT-FAMILY: Arial, Verdana, sans-serif;
FONT-SIZE: 11px;
FONT-WEIGHT: bold;
BORDER: none;
COLOR: #0066CC }
DIV.div1 {
FONT-FAMILY: Arial, Verdana, sans-serif;
FONT-SIZE: 11px;
FONT-WEIGHT: bold;
BORDER: none;
WIDTH: 100% }
DIV.div2 {
display: none }
</STYLE>
<SCRIPT LANGUAGE="javascript">
<!--
function reformat_text() {
var old_reason = document.getElementById("reason"
;
form1.reason_full = old_reason; }
//-->
</SCRIPT>
</HEAD>
<BODY>
<FORM method="post" action="" name="form1" ID="form1">
<TABLE>
<TR>
<TD>Reason for Request<BR>
<DIV class="div1">
<TEXTAREA class="textareastyle" name="reason" id="reason" cols="100%" rows="1"></TEXTAREA>
</DIV>
<DIV class="div2" id="reason_full" name="reason_full"><P> </P></DIV>
</TD>
</TR>
</TABLE>
<TABLE>
<TR>
<TD align="center"> <BR><BR>
<INPUT onClick="reformat_text(this.form); window.print()" type="button" value="Print">
</TD>
</TR>
</TABLE>
</FORM>
</BODY>
</HTML>
<HTML>
<HEAD>
<STYLE type="text/css" media="print">
DIV.div1 {
DISPLAY: none }
DIV.div2 {
FONT-FAMILY: Arial, Verdana, sans-serif;
FONT-SIZE: 11px;
FONT-WEIGHT: bold;
BORDER: none;
WIDTH: 100% }
</STYLE>
<STYLE type="text/css">
TEXTAREA.textareastyle {
WIDTH: 100%;
FONT-FAMILY: Arial, Verdana, sans-serif;
FONT-SIZE: 11px;
FONT-WEIGHT: bold;
BORDER: none;
COLOR: #0066CC }
DIV.div1 {
FONT-FAMILY: Arial, Verdana, sans-serif;
FONT-SIZE: 11px;
FONT-WEIGHT: bold;
BORDER: none;
WIDTH: 100% }
DIV.div2 {
display: none }
</STYLE>
<SCRIPT LANGUAGE="javascript">
<!--
function reformat_text() {
var old_reason = document.getElementById("reason"
;form1.reason_full = old_reason; }
//-->
</SCRIPT>
</HEAD>
<BODY>
<FORM method="post" action="" name="form1" ID="form1">
<TABLE>
<TR>
<TD>Reason for Request<BR>
<DIV class="div1">
<TEXTAREA class="textareastyle" name="reason" id="reason" cols="100%" rows="1"></TEXTAREA>
</DIV>
<DIV class="div2" id="reason_full" name="reason_full"><P> </P></DIV>
</TD>
</TR>
</TABLE>
<TABLE>
<TR>
<TD align="center"> <BR><BR>
<INPUT onClick="reformat_text(this.form); window.print()" type="button" value="Print">
</TD>
</TR>
</TABLE>
</FORM>
</BODY>
</HTML>
