how to prevent a user from pressing backspace/back arrow - javascript

I have a string of surveys, one after the other. It seems that after one survey, some people are pressing backspace to go back to the previous survey and then resubmitting it with new information.
How can I stop this? I am assuming that I need some sort of Javascript script.
I have found this
Preventing backspace to go back from the current form
but it doesn't seem to help if someone is doing it on purpose, which might be the case.

Do not break the back button. This breaks the browser HCI rules.
To do this properly you need to assign a unique ID to each instance of a survey being taken. Then, when a survey is being started, check that the ID has not been submitted before.

I assume you are tracking user's progress in survey on server (through cookie). If the user has proceeded to the page N in the survey and you don't want him to go back and modify his response on page N-1, then you can present him back with the page N even though he tries to access N-1 page. That will take care of user getting back to the N-1 page by pressing back button (something he/she can do even if you block backspace button)

I can see how it can be done in PHP by creating a $_SESSION, and updating it as each form is completed.
At the beginning of each page simply check that the session correlates with the correct survey.
I'll try and give an example.
First page
$_SESSION['status'] = 1; // allowed to view survey 1
if($_SESSION['status'] != 1){
header('Location: /page' . $_SESSION['status'] . '.php');
exit();
}
// your survey
// clicks submit
// goes to 2nd page
.... 2nd page (2nd survey)
$_SESSION['status'] = 2; // updates the status to show is on the 2nd page
if($_SESSION['status'] != 2){
header('Location: /page' . $_SESSION['status'] . '.php');
exit();
}
// your survey
// clicks submit
// goes to 3rd page.. etc

Related

JSP/Servlet keeps old session values on back button (browser)

So the problem is that i have a InitialPage.jsp page, that does the next thing when load:
if (<%=(Boolean) session.getAttribute("error")%>) {
showPopupWithError();
}
Login.jsp submits a form that calls ValidationServlet.java, that manages the validations for InitialPage.jsp, so, at the beginning of doPost(...) i set session.setAttribute("error", false), and start doing the validations.
If any input is wrong, the servlet will do session.setAttribute("error", true), and redirect to InitialPage.jsp, continuing with the cycle. As the scriptlets load, the .jsp will get the following code:
if (true) {
showPopupWithError();
}
And show the message.
So i continue loading data to inputs, and when everything is ok, i submit the form again.
The servlet validates correctly (so, the attribute "error" keeps set to false, as i had done at the beginning of the doPost(...)).
The problem comes as, when the next page shows (MainPage.jsp), the user should be able to press the back button of the browser and go back to InitialPage.jsp.
When it goes back to InitialPage.jsp, the attribute "error" is set to true, ignoring the last call to the servlet (when it validated correctly, set it to false, and redirected to the next page), and it automatically shows up the error message popup.
So basically the idea is to find a way to conserve session values after pressing the back button of the browser, and i couldn't manage to do that.
Thanks!

Go back to the actual previous page regardless of a form post error

I have a page with a form. On this page there is also "go back to previous page" link, which uses the following JavaScript:
window.history.go(-1)
When the form is posted and there is a validation error, the website returns the user to the same form page. However, clicking on this link in case of a form validation error gets the user to the form page before its submission, not the actual, different previous page.
How can I get the user back to the actual previous page by ONLY using JavaScript? Please note that there could be multiple times of form submission with errors.
You could probably use location.replace() in your redirect after validation error.
This will erase the current page location from the history and replace it with the new one, so it has no effect on page history.
Another option is to use sessionStorage to check if the URL has actually changed after going back one page in the history.
window.onload = function() {
document.getElementById("back").onclick = function() {
sessionStorage.setItem("href",location.href); //store current page into sessionStorage
history.go(-1); //go back one page
};
if (location.href == sessionStorage.getItem("href")) {document.getElementById("back").click();} //if current page is the same as last one, go back one page
else {sessionStorage.removeItem("href");} //clear sessionStorage
};
In the demos below (SO doesn't allow sessionStorage) I had to simulate both "going through the history", and "page load for every history item", so the code looks a little different, using an array and other vars and functions, but the principle should be the same:
codepen: https://codepen.io/anon/pen/OgBgGg?editors=1011
jsfiddle: https://jsfiddle.net/j0ddnboq/2/
You could store the "actual" previous page in a hidden form field on initial load and send this along with the form, then in your "go back to previous page" link js you could access that data.

How do I add jQuery click event to Django admin save and continue button?

I am trying to add some elaborate javascript validation to a django admin form. When the user clicks any of the three types of save buttons (save, save and continue, or save and add another) my javascript will run. Part of what it does is make an ajax call to provide special checks before posting. When I capture the click event using jquery of the add and continue button, sometimes I stop the form being submitted and sometimes I allow it to be submitted. Sometimes, only warnings are thrown, rather than errors, and then the user can decide that the form should continue to be submitted.
When it is finally submitted in the end, it needs to be submitted using the process dictated by the button they clicked originally. I found that adding JS of form.submit(); only submitted according to the save button, taking the user back to the model list, even if the user originally clicked the save and continue button.
I changed my JS from form.submit(); to capture the button itself and to trigger a click of it that bypasses the validation if the user has chosen to disregard the warnings. But still it returns to the model list after saving, even if the clicked button was save and continue.
What is the Django admin doing client side to dictate a save and continue instead of a plain old save when the user pushes that button?
So here is the short, summarized version of my question...
How can I, using Javascript (including jQuery), force a Django admin form submission that will:
save and continue
save and add another
Thanks in advance for any assistance.
I figured this out. I had to create a hidden field with the name of the button that had been clicked and the value of the button that had been clicked and submit that field along with the form. Worked great!
EDIT (From 02/2020)
So I originally posted this Q&A years ago and haven't been working with Django for the last few months, but I see that someone wanted my code. Working from memory and a few pieces of code I still have around, it was something like this (which is untested)...
var frm = $('form');
var chosenBtn = frm.find('[name="_save"]');
var btns = frm.find('[name="_save"], [name="_addanother"], [name="_continue"]');
btns.unbind('click.btnAssign').bind('click.btnAssign', function(e)
{
chosenBtn = $(this);
});
frm.unbind('submit.saveStuff').bind('submit.saveStuff', function(e)
{
// Add your own validation here. If the validation fails, you can call:
// e.preventDefault();
// But if it works, no need for that line. If everything works...
frm.append(
[
'<input type="hidden" name="',
chosenBtn.attr('name'),
'" value="',
chosenBtn.attr('value'), // or maybe chosenBtn.text()
'" />'
].join(''));
});

Javascript: Terminate the program when CANCEL clicked

Scenario:
I have a confirmation pop up message where when I click the OK button it will just proceed or will save the entry that I created - this is okay.. BUT when I click the CANCEL button it will go back to the page of booking_content.php - this one is okay...
PROBLEM:
the problem now is with the CANCEL, returning back to the page is good but its still saving the entry which is when I pressed theCANCELit will not save and will return back to the page ofbooking_content.PHP`.
QUESTION:
Is there a way to *terminate the program* when I click the CANCEL? I also tried the EXIT; but its not working....
Here's my code of Javascript along with PHP:
// other if else..
else if($network == "Mass and Mobile" && $row[fldTotalDuration] == "08:00:00" && $duration >= "0 s")
{?><?php
if(sizeof($bldg) == 1)
{
echo "<script type='text/javascript'>\n";
echo "alert('$bldg[$i] station is already full.');\n";
echo "window.location='booking_content.php'";
echo "</script>";
}
else
{ ?>
<script>
var r=confirm('$bldg[$i] station is already full. Do you want to save the other networks?')
if (r==true) {
alert("OKAY BUTTON");
} else {
window.location='booking_content.php';
}
</script>
<?php
}
}
//after all the if else...
else
{
// heres my code for saving the data....
}
THANK YOU IN ADVANCE...
You do realize that PHP executes on the server to generate a large string which is then sent to the browser as an HTML file that contains the javascript don't you?
So, the code executes as follows:
The user makes request to 'booking_content.php'.
The web server executes PHP to process the 'booking_content.php' script.
The 'booking_content.php' script is executed including the else section that contains the code for saving the data.
Data is saved and HTML string is generated and sent to the user.
Browser receives the HTML and executes the javascript which prompts the user with the confirmation dialog.
Do you see the problem here? The data is saved long before the confirmation dialog is shown to the user.
The way around this is to pop the confirmation dialog before the user makes a request to 'booking_content.php'. It's usually done as an onsubmit event on the form that submits the data or manually calling the dialog function if the data is submitted via ajax.
Alternatively in cases where you need to check some data or status in the server before popping the dialog you can have a separate intermediate page to ask the confirmation. For example, create a 'booking_confirmation.php' that gets the data from the form which in turn asks the confirmation and then redirects to 'booking_content.php' when the user clicks OK (remembering to include the post data or query param).

How to determine when a user is leaving a webpage (excluding certain links)

The situation: I have a Grails webpage with two tables. One table displays a persons information (including certain flags), and the second table has a list of flags with an "add button" that allows the user to add a given flag to themselves.
Now, there is a save button that, when clicked, pushes the current "state" of the users flags to our database. So I want to be able to display a prompt if there is unsaved information being displayed when a user tries to navigate to another part of the site. This is easy enough by using an existing isDirty boolean that each flag stores. I can just loop through the persons active flags and check if it is dirty or not. If the person contains at least 1 dirty flag, I need to display a prompt if they try to leave, because that data won't be saved unless they explicitly hit the button.
The problem: There are many ways to navigate away from this page. I am using
<body onbeforeunload="checkForDirtyFlags();">, where checkForDirtyFlags() is a basic js function to check for any dirty flags. But here's the thing - when a user adds or removes a flag, that causes a page reload because the way the page is setup is to redirect to a url like this:
"http://my.url/addFlag/123456"
The controller then knows to add the flag with id 123456 to the current person. This does NOT change where the person is in the website however, because the same page is still rendered (it just contains updated tables). So basically, when I see a URL with addFlag or removeFlag, I do not want to prompt the user if they are sure they want to navigate away from the page, because in the eyes of the user they are not leaving the page.
The question: Is there any way to determine what the target is during an onbeforeunload? So that I can have something like this in my javascript:
function checkForDirtyFlag() {
if( justAdding ) { //We are just adding a flag. No prompt necessary
//Don't do anything
}
else if( justRemoving ) { //We are just removing a flag. No prompt necessary
//Don't do anything
}
else { // In this case, we want to prompt them to save before leaving
alert('You have unsaved data on the page. Leaving now will lose that data. Are you sure you want to leave?');
}
}
If any of this isn't clear, please let me know and I'll try and clear it up.
Thanks!
I don't think you can get the target location in unload event. What I'd do is bind the save/submit button to a function that disables the unload event if the button is pressed, therefore disabling the prompt. If the user tries to leave by pressing back etc, the unload event would fire.
Why don't you push the changes immediately to the database, without them having to press the Save Button, or store them in a temporary database so that they do not lose their unsaved changes when the navigate to a different part of the site.
I'm not quite sure if I get you right - but you actually wrote the solution already down there. Why don't you just return a string-message from within an onbeforeunload when necessary ?
For instance:
window.onbeforeunload = function() {
if( justAdding ) { //We are just adding a flag. No prompt necessary
//Don't do anything
}
else if( justRemoving ) { //We are just removing a flag. No prompt necessary
//Don't do anything
}
else { // In this case, we want to prompt them to save before leaving
return 'You have unsaved data on the page. Leaving now will lose that data. Are you sure you want to leave?';
}
};
If you return a string value from that event, the browser will take care of a modal dialog window which shows up. Otherwise nothing happens.

Categories

Resources