I'm coding some basic validation (mainly for aesthetic purposes, will do the main stuff in PHP) with formvalidation, and I've noticed a big problem in that once I hit submit, if it goes back to the same page, all the fields are no longer validated. I've tried a couple of lines of code from googling the problem, but none seemed to work.
Here is one line that seems to run on the datepicker alright when you use it, but if I just stick it out in the option for the document ready function (I just use trial and error with jquery), it does nothing.
$('#main_form').formValidation('revalidateField', 'pcn');
From here I tried this:
$('#main_form').validate().form();
But for some reason the entire validation breaks when I use that.
Here is a jsfiddle using the jquery code I'm using, what I basically want is it to instantly say that the field is required when you hit run.
Alternatively, can I set it to default to a certain message? That way I have PHP validate it on page load.
Finally got it working after a lot of trial and error. It turned out to be quite a simple fix, but needed to be in the correct place.
Add this line below all the validation code:
$('#form_id').formValidation('validate');
I'm hiding it behind if(isset($_POST['submit'])), so it'll revalidate the form on submit, but not validate when you first load.
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="";}
}
My web application utilizes page reloads in places where the page structure changes.
For content changes initiated by the user it is all handled by Ajax.
However I'm planning on removing all the page reloads and replacing them with ajax calls that simply update the page using innerHTML for the body and head tags.
To do this I know have to manually call functions that are normally called by the onload event.
When I am done I will have a complete ajax application. My question is, is this standard practice now....I see a lot of applications where you do something and the whole page reloads, where even common elements are reloaded.
For example go to Apple.com and hit on the first button you see "Store"...you will see the whole page reload even the menu bar that does not change is reloaded wasting bandwidth..
Because I don't see other people using complete ajax solutions...I wonder if I am headed down a wrong path.
My question?
Is a complete ajax based web application best practice? (of course file uploads aren't supported, omitting this, is it best practice).
If so why do big sites not do it? I see few sites that actually employ ajax instead of page reloads.
There are a number of reasons not to go fully ajax. A few are:
If the user refreshes the page they'd be sent back to the home page;
if they pressed the back button, they'd go back to the previous site
they visited.
Search engines won't be able to index anything past the home page.
Anyone without javascript enabled or on IE 6 (or it's equivalent) wouldn't be able to use the site.
Lastly, it can be hell to debug a problem -- I went full ajax on a project a while ago and ended up regretting it.
If none of the above are important to your project, and you're looking to do something different, then by all means -- the real question you need to ask is "does the added complexity justify the savings in bandwidth?".
The concept of ajax is reload certain content of the page when you don't need to change all the content.
Your example of apple.com: it isn't a best practice to use ajax in navigation, because the history of browser don't handle this (use the back button of the browser and the navigation will not respond if you use ajax, keep that in mind).
If you have a box with testimonials and want them to change from time to time, so it's a good place to use ajax, avoiding the whole page to reload.
You can also have a static page with all testimonials to let search mecanisms to index that content.
Example of big sites? The search of google. When you type only the box of results is reloaded to view one preview.
So you have to choose when use and when not use ajax.
I have a form which sends data to a proccess page. Is it possible when the code in the process page is executed for the browser to jump back to the previous page?
EDIT
The reason i want this, is because i have a set of parameters which contains checkboxes. These parameters are echoed out via a while loop. I have a table where it shows which of those parameters are active. I would like to check the checkboxes by defualt where the corresponding parameter is in the table.
|||||||||||||||||||||||||||||||| Example ||||||||||||||||||||||||||||||
PARAMETERS:
T-Shirt: checked
Distance: checked
Race: unchecked
TABLE (parameters)
• T-Shirt
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||the example above checks the box if it already exists in the parameters table. When the user clicks back after the process page, the boxes he selected is checked.
Hope i am clear enough
Regards
I think a nice solution might be to implement a front controller for your webbage, a central script to include the appropirate page. Using a system like that, the user stays on the same page all the time even when other pages are loaded.
I haven't used a front controller in quite some time, so I won't write examples due to potential errors and poor coding. You can probably find some examples using google though, I wouldn't be surprised if the subject has been brought up here on Stackoverflow before either.
Even though I'll have to point out Griffin's solution is the best, if you're dead set on a redirect, simply have your PHP script execute the following lines:
echo '<script>document.history.go(-1);</script>';
die();
Or even
die('<script>document.history.go(-1);</script>');
It's a dirty solution, so I must advise against it.
The short version of what I am looking to do is make a "safe" and idiot-proof page, at least as much as possible.
I have researching the best way to make every hyperlink on a page (ie. standard menus used on the page or any other hyperlinks outside of a HTML form) submit/POST the form information and then redirect to the page clicked on.
For some reason not all users remember the "Save" button before clicking on something else. Then they are upset because they didn't save their information. I would much rather have all the information be saved before sending them on to the hyperlink's URL.
Helpful information:
- This is on a PHP based project.
- I have already put in place code to "detect" what kind of page is in use and if the feature is needed.
- I have header() redirects in some places for other items, so that is nothing new.
- I have looked at javascripts to add, when needed, so that the form is POSTed, and found some options for that.
At this point I can't get the final steps put together, such as a javascript that would POST the information AND store the URL that the hyperlink was supposed to go to. Process the POST information and then redirect to the stored URL.
Dream Example:
onclick="submitformandforward("Example_form", "http://example.mysite.com/example_page.php?querystring=Y")"
Any suggestions, tips, examples, etc are warmly welcomed!
Thanks.
KH
Javascript is the tool you require...
remember some people may have it switched off...
Wehn some clicks a link - check that the form values have been altered - if not carry on - if they have inform that that changes need saving...