Alerts in JavaScript

The alert is the way to interact with the visitors of your website. An alert can simply be used to let a user know about something happened or happening with just one option, to close the alert dialog box by clicking the OK button.

For example, you can show an alert if a user enters characters in a numeric field, with a message: “only numbers are allowed”. Similarly, you can show an alert of JavaScript (with just ‘OK’ option) to let the user know that “information saved“.

There are other JavaScript alert boxes as well where you can present other options apart from just ‘OK’. For example, asking a user: “Do you want to proceed?” With Ok and Cancel options. Different types of alerts are explained in this chapter with examples, let us start with simple; single option alert.

Alert box syntax

The alert box is shown by using the alert function as follows:

alert(“User message”);

or you can also use:

window.alert(“User message”);

See examples below for using alerts with code.

An alert example

The following example will simply show an alert as you click on the “Show alert JS” button.

Experience this example online

An alert with new line example

The following example is using alert JavaScript function with a new line addition in the alert popup. You can add a line break by using “\n” as follows:

Experience this example online

The alert with variable example

Instead of using the static text, you can use variables as well in JavaScript alert. Simply place the variable name without double quotes inside the parenthesis as shown in the example below:

Experience this example online

JavaScript alert title

Unfortunately, you cannot change the title of alert due to security reasons. However, you can use jQuery if you really need to change the default title in the alert box. You can see examples covered in jQuery alert tutorial.

JavaScript confirm box

The JavaScript confirm box is used where you need to give two options to a visitor of the web page. For example, user closing the browser window containing your site and showing him/her: “Are you sure, you want to close the window?

Similarly, proceeding without filling a form completely and asking a user if he or she really wants to proceed without filling the form?

Following is an example of a confirm dialog box that shows a message to the user with OK or Cancel options.

Experience this example online

To learn more about JavaScript confirm with more examples go to its chapter.

JavaScript prompt example

The JavaScript prompt dialog box asks a user for some input value before proceeding. In the prompt box, a user will be asked to enter and then he or she has an option to press OK or Cancel. The OK returns entered value while Cancel returns null.

See the following example of using the prompt box. If you enter some text inside the prompt dialog box, the text will be shown in a prompt alert. If Cancel is clicked then alert will show “Cancel clicked”.

Experience this example online

To learn more about javascript prompt with more examples go to its chapter.

Further Reading: JavaScript array | JavaScript confirm | JavaScript prompt alert