I'm detecting form changes in a page, and so i've handled
$('#element').change(function(){
metaDataChange = true;
});
so that when the user leaves the page and a change was made in an input in a form. He/she will be alerted whether to leave or to stay on the page, just like in Facebook where you try to post a status and then you leave the page, a dialog box will be prompted giving you options to either leave or stay in the page.
$(window).on('beforeunload', function() {
if(metaDataChange === true || basicInfoChange === true){
return "You have unsaved changes, do you want to leave without saving?";
}
});
The code above works well however.. i want to exclude the submit button for this.
Because when i click "submit" and the behavior of the submit button means redirecting to another page. The user is prompted again with the same message when in fact he/she intends to save his/her changes.
How do i exclude the submit button from being caught in the beforeunload event of the window? I can hardly explain this... i hope it can be understood..Thanks!
$('#submitButton').click(function(){
metaDataChange = false;
...redirecting
});
Related
My objective is to when the user clicks on the exit button, it should appear a box with 2 buttons, to confirm or cancel the leave. After the confirm button is clicked, a redirect is needed.
I tried a lot of solutions, but I could only find a solution that I can control what happens after the confirm button.
But I need to do some action after they click on the confirm
My code:
window.onbeforeunload = function () {
return "message"
}
That opens a box to confirm the exit, but I can't control the actions after it
something like this
const result = confirm('Do this?');
if(result){
//redirect here
}
I wish to prevent a user from leaving a page before clicking on submit button.And when he confirm leave i want to execute something (delayed leave).
i use this function
window.addEventListener('beforeunload', function(e) {
var myPageIsDirty = "d";
if (myPageIsDirty) {
e.preventDefault();
e.returnValue = '';
}
});
This surely warns the user. But my requirement to handle the leave button click event and do something
leave button confirmation can be done by:
Submit
There are several similar questions on here already but none of them provide a solution to what I'm looking for here.
When a user clicks the close button on their browser I need to pop up an alert to confirm that they really want to close their browser. This is easy enough to write:
$(window).bind('beforeunload', function(){
return 'Are you sure you want to close your browser?';
});
The problem with this is that it also fires when you do things like refresh your browser, click on buttons and links, etc.
Most of these can be prevented by detecting the key presses and checking the keyCodes like this:
if (e.keyCode == 114 || e.keyCode == 116 || e.keyCode == 0 || e.keyCode == 17 ||(e.ctrlKey && e.keyCode == 114)){
confirmBrowserClose = false;
}
$("a").bind("click", function() {
confirmBrowserClose = false;
});
$("form").bind("submit", function() {
confirmBrowserClose = false;
});
$("input[type=submit]").bind("click", function() {
confirmBrowserClose = false;
});
These things prevent most of them but one thing it doesn't work for is refresh. I can prevent it from firing when the user refreshes using the keyboard (like F5) but I need to know how to prevent my confirmation alert from firing when the user clicks the refresh button or enter in the URL window.
Most of what I've found scattered around the internet says that it either can't be done or they talk about things like using the keyCodes and F5 refresh. I know this can be done because there are many sites that have this functionality working. A couple sites that are using it are Facebook and JSFiddle.net. In Facebook, if you start typing a status update and then try to close your browser, it will popup a confirmation. In JSFiddle, if you make changes to your fiddle and then try to close your browser it will pop up a warning alert that your changes will be lost if you close.
Does anyone know how to do this?
This is not possible. If you observe properly, even Facebook.com and JSFiddle.net do not have this feature.
beforeunload is the only event that gets triggered on leaving the page.(either by page refresh [f5, ctrl+r], tab close, load another link[this also accounts to leaving the current page, hence triggering beforeunload])
I got the snippet below from this SO post, and it works when a user tries to reload the page or close the browser etc. but if the user clicks on a link then it lets them naivagate away, and then incorrectly starts displaying the message on the wrong page. I am using pjax for the links.
$(document).ready(function () {
$('textarea').change(function () {
window.onbeforeunload = function () { return "Your changes to the survey have not been saved?" };
});
});
You should use onbeforeunload like this, inconditionally:
<script type="text/javascript">
saved=true; // initially, it is saved (no action has been done)
window.onbeforeunload = confirmExit;
function confirmExit() {
if (!saved) {
return "You did not save, do you want to do it now?";
}
}
</script>
It is not safe to handle this event only when another event is fired. The onchange event of your textarea here probably don't fire before you click on a link so the window won't handle the onbeforeunload at all. The link will work as expected: you will get redirected.
To deal with the saved flag, you could listen to what happens in your textarea, for example, when the user is actually typing something:
$('textarea').keyup(function(){
saved=false;
});
Then, if you save the data in ajax, the save button could set it back to true:
$('#btnSave').click(function(){
// ajax save
saved=true;
});
Otherwise, it will load the next page with the saved flag on.
what about something like the following?
Listening on all <a> links and then, depending on whether the variable needToSave is set to true, showing the message or letting it go.
var needToSave = false; // Set this to true on some change
// listen on all <a ...> clicks
$(document).click("a", function(event){
if (needToSave == true) {
alert("You need to save first");
event.preventDefault();
return;
}
});
UPDATE (as per Roasted's suggestion) this should trigger the unload event every time the link is clicked and perform your existing logic:
// listen on all <a ...> clicks
$(document).click("a", function(event){
$(window).trigger("unload");
});
jsFiddle here - http://jsfiddle.net/k2fYM/
Currently I have a submit button that pops up a confirmation that allows the form data to be processed or not.
I need my other button on my form page called "Cancel" to have the same action. How could I expand this code to add a second confirmation to the same form?
these are my buttons on the form :
And this is my current code that works :
</script>
<script>
$(document).on('submit', "#signinform", function(e)
{
if (!confirm("By clicking 'OK' you will be placed in queue! Please take a seat."))
{
e.preventDefault();
return;
}
});
</script>
just to add on :
The submit is a submit BUTTON. the Cancel is just a href with a border around it.
also again
This works at the moment for just the submit button.
I need my other button on the form called "Cancel" to do the samething, as in if you hit Ok your submission data will be deleted, and then you will be returned back to the form. If you hit cancel then you will remain on the page.
I guess you simply need something like
$(document).on('click', "#cancelButtonID", function(e)
{
if (!confirm("By clicking 'OK' you cancel the submission and the form is cleared."))
{
e.preventDefault();
return;
}
else {
//Clear the form or perform whatever actions are needed
}
});
I think however that you may want to replace your cancel link with a proper <input type="reset"> button, as that will clear the form automatically when you let the default action happen. Then you should be able to get rid of the else section above.