Javascript confirm box, click cancel not working, page still load - javascript

I have a project use confirm box javascript, if user click cancel and then do nothing but page still load, i search all about confirm box and i can't find what i looking for, please help me with this, here some code
javascript
function OnClickNextPage(){
var result = confirm("Are you sure ?");
if (!result) {
return false;
}
}
html
Test
Thank you

Instead of returning false you have to prevent the default beahaviour of the event with preventDefault() function. Here is the code
Test
function OnClickNextPage(event){
var result = confirm("Are you sure ?");
if (!result) {
event.preventDefault();
}
}

You have to "terminate" the click event to the a tag, to do this, you have pass the event object to OnClickNextPage function, then call .preventDefault() on the event. return false; action does not affect to onclick event.
HTML
Test
Javascript
function OnClickNextPage(event) {
var result = confirm("Are you sure ?");
if (!result) {
event.preventDefault(); // prevent event when user cancel
}
// go to page in a tag's href when user choose 'OK'
}

try
function OnClickNextPage(e){
e.preventDefault();
var result = confirm("Are you sure ?");
if (!result) {
return false;
}
}
Edit --
Sorry My bad, problem is you are calling page load event in href which eventually fire on priority of DOM
Test
Try like this
Test
function OnClickNextPage(e){
e.preventDefault();
var result = confirm("Are you sure ?");
if (!result) {
return false;
} else {
window.location.href = [[Your URL Here]]
}
}

JS
function OnClickNextPage(e){
console.log('after prevent')
var result = confirm("Are you sure ?");
if (!result) {
e.preventDefault();
return false;
}
}
HTML
Test

Related

brower/tab close show confirmation like "Exit" and "cancel"

Show Confirmation Box when user leaving tab/ or Browser close like "continue" or "exit".
I tried window.onUnload event also but not working.
But this event called only once. and second time round it does not execute the function
var areYouReallySure = false;
var internalLink = false;
var allowPrompt = true;
function areYouSure() {
if (allowPrompt) {
if (!areYouReallySure && !internalLink && true) {
areYouReallySure = true;
var ConfMsg = "click Cancel"
return ConfMsg;
}
} else {
allowPrompt = true;
}
//}
}
//var allowPrompt = true;
window.onbeforeunload = areYouSure;
How to code for reload and cancel button ,which come on prompt?
onbeforeunload function will call when you try to close the tab not on the button click.
In your code as you are using this areYouReallySure variable. So first is false so it is working but after you have set as true inside of if condition. That's why it is not working because in second time is not return anything.
window.onbeforeunload = funcRef
funcRef is a reference to a function or a function expression.
The function should assign a string value to the returnValue property of the Event object and return the same string.
The WindowEventHandlers.onbeforeunload event handler property contains the code executed when the beforeunload is sent. This event fires when a window is about to unload its resources. The document is still visible and the event is still cancelable.
CODE SNIPPET
//This function will call on before close tab
function areYouSure() {
return "You have made changes, are you sure you would like to navigate away from the page?"
}
window.onbeforeunload = areYouSure;

Javascript confirm Stop page refresh after cancel

I have made a JavaScript function which is attached to the cancel button on of a form. The issue I am finding is that when the cancel button is pressed the page/form reloads losing the data in the text fields.
function cancelConfirm(){
var confirmCancel = confirm("Are you sure you wish to cancel?");
if(confirmCancel==true)
{
alert("byebye");
}
else
{
return false;
}
};
I was just wondering how can you prevent the page from reloading after the cancel button on the confirm has been clicked? Thanks for any help you can give
you can just use a simple way
Delete
function cancelConfirm() {
var confirmCancel = confirm("Are you sure you wish to cancel?");
if (confirmCancel == true) {
alert("byebye");
return false;// to stop postback on ok cick of confirmation popup
}
else {
return false;
}
}
What you can do is to add an onClick event and pass the event object down to it.
{onClick(e) => {
e.preventDefault();
//do something here
}}
A simple e.preventDefault() is what you need.

How to prevent JQuery from executing after hitting Cancel on popup?

