printing a form

[Greg Brewer]

I have a form.
The form has input fields.
The user enters information onto the form presses submit, the information
goes to a database.
All is good.

Now, I want to change the form so that the user can print it.
When printing, the input fields are hidden using css and media='print'.
I'm trying to display the value of the input field so that it is invisible
when media != 'print' as follows
<input class='displayonly' type='text' id='f_agent' name='f_agent'
maxlength='35' />
<span class='pageonly'>
<script language='javascript'>Jot("f_agent");</script>
</span>
where
function Jot(what)
{
document.write(document.getElementById(what).value);
}
and the pageonly/displayonly class have been appropriately defined.

My hope was the entering a value in the input then using print|preview would
result in showing the value just entered would result in the value showing
in the field without the box associate with the input field. But, it
doesn't work.

Any ideas?

Thanks.
Greg

 

[Martin Honnen]

I have a form.
The form has input fields.
The user enters information onto the form presses submit, the information
goes to a database.
All is good.

Now, I want to change the form so that the user can print it.
When printing, the input fields are hidden using css and media='print'.
I'm trying to display the value of the input field so that it is invisible
when media != 'print' as follows
<input class='displayonly' type='text' id='f_agent' name='f_agent'
maxlength='35' />
<span class='pageonly'>
<script language='javascript'>Jot("f_agent");</script>
</span>
where
function Jot(what)
{
document.write(document.getElementById(what).value);
}
and the pageonly/displayonly class have been appropriately defined.

My hope was the entering a value in the input then using print|preview would
result in showing the value just entered would result in the value showing
in the field without the box associate with the input field. But, it
doesn't work.

If you don't want input boxes to have borders in the printout consider
to use
@media print {
input, textarea {
border: 0;
}
}

 

[Greg Brewer]

Ok, I tried that and it didn't work but now it does. Thanks :-D

Here's a related problem then.
<input class='displayonly' type='input' id='f_sel0' name='f_sel0'
maxlength='35' />
<span class='pageonly'>
<script language='javascript'>ShowCheck("f_sel0");</script>
</span>

function ShowCheck(what)
{
if (document.getElementById(what).checked) // not 100% about syntax
document.write("<img src='bigredcheck'>");
}

Now, the little check will do but I can't find a way to get rid of the
little box.

Greg

 

[Thomas 'PointedEars' Lahn]

Ok, I tried that and it didn't work but now it does. Thanks :-D

Here's a related problem then.
<input class='displayonly' type='input' id='f_sel0' name='f_sel0'
maxlength='35' />

Are you really using Valid XHTML? If yes, consider to write Valid HTML 4.01
instead. If no, remove the " /", HTML SHORTTAG differs from XHTML SHORTTAG.

<span class='pageonly'>
<script language='javascript'>ShowCheck("f_sel0");</script>

</span>

What about users without support for client-side scripting?

function ShowCheck(what)
{
if (document.getElementById(what).checked) // not 100% about syntax

Make the "input" element a child element of a "form" element. Then you
can use

if (document.forms[...].elements[what].checked)

which is downwards compatible to DOM Level 0 (IE3+, NN3+).

document.write("<img src='bigredcheck'>");

The "img" element misses the required "alt" attribute.

}

Now, the little check will do but I can't find a way to get rid of the
little box.

What box are you talking about?

[Top post]

Please do not do that, see the FAQ.


PointedEars