I have a link
click me
when a user click the link "click me", the new link page will be redirected and do something at the server side. The problem, if a user click the back button on the browser, it will go back to the old link. If the user click the link "click me", the new link page will be opened and processing at the server side will do again. How to prevent this situation? That is even a user go back to the old page, the new link cannot be clicked anymore
Generate a unique id on the link, like therequest.do?id=1234, and log 1234 to a database so that the request cannot be run again.
User goes to mypage.do, server generates id 1234 and logs to database as unprocessed.
User clicks link to therequest.do?id=1234
Server does processing, and marks id 1234 as processed.
User clicks back button.
User clicks link again.
Server checks and sees request 1234 is already processed, so generates an error message on the screen: request has already been processed.
You could try creating a new window and that would prevent end user from being able to go back however, you would need to create visited state to make the button disappear in the CSS.
click me
Other then that in pure HTML there is no way to stop a user from hitting the back button on a standard link.
You can do this with Javascript. Here's example code that shows one way to do it:
<html>
<body>
click me
<script>
var first = true;
function f() {
if ( first ) {
first = false;
window.open('http://www.google.com');
}
}
</script>
</body>
</html>
Alternatively, you could get rid of the global state variable and just disable or hide the link once it's clicked.
Related
I am making a project in school where we need to make a small website on a specific topic, now I want that when the browser's back button is clicked. I come to my home page which I have included in the code provided above, Please help me!
i dont know if it is true or not , but i tried a simple code now , so when user opened our first page , current page URL will save in your session or cookie . after that in second page when user clicked back button you should save that page URL in session again . when user clicked back you have 2 URL and you can check : if these 2 URL matches it means user is in same page , but else user clicked back button . and you must check this in all your pages or in pages you want .
if ($_SESSION['link1'] === $_SESSION['link2']) {
$backClicked = false;
}else {
$backClicked = true;
header("location: Your Home Page");
}
There is no way to control the back button in a browser only using HTML and CSS. You will have to use JavaScript.
With JavaScript you could look to use history.pushState() or history.replaceState() to modify the history of the browser. Adding the homepage to the history, so that when the user clicks the back button that is where they will go.
You can read more about the History API here:
https://developer.mozilla.org/en-US/docs/Web/API/History_API#Interfaces
I have a back button that is suppose to lead me users back to a page in the history. But the issue is that when you right click and open in a new tab when the user clicks on the back button it does not work.
To clarify i have a page with products and there are buttons that go to the checkout page. On that check out page there is a back button using history.back(). but after testing opening the buy button on a new tab makes the back button unusable.
I need a way to prevents this please thank you.
I don't think there is a function for that, but I see two possibilities:
document.referrer (like APAD1 suggested in the comment section):
The referrer property returns the URL of the document that loaded the current document, hence if you do document.referrer, you will only get the URL from the page where you clicked the button to load the current page.
If you want to be able to not only go to the previous page but also remember the pages loaded before the previous page, then see next option
window.localStorage and document.referrer
Since document.referrer only remembers the previous document's URL, you can use window.localStorage to store the history. You can create an array as a localStorage item and add new URLs as you go forward and remove Urls as you go back to a previous page inside the new tab
More info:
- document.referrer
- document.referrer
- Window localStorage Property
I want to perform two tasks on click on a single link. For example, clicking on an coupon link should take the user to the merchant's website on a new page and the page where the link was clicked should display the coupon code. This is similar to what happens in Coupondunia etc...
Right now I have a single link, if I click it, it opens a new page, but does not perform the second action that I mentioned earlier, could you please provide me any insights?
I am using ASP.net MVC
TestLink
You have to use JavaScript for this. With straight HTML clicking a link will only perform one action: issuing a GET request to the specified URL. To pop your dialog, you need only add an event handler to the link's click event that will show that dialog. Something along the lines of:
$('#MyLink').on('click', function () {
// show dialog
});
The default action, requesting the URL, will happen regardless, unless you stop it with either evt.preventDefault() or by returning false. As a result, you don't need to add anything special in that regard.
However, bear in mind, that unless the link has a target attribute, it will load in the same browser tab/window, meaning that by the time your dialog displays, the entire page view would have changed to the new URL. As a result, you should ensure that the link opens in a new tab/window, by adding target="_blank" (or a more specific target) to your anchor tag.
#alok...hey brother...are u asking for something like this ...that i mentioned below...let me know...if it is what you are asking for or not...
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>DemoButton</title>
</head>
<body>
<input id ="Demo_Btn" type="button" value="click" onclick="test1(), test2()"/>
<script type="text/javascript">
function test1() {
//define your test1 here...
}
function test2() {
//define your test2 here...
}
</script>
Ok... here is a situation. I've 2 forms
parent.jsp
popup.jsp
When I click on "ADD User" link on parent.jsp, popup.jsp opens in a new window... I enter details of user and hit submit button. User details are stored in database. Everything goes fine till now. But after that it opens parent.jsp in one more tab (which I don't want). It should just return to same tab and refresh the page.
<p>Add User</p>
Above code snippet is from parent.jsp. This works just fine. I'm trying following in my popup.jsp, but its not working. Not sure if this is a correct way to do it.
window.onunload() = function () {
window.opener.location.reload(true);
Here is the flow of events on my web site
Go to [http://example.com]. The web page shows the content from http://example.com/foo even though the browser address bar says http://example.com
The text on the web page asks the user to check out bar. The user clicks on the link and is taken to
[http://example.com/bar]
The text on the web page asks the user to check out baz. The user clicks on the link and is taken to
[http://example.com/baz]
The text on the web page asks the user to check out qux. However, the user clicks on the browser back button and is taken to
[http://example.com/bar]
The text on the web page asks the user to check out baz. However, the user clicks on the browser back button and is taken to ... FAIL! This is where the browser bar should have become [http://example.com] but it doesn't change at all.
The code implementing all this is rather straighforward
var goTo: function(uri) {
get uri via XMLHttpRequest
swap content
history.pushState(null, null, uri);
}
window.addEventListener("popstate", function(event) {
var uri = location.pathname.replace("\/", "");
goTo(uri);
}, false);
Problem solved. See HTML 5 History - window.pushState not working for details, but the short of it is that I can't have history.pushState() inside a popstate event. Once I isolated the two, it is working great.