So the SMEs at my current place of employment want to try and disable the back button for certain pages. We have a page where the user makes some selections and submits them to be processed. In some instances they have to enter a comment on another page.
What the users have figured out is that they don't have to enter a comment if they submit the information and go to the page with the comment and then hit the back button to return to the previous page.
I know there are several different solutions to this (and many of them are far more elegant then disabling the back button), but this is what I'm left with. Is it possible to prevent someone from going back to the previous page through altering the behavior of the back button. (like a submit -> return false sorta thing).
Due to double posting information I can't have it return to the previous page and then move to the current one. I can only have it not direct away from the current page. I Googled it, but I only saw posts saying that it will always return to the previous page. I was hoping that someone has some mad kung foo js skills that can make this possible.
I understand that everyone says this is a bad idea, and I agree, but sometimes you just have to do what you're told.
Don't do this, just don't. It's bad interface design and forces the user's browser to behave in a way that they don't expect.
I would regard any script that successfully stopped my back button from working to be a hack, and I would expect the IE team to release a security-fix for it.
The back button is part of their program interface, not your website.
In your specific case I think the best bet is to add an unload event to the page that warns the user if they haven't completed the form. The back button would be unaffected and the user would be warned of their action.
Nah, you're doomed. Even if you pop the page up in some different browser and hid the back button, there's always the Backspace key.
The problem with marketing guys and analyst types is that some of them do not understand the fundamental concept of the web being stateless. They do not understand that the page is totally, totally unaware of the browser using it and absolute control of the browser is totally outside the capability of web pages.
The best way to discourage your users to hit the back button is to make sure that your page loses all its data when they press back, e.g., the comment page is the only point where the data can be saved, and if they do press the back button they have to do everything all over again (think along the lines of pragma: nocache).
Users will complain, sure, but they are the reason that this godforsaken requirement exists, right?
I've seen this before:
window.onBack = history.forward();
It is most definitely a dirty hack and, if at all possible, I would attempt to not disable the back button. And the user can probably still get around it quite easily. And depending on caching, there is no telling if the server code will be processed or if the cached page with JavaScript will run first.
So, yeah, use at your own risk :)
I came up with a little hack that disables the back button using JavaScript. I checked it on chrome 10, firefox 3.6 and IE9:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<title>Untitled Page</title>
<script type = "text/javascript" >
function changeHashOnLoad() {
window.location.href += "#";
setTimeout("changeHashAgain()", "50");
}
function changeHashAgain() {
window.location.href += "1";
}
// If you want to skip the auto-positioning at the top of browser window,you can add the below code:
window.location.hash=' ';
var storedHash = window.location.hash;
window.setInterval(function () {
if (window.location.hash != storedHash) {
window.location.hash = storedHash;
}
}, 50);
</script>
</head>
<body onload="changeHashOnLoad(); ">
Try to hit the back button!
</body>
</html>
Do you have access to the server-side source code? If so, you can put a check on the first page that redirects to the second page if the information has been submitted already (you'll need to use sessions for this, obviously). At a former job, this is how we handled multi-step applications (application as in application for acceptance).
Could you move the comment to the previous page and make it a required field there?
Disabling the back button will not work.
Because of the security isolation of javascript in the browser, you cannot change what the back button does.
Perhaps you could store something in the user's session that indicates that a comment is needed, and have any page in the app that the user tries to load redirect to the comment page?
What if the user closes their browser when he/she gets tot he comment page?
I know that you have not been given a choice here, but since what they are asking for seems to be impossible...
Perhaps you could just not consider the item as completed until the user enters comments. Thus, you would need to keep track of both in-progress items and completed items, and make that distinction in the UI, but this might be the most robust method.
Or just put the comment field on the form page?
What the users have figured out is
that they don't have to enter a
comment if they submit the information
and go to the page with the comment
and then hit the back button to return
to the previous page.
Then they are probably also smart enough to type 'no comment' into the comments field.
You can try to force people to add comments, but you will probably just end up with bad unusable software, annoyed users, and still not get comments. This is usually a good time to take a step back and reconsider what you are doing from the users' point of view.
Disabling the back button seems kind of a "brute force" approach.
Another option would be that you could jump out to a modal dialog that doesn't have command buttons, walk users through the workflow, and close the dialog when the process is complete.
You should secure your application against double submission instead of breaking user interface to hide the bug.
There simply is no reliable way to do this. You cannot guarantee that 100% of the time you can stop the user from doing this.
With that in mind, is it worth going to extremely exotic solutions to disable "most" of the time? That's for you to decide.
Good luck.
AS a simple solution: try this one. Insert an update panel and a button in there and use javascript to hide it and then press it on page load. Yes I understand that it will cause your page to post back on load and may not work if javascript is disabled but certainly will help you achieve a half decent response to the back button issue. Andy
You can prevent them from going back to the previous page. location.replace() replaces the current page's history entry with a new page, so...
page1.html: user clicks a link that goes to page2.html
page2.html: user clicks a link that calls location.replace('page3.html');
page3.html: user clicks back button and goes to page1.html
This may not fit well with doing a POST, but you could post the data to a web service via AJAX, then call location.replace()
If you are starting a new web app from scratch, or you have enough time to rework your app, you can use JavaScript and AJAX to avoid the browser's history, back, and forward functions.
Open your app in a new window, either before or immediately after login.
If you wish, use window options to hide the nav bar (with the back and forward buttons).
Use AJAX for all server requests, without ever changing the window's location URL.
Use a simple web API to get data and perform actions, and render the app using JavaScript.
There will be only one URL in the window's history.
The back and forward buttons will do nothing.
The window can be closed automatically on logging out.
No information is leaked to the browser history, which can help with security.
This technique answers the question, but it also contradicts best practice in several ways:
The back and forward buttons should behave as expected.
An app should not open new browser windows.
An app should still function without JavaScript.
Please carefully consider your requirements and your users before using this technique.
I don't see this solution :
function removeBack(){
window.location.hash="nbb";
window.location.hash="";
window.onhashchange=function(){window.location.hash="";}
}
I run a website which includes several radio streams. I have set up icecast to request .htaccess account in order to authenticate and start streaming. There is the same account for all streams. I submit the form (it is hidden via css) with jquery once the page loads so the user does not have to know the account nor submit the form.
The problem is that form information are being revealed if user views source. Is there any way to hide these information? Searching the internet what most people say is that this is not possible because browser needs to be able to clearly read these information in order to function properly. Anyone know any way, if it is possible?
I ended up creating the form (document.createElement) on page load with jquery, submitting it (.trigger("click")) and then removing it (.remove()). In addition I obfuscated the jquery code with the tool found here Crazy Obfuscation as #André suggested. That way user cannot see the htaccess username and password in Page Source nor find it using "inspect element" or firebug.
Personally, I need a bit more information to clearly deduct a solution for your issue, I hope you can give me that.
However, have you tried simply .remove()ing the form after submission? That way it gets submitted on page load and then gets removed so by the time the page loads and the user clicks view source, he will not be able to see it. He can, of course, disable JS for example, or any other workaround, but this is a very quick fix with the amount of information we have.
You can not directly hide values in 'view source'. Similarly when the form is being submitted, using tools like 'fiddler' the user could view the values. If you want to really hide them what you can do is never have those values show in the form. You could try techniques like encrypting those values on server or something if it never needs to be displayed to the user in the web page.
i have a website that uses a number of containers (div's). In this scenario, we have three boxes down the left side and one bigger box on the right of these boxes. The bigger box on the right is the only thing that changes when a link is pressed, this is done with Javascript.
SO i have the index which is the main layout of the website and i also have the "pages" of the site, so when a link is pressed the main box (on the right) loads the new data.
On one of my pages i want to collect data and then run it through a PHP script that is in the head of the file, but when i click the button i realise it refreshes the whole page and it doesn't run the script on the page with the form.
Anyone had a problem like this, or know of something i could do to work around it?
I'm not really sure what code would be useful for helping me but if you need something just ask.
Thanks for the help
Since you are loading all your content via JS already, you could just POST the form data via AJAX to a PHP script to process, then read the output and either provide an error message or remove the form from the page and show your success message.
How to approach your AJAX call is dependant on what you've used as a basis for the rest of your JS.
Personally I like to use the JQuery library, as it makes AJAX calls (and much more) very simple.
How about you make the page design able to do it. Have the backend be able to spit out the state of the page when it posted.
Or use Ajax to post the data back and set the new state like you do already.
What I have is a search form that submits to the same page and it fetches the results using an AJAX request.
This uses the POST method and I am trying to figure out a way to try and do something along the lines of having a button to open this page in a new window to preserve the search parameters and results and to allow it to be bookmarkable somehow but I can't really think how to do this.
The other main reason for doing this is because the search results contain links to if a user clicks one and then clicks back all the form parameters are lost, I have worked around this by having the links open in a new window.
Any help, advice and opinions would be much appreciated.
If you do a GET method instead of POST, then the user will get to an URL with its form parameters in it.
It won't have to be ajax anymore
I have been trying for a while now trying to figure out how to programmatically click a link using PHP and/or javascript. I have it setup so if the user clicks a link it will refresh a table. You don't really need to know why I want to do this b/c then it will go down a whole long road of confusion. Just know that there is a link to be clicked and I really really want to programmatically click that link using PHP and/or javascript.
Is there really no way to do this?
Edit: The code where I need to put the auto-click is in PHP, which would have to create and trigger some javascript or jquery or whatever.
Edit 2: Ok, now that you're all confused ... the real problem is that I have a Drupal form that has a property set to use AJAX when submitting. So the submission is done using the jquery plugin that is a module for Drupal. The AJAX setting is just an attribute setting and I do not have access to the underlying code that goes along with the submission of the form. Which forces me to have to refresh the table after the button is clicked. I really wish I could just attach the refreshing to the button click event for the submit of the form. But since I don't have access to that code I don't believe it's possible.
With Javascript, you can since it runs on the client machine, where the link exists. But the link doesn't even exist when PHP is doing it's magic, so you cannot click it "with" PHP. Keep in mind that PHP runs on the server, but the link exists only on the client.
Click a link with Javascript is rather simple:
// Index Page
document.getElementById("mylink").click();
Make sure all of your values are spelled properly. You can even output this command from PHP:
<?php print "<script type='text/javascript'>
document.getElementById('myLink').click();
</script>"; ?>
</body>
</html>
Note I placed this just before the closing </body> tag to ensure the link is present on the page.
Since it is drupal i assume that the form you're speaking of has an URL and therefore you could inject javascript code with the following module: JS Injector