I want to use confirm() box to check whether users want to exit the current page or not when they click cancle.
My goal is if the user clicks yes, then it will go to the previous page, if the user clicks no, then it will stay in the current page.
Inside the html file, the input field has onclick function like below.
<input action="action" id="cancle" onclick="return DeleteFunction()" type="submit" value="Cancel"/>
And inside the script field, I implemented the function like below:
function DeleteFunction(){
var result = confirm("Really leaving?");
if(result){
window.history.go(-1);
}
else{
return false;
}
}
However, when I click yes, then it goes to the page where it submits the form, which means window.history.go(-1) does not work.
Is there any possible ways to make it work as I desired?
You can also use window.history.back(); if it is not working but it works there is no issue with the line. However, you do not need else condition here, please remove it. Try this piece of code:
let res = confirm("Really leaving?");
console.log(res);
if(res){
// window.history.back();
window.history.go(-1);
}
Related
I have a form which takes input and enters it into the database. This is fine and working perfectly, except I have run into an issue with clearing the form. In Wamp it merely takes me to contactForm.php, which is a blank page. I have been trying to find a way of redirecting the user back to index.php and clearing the form. From searching around I have tried a couple of things (perhaps incorrectly) including putting this at the end of my php:
header('Location: http://stackoverflow.com');
and I also tried to write a JS function to do it
<p><input type="submit" name="submit" value="Submit" onclick="clearForm();"></p>
js
function clearForm(){
alert("Thanks, we will be in touch shortly");
document.getElementById("contactForm").reset();
}
function clearForm(){
alert("Thanks, we will be in touch shortly");
window.location=ur_url_here;
}
When you got redirect form will automatically reset
function clearForm(){
alert("Thanks, we will be in touch shortly");
window.location='http://stackoverflow.com';
}
There is no need to clear the form specifically, unless you are using some other element to save the details the form will be forgotten when you move to a new page.
function clearForm() {
alert("Thanks, we will be in touch shortly");
window.location='http://stackoverflow.com';
}
I used this code:
<script type="text/javascript">
function finish()
{
alert("Inserted!");
}
</script>
I want when the user clicks on "OK" of alert,it goes to another php page.
how can I undersatand when user clicks OK?
and how I can link to another page?In common I use this way:
<button type="submit" onclick="window.open('home.php')"> Insert </button>
but in alert example there is no button!
thanks
alert() is blocking: The browser will stop executing any Javascript code while an alert() is being displayed. The next line of code after the alert() will only be executed when the alert box is cleared.
Therefore, you don't need to do anything special to tell if an alert has been cleared; just put the rest of your code to run after the alert().
There is no result to alert. You can use window.location to redirect.
function finish()
{
alert("Inserted!");
window.location = 'newpage';
}
how can I undersatand when user clicks OK?
alert() is blocking, script execution pauses while it is displayed. When the user clicks OK, the script will continue running. Just put whatever other code you want after the alert statement.
and how I can link to another page?
You can set location to a new URL…
location = "http://example.com/";
… but generally speaking, you would be better off running the function as a click event handler of a regular link.
You can redirect by calling window.location=URL.
Alert is modal, it just gives information and then is dismissed. The script will continue executing after the alert message is dismissed.
If you want to just redirect after the user reads the alert message, you could use:
function finish() {
alert("When you click OK you will go to a new page.");
window.location = "http://www.yoururl.com";
}
On the other hand, Confirm gives the user a question and returns true/false based on the user response. This is probably what you should use instead.
In this case your function could look like this:
function finish() {
var continue = confirm("Finish and go to the next page?");
if (continue) {
window.location = "http://www.yoururl.com";
}
}
With either finish function, just attach it to the button however you want. The most direct way would be like you've done in your question:
<button type="submit" onclick="finish()"> Insert </button>
Note, though, if your button is in a form and you bind with onclick, the form is actually going to be submitted anyway unless you bind to the submit event and prevent it.
I have a function that is supposed to display a message in a P element if conditions are met. The function runs fine but the text that is sent to 'output1' appears briefly when you press the button and then disappears. I have tried putting the JS in the head and in the body but it doesn't seem to make a difference. Any ideas? Thanks.
HTML:
<p id="output1"><p>
Javascript:
<script>
function logicProcess() {
// alert('function launched');
if(document.getElementById('q1Y').checked || document.getElementById('q2Y').checked || document.getElementById('q3Y').checked) {
document.getElementById("output1").innerHTML = "Sorry, you don't qualify for our shared ownership properties";
}
else {
document.getElementById("output1").innerHTML = "You may qualify for our shared ownership scheme. Please complete the registration form.";
}
}
</script>
The reason the innerHTML is not staying visible is because there is some type of onclick method that is resetting the form. If that is true edit your onclick method like so:
onClick="function();return false;"
The change in here is the ;return false;
You haven't show us how you are calling that function, but the odds are that you are doing so in response to a form's submit button being pressed.
This will modify the DOM, and then submit the form, which will cause a new page to be loaded.
You need to cancel the default behaviour of the form to stop it being submitted.
function logicProcess(evt) {
// All your other code
evt.preventDefault();
}
document.getElementById('myForm').addEventListener('submit', logicProcess);
I think you are using input type submit, so the meaning of submit button is to submit the form and reload it, that's why your output is not holding your inner html.
change it to
<input type="button" />
So I've been looking around for hours, testing multiple versions, testing some of my own theories and I just can't seem to get it working.
What I'm trying to do is use alert or confirm (or whatever works) so popup a dialog when a user tries to navigate away from a purchase form. I just want to ask them "Hey, instead of leaving, why not get a free consultation?" and redirect the user to the "Free Consultation" form.
This is what I have so far and I'm just not getting the right results.
$(window).bind('beforeunload', function(){
var pop = confirm('Are you sure you want to leave? Why not get a FREE consultation?');
if (pop) {
window.location.href('http://www.mydomain/free-consultation/');
} else {
// bye bye
}
});
$("form").submit(function() {
$(window).unbind("beforeunload");
});
This is showing confirm dialog to user, want to stay or leave page. Not exactly what you looking for but maybe it will be useful for start.
function setDirtyFlag() {
needToConfirm = true; //Call this function if some changes is made to the web page and requires an alert
// Of-course you could call this is Keypress event of a text box or so...
}
function releaseDirtyFlag() {
needToConfirm = false; //Call this function if dosent requires an alert.
//this could be called when save button is clicked
}
window.onbeforeunload = confirmExit;
function confirmExit() {
if (needToConfirm)
return "You have attempted to leave this page. If you have made any changes to the fields without clicking the Save button, your changes will be lost. Are you sure you want to exit this page?";
}
Script taken from http://forums.devarticles.com/showpost.php?p=156884&postcount=18
Instead of using the beforeunload and alert(), I decided to check whether or not the users mouse has left the document. See code below:
$(document).bind('mouseleave', function(event) {
// show an unobtrusive modal
});
Not sure whether it will help.
You need to stop the propagation before showing the Confirm / Alert.
Please refer http://jonathonhill.net/2011-03-04/catching-the-javascript-beforeunload-event-the-cross-browser-way/
Look at the last comment.
Try this:
window.onunload = redirurl;
function redirurl() {
alert('Check this Page');
window.location.href('http://www.google.com');
}
I realize this is likely a duplicate, but I've been googling/SOing for a day now and I can't find a satisfactory answer. If there is an answer already on SO, please send me there.
I have a client that insists on having an exit message popup confirming they want to exit the site, just like Gmail does. (I've already tried arguing against it. He is immovable, so no comments about how that is bad practice please.)
I've found this code:
<script>
window.onbeforeunload = function() {
return 'Are you sure you want to exit?';
}
<script>
But it runs no matter what I do - reloading the page, clicking on the nav, etc.
I just want the message to show up when the user closes the tab/browser. I suspect it's something simple I'm missing but I'm not a Javascript expert.
Any help would be greatly appreciated.
Thanks
EDIT
Here's what is working pretty good. Thanks to all!
var isLeavingSite = true;
//This would be called on each link/button click that navigates
$('a, input[type="submit"]').click(function(){
isLeavingSite = false;
});
window.onbeforeunload = function() {
if(isLeavingSite)
return 'Are you sure you want to exit?';
}
Though it could be a fair amount of work (depending on how your site is written), you could do something like this (pseudo-code):
var isLeavingSite = true;
//This would be called on each link/button click that navigates
function GlobalLinkHandler()
{
isLeavingSite = false;
}
window.onbeforeunload = function() {
if(isLeavingSite)
return 'Are you sure you want to exit?';
}
If you're using jQuery, you can use the code below to flip the isLeavingSite flag:
$('a, input[type="submit"]').click(function(){ isLeavingSite = false; });
What'll have to do is make use a variable that you set if any link is clicked on the site, then inside the onbeforeunload event check if that variable is set meaning they clicked a link or not set meaning they're closing the tab.
You can also use that variable to simple set the href of the link; that will allow you to then check what link they clicked on inside the onbeforeunload event and allow you to check if they're clicking on a link to go to another page on your site or clicking on an external link to another site.
If your using jQuery try this Confirm before exit