Print button prints, but then takes user to home page

@geekmomFeb 17.2009

I want this button
<FORM METHOD=”LINK” onclick=”window.print()”>
<INPUT TYPE=”submit” VALUE=”Print Page”>
</FORM>
to do what it did as a link
<a href=”#” onclick=”window.print ()”>Print version of this page.<a>

It almost does. It opens the print window and produces a printable version of the page. But after closing the print box, the page jumps back to the home page. Why??? After closing the print box, the user should stay on the same page!

The link does exactly what I want. I just can’t figure out how to get it into a button form.

Thanks!

to post a comment

HTML

8 Comments(s) _↴

@CharlesFeb 17.2009 — #Use instead <button onclick="window.print()">Print Page</button>But better would be:

&lt;script type="text/javascript"&gt;
 document.write ('&lt;button onclick="window.print()"&gt;Print Page&lt;/button&gt;')
 &lt;/script&gt;

There is no point embarrassing yourself with a button that doesn't do anything. That way it will only show when it is of some use.

@slaughtersFeb 17.2009 — #Just because you have onclick execute a function, does not prevent the default action of a button click, (ie submitting a form) also from occurring. They both get executed.

So, make sure to place "return false" as the last item in the onclick assignement to stop any other action from occurring after it.

onclick="window.print(); return false;"

@CharlesFeb 18.2009 — #Just because you have onclick execute a function, does not prevent the default action of a button click, (ie submitting a form) also from occurring. They both get executed.

So, make sure to place "return false" as the last item in the onclick assignement to stop any other action from occurring after it.

onclick="window.print(); return false;"[/QUOTE]No, that applies to the "onsubmit" handler. But since the enquirer has no business using the FORM element here we can eliminate the problem more simply. And save him or her from some ill side effects of JavaScript.

@slaughtersFeb 18.2009 — #I agree that there is probably no reason for the form in the first place. But - I thought that if a button is inside a form then it's default action is to submit.

P.S.

What I have been doing recently is to just use CSS to format the anchor tag to look like a button anyway.

[code=html]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 <title>Untitled Document</title>
 
 <style>
 .fakeButton {
 background:#DEE5EF none repeat scroll 0 0;
 border-color:#C3CFDF #A7B1BF #A7B1BF #C3CFDF;
 border-style:solid;
 border-width:1px;
 color:#5780AE;
 font-family:Arial,Helvetica,sans-serif;
 font-size:10px;
 height:16px;
 line-height:16px;
 margin:3px;
 padding:3px;
 position:absolute;
 text-decoration:none;
 vertical-align:middle;
 }
 
 .fakeButton:hover {
 background:#DEE5EF none repeat scroll 0 0;
 border-color:#A7B1BF #C3CFDF #C3CFDF #A7B1BF;
 border-style:solid;
 border-width:1px;
 color:#5780AE;
 font-family:Arial,Helvetica,sans-serif;
 font-size:10px;
 height:16px;
 line-height:16px;
 margin:4px 2px 2px 4px;
 padding:3px;
 position:absolute;
 text-decoration:none;
 vertical-align:middle;
 }
 </style>
 
 </head>
 
 <body>
 <a class="fakeButton" href="#" onclick="window.print(); return false;">Print version of this page.</a> 
 </body>
 </html>[/code]

If I want it to look beveled I just use some sort of background gradient image to tile across it.

@CharlesFeb 18.2009 — #Except that the button will only look like all the other buttons for users who have their color schemes set they way you have yours. If you want to go that way then use the CSS [url=http://www.w3.org/TR/CSS2/ui.html#system-colors]System Colors[/url].

@slaughtersFeb 18.2009 — #Sorry to the original poster for diverging so much - but

Charles, you are correct. I actually hate the inconsistant layout and appearence of the button tag. From browser to browser, os to os, buttons look different. Not just in colors, but in shape and form as well.

I avoid their use where I can and use css formated divs or anchor tags so I can control the constancy of the look and feel. With a small gradient background you can make it look as styled as you want: http://www.stansight.com/cssButton/cssButton.html

I'm really starting to question the use of the button tag (submit too) altogether (except in forms on the rare occasion where you have to worry about users disabling JavaScript).

@geekmomauthorFeb 19.2009 — #Thanks for your help. I enjoyed the discussion.

@chestertbFeb 19.2009 — #Just as an aside, and a little off topic..

To work around IE7s awful print scaling (which scales the printed page to some pre-defined formula, and which can't be switched off), you might consider using this instead of javascript's standard print()...

[code=html]function printit()
 {
 if(navigator.appVersion.indexOf("MSIE 7") != -1)
 {
 document.execCommand('print',false,null);
 }
 else
 {
 print();
 }
 }[/code]

CTB

Also in #HTML _↴

Page Settings Stacking pages together then fade in/out Webpage Passwords

Success!

Help @geekmom spread the word by sharing this article on Twitter...

Tweet This

Print button prints, but then takes user to home page

8 Comments(s) ↴

Also in #HTML ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

8 Comments(s) _↴

Also in #HTML _↴