I have a form that needs to get submitted. After clicking on submit I have a javascript alert/confirm that asks: Are you sure you want to submit the order?
If the user clicks "OK", I want to execute a JQuery method. But if they click "Cancel", I don't want to execute anything. Is there a way to do this?
Here's the JQuery I want to submit if they click "Ok":
<script>
$(document).ready(function() {
$('#saving').click(function() {
// do something
});
});
</script>
my button:
Save
The javascript popup:
function askUserIfTheyAreSure() {
var check = confirm("Are you sure you want to submit the order?");
if(check == true) {
document.forms["myform"].submit();
}
}
I suggest this way:
<script>
$(document).ready(function() {
$('#saving').click(function() {
if(confirm("Are you sure you want to submit the order?")){
document.forms["myform"].submit();
}else{
return false;
}
});
});
</script>
Do you mean, like this?
<script type='text/javascript'>
function askUserIfTheyAreSure(){
var check = confirm('Are you sure you want to submit the order?');
if(check == 1) {
// run you jQuery Function Here
}
else{
// do something else
return false;
}
}
$(document).ready(function(){
$('#saving').click(askUserIfTheyAreSure);
</script>
Really, I would use external JavaScript, so it's cached.
Just copy whatever you have inside "click" code into the "check==true" block.
It won't be executed if user clicks cancel.
function askUserIfTheyAreSure() {
var check = confirm("Are you sure you want to submit the order?");
if(check == true) {
// do something begin
// do something end
document.forms["myform"].submit();
}
}

how can i prevent onbeforeunload from firing when a certain condition is met?

i have a page on which i want to confirm if the user wants to leave.
i have to confirm only when a certain condition is met so i wrote code like this
var back=false;
back=//check if user pressed back button
window.onbeforeunload = function (e) {
alert(back); //this alerts true
if(back==true)
return false;
//e.preventDefault; --this does not work too
};
but this does not work. i mean when i click on back button this onbeforeunload still fires and i still get the confirmation message even when i m returning false.Whats can be wrong?
Thanks
Return a string if you want to offer an option to the user to abort the unload. Return nothing in other cases.
var back = false;
back = true; //Somewhere, the condition is set to true
window.onbeforeunload = function (e) {
if(back == true)
return "Are you sure to exit?";
}
$(window).bind('beforeunload',function() {
return "'Are you sure you want to leave the page. All data will be lost!";
});
$('#a_exit').live('click',function() {
$(window).unbind('beforeunload');
});
Try this. Above code is working in most of conditions.
For the sake of completeness here a more modern, recommended approach:
let warn = false;
window.addEventListener('beforeunload', e => {
if (!warn) return;
// Cancel the event
e.preventDefault();
// Chrome requires returnValue to be set
e.returnValue = '';
});
warn = true; // during runtime you change warn to true
Typically, it is better to use window.addEventListener() and the
beforeunload event, instead of onbeforeunload.
Source
The reason why your originally posted code didn't work is that false is a non-null value. If you would have returned null or undefined in the situation where you don't want to spawn a pop-up warning your code would have worked as expected.
The currently accepted answer works because JavaScript implicitly returns undefined at the end of the function.
Condition for back-end
var confirmExist = function (e) {
return true;
}
window.onbeforeunload = confirmExist;
http get, post request
.then(function(r)) {
window.onbeforeunload = null;
}
You could also consider not setting the window.beforeunload event untill your list of conditions are met.
var confirmUserToLeave = function () {
if (/* conditions are met */) {
window.unbeforeunload = function (e) {
/* whatever you want to do here */
};
} else {
window.unbeforeunload = undefined;
}
};
Then just call that method on certain events that might change the outcome of your 'conditions are met'.

Silly Javascript Help

var showPop = true;
function exitIt(){
if (showPop){
showPop = false;
return 'blah blah';
}
}
This is a little exit pop up. If the user chooses to "stay on the page", I need it to redirect to the proper URL. How can I do this?
Just because you can implement something, doesn't mean that you should. Exit popups are arguably the most annoying thing ever!
or document.location = "http://www.example.com/";
if (confirm('Move to another page?')){
window.location = "http://blah.com/";
}
$("a#myleavinglink").click(function() {
var answer = confirm("Are you sure you should leave? Its so sweet thougH!");
if (answer) {
return true;
} else {
return false;
}
}
You could also do a very similar thing with jQuery and if the user decides to leave the page, or back up, or type in their own address.
BTW, by returning true from a click function in jQuery will allow standard operations, but returning false will override the standard functionality and only provide the functionality you have choosen. Hence, if the user wants to leave, it returns true, else it returns false
$("a").live("click", function() {
var id = $(this).attr("id");
if (id == approvedClicks) {
return true;
} else {
return false;
}
});
that would prevent any links being clicked to be removed, whether at page load, or added in with JS.

Categories

Resources