Forum Moderators: open
Both my back and next buttons are images. I had found some javascript code as shown below, but it's not working like I want.
<form id="form" name="form" method="post" action="example.php">
<input type="image" src="../images/btn_back.png" onClick="history.go(-1);return true;">
<input type="image" src="../images/btn_next.png">
</form>
I don't know how to write code, so I'm looking for something that will take you back to the previously viewed page.
Thanks!
<form id="form" name="form" method="post" action="example.php">
<input type="image" src="../images/btn_back.png" onClick="history.go(-1);return false;">
<input type="image" src="../images/btn_next.png">
</form>
As I understand it the <input type="image" .. > is acting as a submit button (ie it processes your form), but return false overrides that.
PS: It's JavaScript not Java - I'm not saying that because I'm a narrow minded geek (well it's not only that anyway :)), they are two very separate things and it will help you find useful resources if you get it right.
PPS: Oh and Welcome to WebmasterWorld charger9!
<form id="form" name="form" method="post" action="example.php">
<script type="text/javascript">
document.write('<input type="image" src="../images/btn_back.png" onClick="history.go(-1);return false;">');
</script>
<input type="image" src="../images/btn_next.png">
</form>
This uses Javascript to write the back button, so if you don't have javascript enabled you don't see the button. If you wanted to create a back button that didn't require JS you could use PHP on any other server side scripting language to access the referrer header - I wouldn't sweat it too much though, anyone who disables javascript is going to be used to dealing with small irritants such as mousing all the way up to their browser's back button :)
I would do something however, since the code I posted before will degrade very badly for users without javascript enabled (back button will act exactly like the next button).
There was a fad a few years ago for "Internet Security" software which blocked this information. My personal opinion towards people who are still running that sort of thing is sod 'em, but you might want to consider that depending on your users.
<script type="text/javascript">
document.write('<input type="image" src="../images/btn_back.png" onClick="history.go(-1);return false;">');
</script>
and put that in the <head>, what do I need to put in the <body> so I can place the button where I want it and call the javascript if the user has it enabled?
If you are concerned that you might want to change the code you use for the back button at a later point you could create a procedure/function to do so (you'd want to put it in an external .js file if so rather than in the head's of individual pages, unless you were positive you would only call it from a single page).
But as I see it you are calling document.write about as simply as you can, I'm not sure if the benefits of abstracting it further would outweigh those of the simplicity of doing it inline.
That said I've spent several years working mainly with oscommerce. When you do that you have to essentially give up any pretensions to writing nice looking html at the door, so I may have gone too far in that direction.
<!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:utf-8">
<title></title>
</head>
<body>
<form action="#">
<div id="preButton">This is before the button.</div>
<div id="postButton">This is after the button.</div>
</form>
<script type="text/javascript" src="http://yui.yahooapis.com/2.4.1/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript">
YAHOO.util.Event.on(window, 'load', function() {
// Create an input button
var inputImg = document.createElement('input');
inputImg.type = 'image';
inputImg.src = '../images/btn_back.png';
// Attach onclick to 'go back'
YAHOO.util.Event.on(inputImg, 'click', function(e) {
YAHOO.util.Event.stopEvent(e);
history.go(-1);
});
// Insert into the document
var postButton = document.getElementById('postButton');
postButton.parentNode.insertBefore(inputImg, postButton);
});
</script>
</body>
</html>
Here's the same example, without the YAHOO stuff (note, window.onload can be overwritten, so make sure you don't have any other scripts that will overwrite it, or find one of the many 'addEventListener' scripts available like the Yahoo one I used above):
<!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:utf-8">
<title></title>
</head>
<body>
<form action="#">
<div id="preButton">This is before the button.</div>
<div id="postButton">This is after the button.</div>
</form>
<script type="text/javascript">
window.onload = function() {
// Create an input button
var inputImg = document.createElement('input');
inputImg.type = 'image';
inputImg.src = '../images/btn_back.png';
// Attach onclick to 'go back'
inputImg.onclick = function(e) {
if (!e) var e = window.event;
e.cancelBubble = true;
if (e.stopPropagation) e.stopPropagation();
e.returnValue = false;
if (e.preventDefault) e.preventDefault();
history.go(-1);
};
// Insert into the document
var postButton = document.getElementById('postButton');
postButton.parentNode.insertBefore(inputImg, postButton);
};
</script>
</body>
</html>
Also note that it's better to place your JavaScript just before the closing </body> tag instead of in the <head> of your document, because the loading of JavaScript will delay the display of content after it.
