Quick Reach
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
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<button onclick=“showalert()”>Show alert JS</button>
<script type=“text/javascript”>
function showalert(){
alert(“This is alert popup example”);
}
</script>
</body>
</html>
|
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
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<button onclick=“showalert()”>Show alert JS</button>
<script type=“text/javascript”>
function showalert(){
alert(“Hey, nThis is alert box example with line break!”);
}
</script>
</body>
</html>
|
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
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<button onclick=“showalert()”>Show alert JS</button>
<script type=“text/javascript”>
function showalert(){
var strmsg = “This is alert popup example with variable!”;
alert(“Hey, “ + strmsg);
}
</script>
</body>
</html>
|
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
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<button onclick=“showalert()”>Show confirm JS</button>
<script type=“text/javascript”>
function showalert(){
var optsel = confirm(“Do you want to close window?”);
if (optsel == true){
alert(“You clicked OK!”);
}
else{
alert(“You clicked Cancel!”);
}
}
</script>
</body>
</html>
|
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
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<button onclick=“showalert()”>Show prompt JS</button>
<script type=“text/javascript”>
function showalert(){
var getval = prompt(“Enter text here, we will display in alert!”);
if (getval != null) {
alert(“Entered text is: “ + getval);
}
else {
alert (“Cancel clicked!”);
}
}
</script>
</body>
</html>
|
To learn more about javascript prompt with more examples go to its chapter.
Further Reading: JavaScript array | JavaScript confirm | JavaScript prompt alert
Leave A Comment?