Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to show prompt dialog box using JavaScript?
JavaScript has several built-in methods to create dialog boxes that allow users to interact with them. The prompt() method in JavaScript is one of them. The prompt dialog box is very useful when you want to pop up a text box to get user input. In this article, we'll explore how to use the prompt() method with examples.
What is a Prompt Dialog Box?
The prompt() method in JavaScript is used to display a dialog box that prompts the user for input. The prompt dialog box is very useful when you want to pop up a text box to get user input. Thus, it enables you to interact with the user.
This dialog box has two buttons: OK and Cancel. If the user clicks the OK button, the window method prompt() will return the entered value from the text box. If the user clicks the Cancel button, the window method prompt() returns null.
Syntax
The syntax for the prompt() method is as follows:
let userInput = prompt(text, defaultText);
Parameters
- text: This is the message displayed in the dialog box. It is optional.
- defaultText: This is the default input value displayed in the text field. It is also optional.
Return Value
- Returns a string containing the user's input if they click OK
- Returns null if they click Cancel or press Escape
- Returns an empty string if they click OK without entering anything
Basic Example
The following is a simple example demonstrating the working of prompt() dialog box:
<!DOCTYPE html>
<html>
<head>
<title>Prompt Input Example</title>
<script>
function askName() {
// Show a prompt dialog box asking for the user's name
let userName = prompt("What is your name?");
// Display the user's name on the page
if (userName) {
document.getElementById("output").innerText = "Hello, " + userName + "!";
} else {
document.getElementById("output").innerText = "Hello, stranger!";
}
}
</script>
</head>
<body>
<h1>Welcome to the Prompt Input Example</h1>
<button onclick="askName()">Click me to enter your name</button>
<p id="output"></p> <!-- This is where the output will be displayed -->
</body>
</html>
Example with Default Value
You can provide a default value in the prompt dialog:
<!DOCTYPE html>
<html>
<head>
<script>
function askAge() {
let age = prompt("Please enter your age:", "18");
if (age !== null) {
document.getElementById("result").innerHTML =
"Your age is: " + age + " years old";
} else {
document.getElementById("result").innerHTML = "No age provided";
}
}
</script>
</head>
<body>
<button onclick="askAge()">Enter Your Age</button>
<p id="result"></p>
</body>
</html>
Handling Different User Actions
Here's how to handle different scenarios when using prompt():
<!DOCTYPE html>
<html>
<head>
<script>
function handlePrompt() {
let input = prompt("Enter something:");
if (input === null) {
document.getElementById("status").innerHTML = "User cancelled the prompt";
} else if (input === "") {
document.getElementById("status").innerHTML = "User entered nothing";
} else {
document.getElementById("status").innerHTML = "User entered: " + input;
}
}
</script>
</head>
<body>
<button onclick="handlePrompt()">Test Prompt Handling</button>
<p id="status"></p>
</body>
</html>
Key Points
- The prompt() method always returns a string or null
- Numbers entered by users need to be converted using parseInt() or parseFloat()
- Prompt dialogs block code execution until the user responds
- Modern web development often uses custom modals instead of prompt()
Conclusion
The JavaScript prompt() method provides a simple way to collect user input through a dialog box. While useful for quick prototypes and simple interactions, consider using modern UI components for production applications to provide better user experience.
894 Views
