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
JavaScript Prompt Example
In this article, we will learn to use the prompt() function in Javascript. The prompt() method in JavaScript allows developers to collect user input through a pop-up dialog box.
What is the prompt() Method in JavaScript?
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. The user needs to fill in the field and then click OK. This dialog box is displayed using a method called prompt().
Syntax
var userInput = prompt("Message", "Default value");
Parameters
The following are the parameters of the prompt() function ?
- Message (required): A text string is displayed in the dialog box to instruct the user.
- Default value (optional): A pre-filled value inside the input field, which the user can modify.
Return Value
- If the user enters a value and clicks OK, the function returns the entered text.
- If the user clicks Cancel or closes the dialog, null is returned.
Basic Example
Here's a simple example showing how prompt() works in the browser:
<!DOCTYPE html>
<html>
<head>
<title>Basic Prompt Example</title>
</head>
<body>
<script>
let name = prompt("What is your name?", "Enter your name here");
if (name === null) {
console.log("User cancelled the prompt");
} else if (name === "") {
console.log("User entered empty string");
} else {
console.log("Hello, " + name + "!");
}
</script>
</body>
</html>
Interactive Example with Button Click
The following example enhances the prompt() functionality by triggering it when a button is clicked. The result is displayed dynamically on the page.
Following are the steps to trigger the prompt dialogue box ?
- A button labeled "CLICK HERE" triggers the prompt() method when clicked.
- The prompt ("Are you sure?") function asks the user to enter a response.
- The input is checked:
- If the user clicks Cancel, the message "You pressed Cancel" appears.
- If the user enters text, it displays "You entered: [text]" dynamically.
- The response is updated inside the .result div.
The document.querySelector() selects the button element with the class "Btn". addEventListener() adds an event listener that triggers when the button is clicked.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JavaScript Prompt Example</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
margin: 20px;
}
.result {
font-size: 18px;
font-weight: 500;
color: blueviolet;
margin: 20px 0;
}
.Btn {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
border-radius: 4px;
}
.Btn:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<h1>JavaScript Prompt() method</h1>
<div class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>Click on the above button to get the prompt dialogue box</h3>
<script>
let resultEle = document.querySelector(".result");
document.querySelector(".Btn").addEventListener("click", () => {
let res = prompt("Enter your message:", "Type something here");
if (res === null) {
resultEle.innerHTML = "You pressed cancel";
} else if (res === "") {
resultEle.innerHTML = "You entered an empty string";
} else {
resultEle.innerHTML = "You entered: " + res;
}
});
</script>
</body>
</html>
Key Points
- prompt() is a blocking function that pauses JavaScript execution until user responds
- Always check for null return value to handle user cancellation
- Empty string ("") is returned when user clicks OK without entering text
- Modern web development often uses custom modal dialogs instead of prompt() for better user experience
- prompt() may be blocked by some browsers' pop-up blockers
Browser Compatibility
The prompt() method is supported in all modern browsers, but some browsers may show security warnings or block it in certain contexts. It's recommended to use custom input forms for production applications.
Conclusion
The prompt() method in JavaScript is a simple yet effective way to gather user input through dialog boxes. While useful for quick interactions and testing, modern applications typically use custom modal dialogs for better styling and user experience control.
861 Views
