Monday, June 17, 2019

JavaScript Confirm

JavaScript Confirm

The JavaScript confirm function is very similar to the JavaScript alert function. A small dialogue box pops up and appears in front of the web page currently in focus. The confirm box is different from the alert box. It supplies the user with a choice; they can either press OK to confirm the popup's message or they can press cancel and not agree to the popup's request.

Confirmation are most often used to confirm an important actions that are taking place on a website. For example, they may be used to confirm an order submission or notify visitors that a link they clicked will take them to another website.

JavaScript Confirm Example

Below is an example of how you would use a confirm dialogue box to warn users about something, giving them the option to either continue on or stay put.

HTML & JavaScript Code:

<html>
<head>
<script type="text/javascript">
<!--
function confirmation() {
    var answer = confirm("Leave tizag.com?")
    if (answer){
        alert("Bye bye!")
        window.location = "http://www.google.com/";
    }
    else{
        alert("Thanks for sticking around!")
    }
}
//-->
</script>
</head>
<body>
<form>
<input type="button" onclick="confirmation()" value="Leave Tizag.com">
</form>
</body>
</html>


Display:



Leave Tizag.com

Note the part in red. This is where all the magic happens. We call the confirm function with the message, "Leave Tizag?". JavaScript then makes a popup window with two choices and will return a value to our script code depending on which button the user clicks.

If the user clicks OK, a value of 1 is returned. If a user clicks cancel, a value of 0 is returned.. We store this value in answer by setting it equal to the confirm function call.

After answer has stored the value, we then use answer as a conditional statement. If answer is anything but zero, then we will send the user away from Tizag.com. If answer is equal to zero, we will keep the user at Tizag.com because they clicked the Cancel button.

In either case, we have a JavaScript alert box that appears to inform the user on what is going to happen. It will say, "Bye bye!" if they choose to leave and, "Thanks for sticking around!" if they choose to stay.

In this lesson, we also used the window.location property for the first time. Whatever we set window.location to will be where the browser is redirected to. In this example, we chose Google.com. We will discuss redirection in greater detail later on.