www.webdeveloper.com
Results 1 to 9 of 9

Thread: Print button prints, but then takes user to home page

  1. #1
    Join Date
    Feb 2009
    Posts
    2

    Print button prints, but then takes user to home page

    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!

  2. #2
    Join Date
    Nov 2002
    Location
    Baltimore, Maryland
    Posts
    12,279
    Use instead
    Code:
    <button onclick="window.print()">Print Page</button>
    But better would be:
    Code:
    <script type="text/javascript">
    document.write ('<button onclick="window.print()">Print Page</button>')
    </script>
    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.
    “The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”
    —Tim Berners-Lee, W3C Director and inventor of the World Wide Web

  3. #3
    Join Date
    Apr 2006
    Location
    Houston
    Posts
    1,374
    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;"

  4. #4
    Join Date
    Nov 2002
    Location
    Baltimore, Maryland
    Posts
    12,279
    Quote Originally Posted by slaughters View Post
    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;"
    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.
    “The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”
    —Tim Berners-Lee, W3C Director and inventor of the World Wide Web

  5. #5
    Join Date
    Apr 2006
    Location
    Houston
    Posts
    1,374
    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.

    HTML Code:
    <!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>
    If I want it to look beveled I just use some sort of background gradient image to tile across it.

  6. #6
    Join Date
    Nov 2002
    Location
    Baltimore, Maryland
    Posts
    12,279
    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 System Colors.
    “The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”
    —Tim Berners-Lee, W3C Director and inventor of the World Wide Web

  7. #7
    Join Date
    Apr 2006
    Location
    Houston
    Posts
    1,374
    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).
    Last edited by slaughters; 02-18-2009 at 12:13 PM.

  8. #8
    Join Date
    Feb 2009
    Posts
    2

    Appreciate the input

    Thanks for your help. I enjoyed the discussion.

  9. #9
    Join Date
    Aug 2003
    Location
    Sydney, Australia
    Posts
    700
    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()...
    HTML Code:
    function printit()
    {
       if(navigator.appVersion.indexOf("MSIE 7") != -1)
       {
          document.execCommand('print',false,null);
       }
       else
       {
          print();
       }
    }
    CTB

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles