JAVASCRIPT CONFIRMATION DIALOGUES
In this tutorial I'm going to show you how to make a confirmation dialogue box that asks a user if the would like to navigate away from the page. I'll also show you how to add newlines and escape quotes correctly. The result will look like this:
STEP 1:
You will need to add the script and the button as follows - please follow the comments in the code
<?php /* Javascript Confirmation Dialogues */ ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Confirmation Dialogue Boxes</title>
<script type="text/javascript">
<!--
//Create a New Function called myConfirmBox()
function myConfirmBox(){
//show the dialogue and store the answer in a variable called "answer"
var answer = confirm("Do you want leave this page? \nNote:Pressing \"Cancel \" will keep you on the same page ");
//so now we create a simple "if...else" statement that will do something depending on which button was clicked
//if the answer is "true" then the user pressed "ok"
if (answer == true) {
//so redirect them to another page
window.location="http://www.marcfirth.co.uk/portfolio.php";
//otherwise, the user pressed "cancel"
} else {
//so we "return false" - in other words: do nothing.
return false;
}
//and don't forget to close the function
}
//-->
</script>
</head>
<body>
<form>
<!-- Here we have a form button with it's "onclick" event set to call our JavaScript function -->
<input type="button" value="Go!" onclick="myConfirmBox()">
</form>
</body>
</html>
Notes:
Firstly, notice the use of \n half way through the question in the dialogue box. "\n" allows you to create newlines in your dialogue box.
Secondly, notice the use of \" in the question. Normally, a second set of double-quotes would close the question being asked in the dialogue box. Remember, we opened the question with double quotes:
var answer = confirm("Do you...
The preceding backslash prevents the JavaScript interpreter from parsing the quotes and instead includes them in the question.
And that's it - simple.