I found many questions of this type, but none helped.
Most of them give solution of using following code:
window.onbeforeunload = null;
My issue is when I type something in search box and press enter, jQuery function run which redirect to another url. but before redirect alert box come -> "Do you want to leave this site? Changes that you made may not be saved."
Here is my jquery code
<input type="text" placeholder="Search" value="" id="SearchBox" />
$('#SearchBox').keypress(function (e) {
if (e.which == 13) {
var search = $('#SearchBox').val();
window.onbeforeunload = null;
window.location.href = 'https://redirecturl';
}
});
Maybe you can try that Disable alert();
It disable alert box by assigning an empty function.
EDIT
Apparently you can also override the alert function JavaScript: Overriding alert().
Just return an empty function like this
(function(proxied) {
window.alert = function() {};
})(window.alert);
Add this at the end of the JS file, every JS file, just in case you cannot find the onbeforeunload listener.
window.removeEventListener("beforeunload");
And check the HMTL for inline onbeforeunload, just browse the HTML file with ctrl+f.
That is it, this will do the job.
Related
As part of my new job, I'm creating a small form where users answer a question and this is then saved and output at the end of the pages.
I started off with having a prompt where users were asked to explain their answers (which worked perfectly!), however I've been asked to change this to an input box.
Essentially the process I need to do is:
User enters in text box -> Clicks next button -> save input to session variable and move to next page
So far, I have the following HTML in the body:
<form name="next" action='#' method=post>
Explanation:<input type="text" id="xp" required><br>
<button class="nextButton" onclick="return explanation()">Next</button>
</form>
with the corresponding javascript:
function explanation() {
var exp = document.getElementById('xp').value;
sessionStorage.setItem("p1_reason", exp);
alert(exp);
document.location.href = 'page2.html';
}
So far the result of this is:
The text box is cleared, but nothing is saved or displayed onscreen
The next page is not displayed.
Any help/advice would be appreciated. I'm relatively new to js so I'd be grateful! I'm well aware that there are similar questions around, I just can't seem to see where I'm going wrong.
#David is right. You can add event.preventDefault() function to prevent the form from its default behaviour, which is submitting. Otherwise your code seems to work.
function explanation() {
event.preventDefault(); // <-- add here
var exp = document.getElementById('xp').value;
sessionStorage.setItem("p1_reason", exp);
alert(exp);
window.location.href = 'page2.html';
}
Also, don't use document.location.href, it's deprecated. It's better to use window.location.href instead.
When you click on nextButton, the browser run explanation() and then try to execute the action of your form. Because your action is action='#' it just try to reload the page, preventing document.location.href for working properly.
Actually, you can try to don't enter nothing on the box and click on the button. The redirect will work because the form is empty, so there is nothing to submit.
Hey guys I am trying my best to figure it out how to remove the Javascript prompt/confirm that says "Do you want to leave this site?" like this:
https://prnt.sc/famast
Basically what's happening here is that when a modal got opened and the user click on "YES" it will redirect to a page. But I don't want the JavaScript confirmation but just redirect it to that page.
Any idea if you know some scripts that could make it happen?
Please help!
As other said above me, you can do it with onbeforeunload:
window.onbeforeunload = function() {
return '';
// The browser shows a pre-defined message so you don't have to write your own
}
You can also use addEventListener, in this way:
window.addEventListener('beforeunload', function() {
return '';
});
See an example (Link updated)
I want implement a method like facebook , when there is edited data in page confirm that he/she want exit page without save them,
I found below code to get confirm,
window.onbeforeunload = function(){
return "Are you sure you wanna leave without saving edited data?";
}
I know I should write a code that check data change by client side (js(jquery)), my first idea is check input element changes something like below code
var edited=false;
$('input ,select').change(function(){
edited=true;
});
window.onbeforeunload = function(){
if(edited)
return "Are you sure you wanna leave without saving edited data?";
}
what is the full method of checking edit occur in page and confirm user to leave if there was change in page.
my idea was correct and work correctly,
I write it here to help others in future
(function($){
var edited=false;
$('input ,select').change(function(){
edited=true;
});
window.onbeforeunload = function(){
if(edited)
return "Are you sure you wanna leave without saving edited data?";
}
})(jQuery);
you could implement the check directly on the controller, for example:
<input type="text" name="name" onChange="var edited = true"> </input>
then, when this code's going to be executed:
window.onbeforeunload = function(){
if(edited)
return "Are you sure you wanna leave without saving edited data?";
}
if the inputbox has changed, it will find edited variable set to true and it will ask to the user if he/she's sure to leave the page, without saving the data.
I have a application where i have disabled the back button of IE8 by using the following code.
window.history.forward();
function noBack() {
window.history.forward();
}
I know this code takes the page back and again moves the page forward. i have called a function onload of the page which makes a textbox read only. i have used the following code to make it read only.
$("#IDofTheTextBox").attr('readonly',true);
but if i select the textbox and try to edit by pressing "BackSpace" button, IE back button is getting invoked and the textbox which was readonly is not readonly anymore. Can anyone help me how to solve this issue?
The answer is simply "NO"
If you're trying to prevent the user from losing their work, try something like:
window.onbeforeunload = function() { return "Are you sure want to leave this page?."; };
function changeHashOnLoad() {
window.location.href += "#";
setTimeout("changeHashAgain()", "50");
}
function changeHashAgain() {
window.location.href += "1";
}
var storedHash = window.location.hash;
window.setInterval(function () {
if (window.location.hash != storedHash) {
window.location.hash = storedHash;
}
}, 50);
You add the above javascript functions in the js file and onload call the function changeHashOnLoad().
its working fine in IE8. i just tested it.
I dont know what your page is trying to do... but this is what we do:
We have an assessment where we do not want the browser buttons enabled... because we run ajax/logic when the user hits next/back etc (to determine what to display next based on their inputs). Back and forward buttons can muddy that process up.
So..... we have users open our assessments in A NEW WINDOW so the back button is already disabled...(there is no prior history in a new window). Then, Our next/back buttons use window.location.replace(url); This will prevent a history item from being created. Therefore, the back/forward buttons are never enabled and they must use the next/prev buttons to navigate our tool.
I would not try to muck with the buttons outside of something like the example I provided.
I want to know how can I display a confirmation box when the users try to get out of the page, like this one here in StackOverflow when you try to close the "Ask Question" page.
Thanks you in advance.
Actually, all that is necessary is this:
window.onbeforeunload = function(){ return "You should save your stuff."; }
This is also kind of a dupe of this: How to show the "Are you sure you want to navigate away from this page?" when changes committed?
In javascript, attach a function to window.onbeforeunload, like so:
window.unbeforeunload = function (e)
{
// return (prompt ('Are you sure you want to exit?'));
// EDIT: Amended version below:
var e = e || window.event;
if (e) e.returnValue = 'Your exit prompt';
return 'Your exit prompt';
}
EDIT:
As the comments below indicate, I had misunderstood the working of the event. It should now work as intended.
Ref: window.onbeforeunload (MDC)
probably a dupe: How do you prevent a webpage from navigating away in JavaScript?, but you can do this by adding an delegate to the window.onbeforeunload event
<script type="text/javascript">
window.onbeforeunload = function() {
//will show a dialog asking the user if
//they want to navigate away from the current page
// ok will cause the navigation to continue,
// cancel will cause the user to remain on the current page
return "Use this text to direct the user to take action.";
}
</script>
Update: doh! updated code to do what the OP really wanted :D
You want to catch the onbeforeunload event of window. Then if you return a string, the browser will display your message in a prompt. Here's an article with sample code.
You can use the window.onbeforeunload event to catch this. If there is any value inside the textarea then an alert message is shown.
That's browser based.
As long as you implement <form> tag, and you type in something in the form, and in Google Chrome, it will prompt you that message.