window.history.back() not working. - javascript

I cant get this to work. I have been trying for ages. Please help me.
<script>
function goBack() {
window.history.back()
}
</script>
<button onclick="goBack()">Go Back</button>

Please have a look at this question: Inconsistency with window.history.back().
this
<button type="button" onclick="goBack()">Go Back</button>
could be what you're looking for
As Kevin B suggests
The browser could be interpreting the button as a submit button and
submitting the form, thus causing a page refresh. Adding type="button"
will prevent that.

First of all, you should make sure that your script tag have the proper type set:
<script type="text/javascript">
...
</script>
Also, I would suggest using the "go" function of the history object instead since the compatibility is higher. To simplify things you can simply do this:
<button onclick="javascript:history.go(-1)">Go Back</button>
Hope this helps.

This can stop it appearing to work
<a href="#" onclick=DoSomething()>Stop it working</a>
That's because the href will effectively add a new page in the history, the present page again
Incidently if you call
event.preventDefault()
in DoSomething then # will never get added to the history and it will appear to work again

This worked for me
<button type="reset" onclick="goBack()">Go Back</button>

The window.history.back() method does not work if it does not have any previous URL to go to. Your program needs to have a start URL and you will need to have your program moving forward to the next page to be able to go back and forward.

Try preventing the default action of the button. Note that nothing will happen if you have accessed no other pages in the current tab.
Javascript:
<button id="goBack">Go Back</button>
<span id="result"></span>
<script>
document.getElementById("goBack").addEventListener("click", function(event){
event.preventDefault();
document.getElementById("result").innerHTML = "Going back";
window.history.back();
});
</script>
jQuery:
<button id="goBack">Go Back</button>
<span id="result"></span>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$('#goBack').click(function(event){
event.preventDefault();
document.getElementById("result").innerHTML = "Going back";
window.history.back();
});
</script>

Go Back
The 'return false;' bit helped fix it for me

Actually for working of this you need to redirect to this website from any other website or if you are doing on local html file then you can just open any website and paste the link of your local file in search bar in that tab(don't open a new tab) and then it will work. Basically this fuction just press the back button of your browser so you need to have something so that it can go back.

Related

Button onclick event does not redirect to another page although it calls the functions

The following code does not redirect to the given webpage
<form>
<button onclick='window.location.replace("../magnet/index.php")'>Replace document</button>
</form>
It is so because when you create a button within the form tags, it is created as a submit button by default. So, instead of redirecting the webpage, it submits the data and reloads the current webpage.
The following code will do the required job because now, the type of the button is button and not submit.
<button type="button" onclick='window.location.replace("../magnet/index.php")'>Replace document</button>
Even better, you can place your redirect code into a JavaScript function. Then you can call that function from within your HTML code. Like this
<script type="text/javascript">
<!--
function redirectTo(sUrl) {
window.location = sUrl
}
//-->
</script>
<button onclick="redirectTo('../magnet/index.php')">Get HTML!</button>
Hope this will work for you. Cheers
The answer was to add type="button" like #shivamag00 explained.
But be careful with replace(), it's not possible to use "back" to navigate back to the original document since you are replacing the history state.
An alternative is to use the assign() function, (documentation here)
Suppose you have a base url as
www.website.come
and want to go to
www.website.come/new-page
it's simple
<button type="button" onclick='window.location.assign("new-page")'>Go to new page</button>
It's worked for me, hope it's useful for someone else.

Change url onclick without javascript or jquery

How can I change url location in same window onlick without script for this button:
<button type="submit" name="select" value="true" onclick="window.open('/newurl')" class="btn btn-default2 btn-block"><i class="fa fa-car"></i>Search</button>
Now it goes back 1, but instead I want it to go to some url.
EDIT: how can I do it with javascript instead?
HTML
changing the script
'onclick="location=\'somewhereelse.html\'; return false ', 'cancel');
using a link
Cancel
Best solution if you need to submit the form: redirect from server using a redirect header
Please try to use window.open in your button text.
'onclick="window.open(\'<url>\')"'
Try this :
<button type="button" onclick="window.location.href='your_link_here.html'">Click me</button>
window.location.href returns the href (URL) of the current page (_self).

Redirecting to site from an existing button being clicked

