12

What is the best method (cross browser) to utilize an input type button, as a browser back button?

Lourens
  • 268
  • 3
  • 12
tony noriega
  • 7,523
  • 17
  • 53
  • 72
  • Possible duplicate of [How to create an HTML button that acts like a link?](https://stackoverflow.com/questions/2906582/how-to-create-an-html-button-that-acts-like-a-link) – Andrew Grimm Jan 18 '19 at 07:12

4 Answers4

26

Are you looking to do something like this?

<input type="button" onclick="history.back();" value="Back">

You could also use

<input type="button" onclick="history.go(-1);" value="Back">
Mech
  • 2,904
  • 3
  • 24
  • 29
9

"Best" is a little subjective.

@Mech Software has an acceptable solution, as it's a simple function call. If you're only making one back button, it's probably the way to go. However, I try to place code where it belongs:

HTML belongs in .html, CSS belongs in .css, and JavaScript belongs in .js files. Instead of giving the button an onclick attribute, I'd give it a class of back-button and attach the click listener to each .back-button element.

HTML: 
<input type="button" class="back-button" value="Back" />
<!-- or -->
<button type="button" class="back-button">Back</button>
JS: 
jQuery(function($){
  $('.back-button').click(function(e){
    history.back();
  });
});

I'm assuming the jQuery library, as it's relatively ubiquitous (let me know if you want the non-jQuery version of this).

The reason I'd suggest this approach is that it's expandable. If you decide to do something more with your back buttons, or if browsers change (which happens all the time) it's simple to change the functionality in exactly one location, rather than having to hunt down every instance of onclick="history.back()".

zzzzBov
  • 174,988
  • 54
  • 320
  • 367
2
<input type="button" onclick="history.back();" value="Back">

The reason I'd suggest this approach is that it's expandable. If you decide to do something more with your back buttons, or if browsers change (which happens all the time) it's simple to change the functionality in exactly one location, rather than having to hunt down every instance of onclick="history.back()".

Robert
  • 5,278
  • 43
  • 65
  • 115
asdf
  • 21
  • 1
0

Try This it works really well and looks neat too.

  <center>
<script>
function goBack()
  {
  window.history.back()
  }
</script>
Wrong Link? <input type="button" value="Go Back" onclick="goBack()"/>
</center>

If you dont want it to say Wrong Link then us this

<center>
<script>
function goBack()
  {
  window.history.back()
  }
</script>
<input type="button" value="Go Back" onclick="goBack()"/>

And you can edit what the button says by changing the "Go Back" next to value= in the last line.

slacker
  • 1
  • 1