Javascript : Prompt confirmation before exit
There are times when I typed some words into Facebook comment fields and then somehow got distracted to do something else only to come back to my screen later...without realizing that I suppose to complete my reply and accidentally try to close the browser.
Facebook's Javascript will block my attempt to close the window and reminds me that I will lose all the data if I don't save it.
In this tutorial, we will try to achieve the following:
1. Create a form with textarea and submit button.
2. Add Javascript to detect textarea value and prompt exit confirmation.
3. Enhance the script exclude certain elements.
1. Create a form with textarea and submit button.
<form action="http://target-url" method="post">
<textarea id="target-textarea" name="answer" rows="15"></textarea>
<button id="submit" >Post Answer</button>
</form>
2. Add Javascript to detect textarea value and prompt exit confirmation.
<script> window.onbeforeunload = confirmExit;
function confirmExit() { // check to see if the ANSWER textarea have value or not. // prompt user to see if she/he wanted to post the answer before exiting.
if ($("#target-editor-with-help-button").val() != '') { // if the textarea value is not empty. return "You have't finished your post yet. If you have made any changes to the text field without clicking the Submit button, your changes will be lost."; };
} </script>
Test out the page, close the browser window and see how the prompt goes. You will notice that even if you click on the Submit button, the javascript will still prompt you. This can be very annoying to the end user as clicking on the submit button is the expected behavior to proceed to the next page.
We will enhance our javascript to handle this annoyance, but adding a global variable NoNeedConfirm
<script>
var NoNeedConfirm = false; // add this
window.onbeforeunload = confirmExit;
function confirmExit()
{
// check to see if the ANSWER textarea have value or not.
// prompt user to see if she/he wanted to post the answer before exiting.
// if the textarea value is not empty and needToConfirm is true
if (($("#target-editor-with-help-button").val() != '') && (NoNeedConfirm)) { // and new variable to check
return "You have't finished your post yet. If you have made any changes to the text field without clicking the Submit button, your changes will be lost.";
};
}
</script>
and in the form itself, add this line onclick="NoNeedConfirm = true;"
<form action="http://target-url" method="post">
<textarea id="target-textarean" name="answer" rows="15"></textarea>
<button id="submit" onclick="NoNeedConfirm = true;" >Post Answer</button>
</form>
The new enhancement should do the trick. Hope you may find this tutorial useful.
By Adam Ng
IF you gain some knowledge or the information here solved your programming problem. Please consider donating to the less fortunate or some charities that you like. Apart from donation, planting trees, volunteering or reducing your carbon footprint will be great too.
Advertisement
Tutorials
+7.5k Golang : Add text to image and get OpenCV's X, Y co-ordinates example
+31.3k Golang : Regular Expression for alphanumeric and underscore
+21.1k Golang : Repeat a character by multiple of x factor
+25.6k Golang : How to check if a connection to database is still alive ?
+13.6k Golang : Execute function at intervals or after some delay
+14.6k Golang : Convert date format and separator yyyy-mm-dd to dd-mm-yyyy
+4.5k Golang : Frobnicate or tweaking a string example
+9.7k Golang : Bubble sort example
+12.9k Golang : convert(cast) string to float value
+21.2k Golang : Read a file into an array or slice example
+14.4k Golang : invalid character ',' looking for beginning of value
+9.7k Golang : Get UDP client IP address and differentiate clients by port number