I'm quite new to coding. I have a button with the ID='test'. I want to run a line of code in javascript or HTML to redirect users to a site when that button is clicked.
Button:
<button id="test" type="submit" onclick="setNick(document.getElementById('nick').value); return false; return false" class="btn btn-play-guest btn-success btn-needs-server primaryButton" data-itr="play_as_guest">
I tried running this:
<script>
document.getElementById("test").onclick = window.location='http://www.google.com/'
</script>
However, this would redirect straight away. I want it to redirect only when the button is clicked. Please help me fix this.
Many thanks.
You are assigning the redirect to the button where you need to assign it to a function.
You can try something like this:
document.getElementById("test").onclick = function(){
window.location='http://www.google.com/';
}
I would suggest use onclick on button, for example
your button will look like this
<button id="test" onclick="redirect()">Redirect</button>
Now in the script write the redirect function as
<script>
function redirect() {
window.location.href = "http://www.google.com/";
}
</script>

Return to the previous page with inputs

Really unsure about the title question. Feel free to suggest. :)
Hi guys! I created a very simple code, that would represent my web.
Here is my home page:
<html>
<script type="text/javascript">
function getPage(linkPage,variables,divName){
$.get(linkPage + "?" + variables,function(data){$(divName).html(data);});
}
function show(){
//functionName("path","data","idName");
getPage("AjaxPages/hi.php","","#container");
}
</script>
<body>
<div id="container">
First Name<input type="text" />
<input type="button" value="next" onClick="show();"/>
</div>
</body>
</html>
Basically, it ask for information, Name for example. When the button NEXT is click it will call a javascript function that will call a certain page or the NEXT PAGE that will load on the div with the Id Container.
NEXT PAGE
On the next page, it will then ask another question, like Last Name for example. But then, I want to go back to the previous page to make same changes.
HERE is the code:
<script type="text/javascript">
function show(){
ajaxgetdata("index.php","","#container1");
}
</script>
<div id="container">
Last Name<input type="text" />
what to make changes on the previous page?<input type="button" value="back" onClick="show();"/>
</div>
When button back is clicked, it will just call the previous page, but will not include the text that you input on the textbox.
I know that it happens because it just call the page..
Is there a way? that when back button is clicked, it will reload the previous page, with all the contents/inputs.
:) :( :'( :/ :|
Don't load any additional pages. Do everything with AJAX.
If you don't want, some server-side script may help :D
If you can use HTML5 in your site, you can take a look at the History API which can handle navigation and fires a "popstate" event, to which you can pass data.
There's a good example here:
http://diveintohtml5.info/history.html
You could do something like this:
window.addEventListener("popstate", function(e) {
if(!e.state || !e.state.firstName) {
return;
}
document.getElementById('firstName').value = e.state.firstName;
});
That even will trigger everytime you go back or forward, and you could just organize some function or array with the information you need.
Hope it helps.

get back to previous page

just i want to make back button in my site. once i click the button it need to take the url in to previous page. how can i make this using jquery?
<button type="button" onclick="history.back();">Back</button>
the answer by wRAR is correct, you can use history.back or history.go(-1). However, if you are using ajax, you might need a bit more than that.
Stephen Walter has a nice article on how to use jQuery, ASP.NET, and Browser History which basically describes how to save and restore the application state yourself. I recommend you give a read.
Elijah Manor(co-host of the Official jQuery Podcast) has also written a nice article about this topic.
I hope this helps
-D
Try this: am using materialise css.
<button id="back_btn" class="btn waves-effect waves-light" name="action">Back<i class="material-icons left">chevron_left</i>
</button>
In your jquery script file add
$("#back_btn").click(function (){
window.history.back();
});
within the document ready function.
For JQM, this works!
$(document).ready(function(){
$('.backLink').click(function(){
parent.history.back();
return false;
});
});
This is what I have successfully used in one of my recent projects:
<script>
function goBack() {
window.history.back();
}
</script>
<a href="#" onclick="goBack()" class="btn-event-show-video">
Return to Stand
</a>
I think button onclick="history.back();" is one way to solve the problem.But it might not work in the following cases:
If the page gets refreshed or reloaded.
If the user opens the link in a new page.
To overcome these, the following code could be used if you know which page you have to return to.
E.g. If you have a no of links on one page and the back button is to be used to return to that page.
<input type="button" onclick="document.location.href='filename';" value="Back" name="button" class="btn">

Categories