JavaScript Message Boxes: alert(), confirm(), prompt()

JavaScript provides built-in global functions to display popup message boxes for different purposes.

• alert(message): Display a popup box with the specified message with the OK button.
• confirm(message): Display a popup box with the specified message with OK and Cancel buttons.
• prompt(message, defaultValue): Display a popup box to take the user's input with the OK and Cancel buttons.

alert()

The alert() function displays a message to the user to display some information to users. This alert box will have the OK button to close the alert box.

window.alert([message]);

The alert() function takes a paramter of any type e.g., string, number, boolean etc. So, no need to convert a non-string type to a string type.

alert("This is an alert message box.");  // display string message

alert('This is a numer: ' + 100); // display result of a concatenation

alert(100); // display number

alert(Date()); // display current date

confirm()

Use the confirm() function to take the user's confirmation before starting some task. For example, you want to take the user's confirmation before saving, updating or deleting data.

bool window.confirm([message]);

The confirm() function displays a popup message to the user with two buttons, OK and Cancel. The confirm() function returns true if a user has clicked on the OK button or returns false if clicked on the Cancel button. You can use the return value to process further.

The following takes user's confirmation before saving data:

var userPreference;

if (confirm("Do you want to save changes?") == true) {
    userPreference = "Data saved successfully!";
} else {
    userPreference = "Save Cancelled!";
}

prompt()

Use the prompt() function to take the user's input to do further actions. For example, use the prompt() function in the scenario where you want to calculate EMI based on the user's preferred loan tenure.

string prompt([message], [defaultValue]);

The prompt() function takes two parameters. The first parameter is the message to be displayed, and the second parameter is the default value in an input box.

var name = prompt("Enter your name:", "John");

if (name == null || name == "") {
    document.getElementById("msg").innerHTML = "You did not entert anything. Please enter your name again";
}
else
{
    document.getElementById("msg").innerHTML = "You enterted: " + name;
}