Popup boxes using alert(), confirm() and prompt()

Popup boxes are used for interacting with the user. It can be error messages or something where the user has to make a decision or enter something. In general you work with four types of popups:

• Alert box
• Confirm box
• Prompt box
• Modal box

Of these, modal box is not a specific command in JavaScript, so this is shown on another page. Modal box also has some options that are not available for alert, confirm and prompt, which is why many new websites often uses modal box.

Alert boxes are popup-messages, where you can only click OK, when you have read it. The syntax is window.alert(), or just alert().

A button that displays a message upon click, looks like this as code:


On screen, it looks like this:




With alert you have almost no options when it comes to formatting of the text. You cam make a line break with \n, but that's it. Let's look at an example:



which looks like this on the screen:




Not being able to have images on an alert box, someone has found a workaround for, of course. If you can do text, you can also make ASCII art, so with a bit of ingenuity and patience, you can do something like this:



which looks like this on the screen:



Note that to make the text show a backslash and a single quote, instead of treating it as code, you need to add a backslash before, i.e. \\ and \'.

Confirm boxes are, as the name suggests, popup boxes, where you have to confirm or verify something. Where the alert box only had the button OK, confirm has the buttons OK and Cancel. It could be something like whether you really wanted to open a specific document. The typical use is at "OK" do one thing, at "Cancel", do something else, where clicking one of the buttons means do nothing.

Because the confirm box has to do more than one thing, according to a choice, we need to have an if/else construction to make it work. In principle, you can do it directly using ONCLICK, but it is messy to work with, so what you do is creating a function, that you call. Here we do it as an internal script, for the sake of demonstration, but it might as well have been an external script.

First thing to do is making the button calling the script confirmFunction(). It looks like this:



Under this, we make the script that, when clicking OK, i.e. confirm == true, make the grey area around the button green, or otherwise ensures the area keeps its normal grey color. The text to which you are clicking OK or Cancel, you write after confirm. Here we write "Do you want a green background?". For the code to work, the DIV in which the button is shown, has been given ID="ColorChanger", so you can use getElementById() for the example. Then the construction looks like this:



On the screen, it will look like this:



Like the alert box, you can only do text, so if you want any graphics, you have to use ASCII art.

A prompt box is a box for input, e.g. numeric values for calculations, that works as an alternative to input fields. The syntax is windows.prompt() or just prompt(), depending on your preferences. Like confirm(), prompt() needs a script for doing something with what you enter.

For the example being shown here, we need a field to write in, but what you enter may as well be an access code or search term for a database search, so a field like the one in the example isn't a requirement.

The first thing we make is the button that execute the script promptFunction(). The code looks like this:



We also need the field for entering text. In this case we use a DIV with ID="TextString". The code for the writing field looks like this:



Besides the text in the box created with prompt(), prompt() also allows having a default value. The two text strings are in quotes and separated by comma, i.e. prompt("The text in the box", "The default value in the input field").

On the popup box appearing you have two buttons, OK and Cancel, just like confirm(). It is said that click on OK execute the JavaScript and Cancel stops the script. This is not correct! When clicking Cancel, the value null is returned as your input, but the script continues running. This is important for the structure of the script.

What is written in the input field, you handle as a variabel, here we call it Text. Then the code looks like this:



In this example we do not make a destinction between a click on OK or Cancel, with the if/else construction asking whether the variable Text is different from null. If the click is on OK, the routine distinguishes between whether the field is empty or not. If there is a text, this is inserted in a text string, whereas an empty field triggers a message that you didn't write anything in the field. If Cancel is clicked, you write an empty string, "", as you need the script to react to the click, otherwise you get an error message. Then the code looks like this:



On the screen it will look like this: