Javascript Window prompt() Method
Last Updated :
21 Jun, 2025
The window.prompt() method in JavaScript is a built-in function that displays a dialog box prompting the user to input some text. This method is particularly useful for gathering simple user input in a straightforward manner.
Syntax
let result = window.prompt(message, defaultText);
In the above syntax
- message (optional): A string of text to display to the user.
- defaultText (optional): A string containing the default value displayed in the text input field.
- result: The value entered by the user, or null if the user clicks "Cancel" or dismisses the prompt.
Now let's understand this with the help of example:
HTML
<html>
<head>
<title>Prompt() method</title>
</head>
<body style="text-align: center">
<h2>Window prompt() Method</h2>
<button onclick="geek()">
Click me!
</button>
<p id="g"></p>
<script>
function geek() {
let doc = prompt(
"Please enter some text",
"GeeksforGeeks"
);
if (doc != null) {
document.getElementById(
"g"
).innerHTML =
"Welcome to " + doc;
}
}
</script>
</body>
</html>
Output:
Javascript Window prompt() Method Example OutputIn this example
- Button: When the user clicks the "Click me!" button, the function geek() is called.
- Prompt: A prompt appears asking the user to enter some text (default is "GeeksforGeeks").
- User Input: If the user enters text and clicks "OK", the message "Welcome to <user input>" is displayed. If the user clicks "Cancel", nothing is displayed.
window.prompt() with Default Text
The window.prompt() method can accept a default text as the second argument. This is the text that will appear in the input field when the prompt is displayed. It helps to guide the user by providing a suggestion or default value that they can either accept or modify.
Syntax
let result = prompt("Please enter your name:", "Jiya");
In the above syntax
- First argument: The message displayed to the user (e.g., "Please enter your name").
- Second argument (default text): The default value in the input field (e.g., "Jiya").
Now let's understand this with the help of example
HTML
<html>
<head>
<title>Prompt with Default Text</title>
</head>
<body style="text-align: center">
<h2>Prompt with Default Text Example</h2>
<button onclick="askUser()">Click Me!</button>
<p id="output"></p>
<script>
function askUser() {
let userName = prompt("Please enter your name:", "Guest");
if (userName != null && userName !== "") {
document.getElementById("output").innerHTML = `Hello, ${userName}!`;
}
else {
document.getElementById("output").innerHTML = "User canceled or didn't enter a name.";
}
}
</script>
</body>
</html>
Output
In this example
- The user clicks the "Click Me!" button, triggering the askUser() function.
- A prompt asks for the user's name, with "Guest" as the default text.
- If the user enters a name and clicks "OK", the message "Hello, <name>!" is displayed.
- If the user clicks "Cancel" or leaves it empty, the message "User canceled or didn't enter a name." is shown.
When using window.prompt() to collect input from the user, it's important to ensure that the input meets certain criteria. Input validation helps ensure the data collected is correct, complete, and useful.
HTML
<html>
<head>
<title>Email Validation</title>
</head>
<body style="text-align: center">
<h2>Enter Your Email Address</h2>
<button onclick="getEmail()">Submit</button>
<p id="output"></p>
<script>
function getEmail() {
let email = prompt("Please enter your email address:");
const emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
if (email != null && emailPattern.test(email)) {
document.getElementById("output").innerHTML = `Thank you! Your email is: ${email}`;
} else {
document.getElementById("output").innerHTML = "Please enter a valid email address.";
}
}
</script>
</body>
</html>
Output
In this example
- Button Click: When the user clicks the "Submit" button, it triggers the getEmail() function.
- Prompt: A prompt dialog asks the user to enter their email address.
- Email Validation: The email entered is validated using a regular expression to ensure it follows a correct email format (e.g., [email protected]).
Alternatives to prompt()
If the limitations of prompt() are a concern, you might want to consider other alternatives for better control over user input:
- Custom Modals: Use custom modal dialogs with HTML, CSS, and JavaScript. This approach allows you to create a more styled, interactive, and user-friendly prompt.
- HTML Forms: For more complex inputs, HTML forms provide a robust and accessible way to collect user data.
Purpose of the window.prompt() Method
The window.prompt() method is used in JavaScript to collect user input through a simple dialog box. It is often used for:
- Simple Data Collection: Collect small pieces of information like names, numbers, or simple text.
- User Interaction: Gather quick responses from the user without needing to create a full form.
- Confirmation: Get user input in situations where you need a quick decision (e.g., settings, preferences).
Note => The prompt() method returns the text entered by the user in the input field as a string. If the user cancels the dialog box, null is returned.
We have a complete list of HTML DOM methods, to check those please go through the DOM Complete Reference article.
Conclusion
The window.prompt() method is a simple way to collect user input in JavaScript, often used for gathering small pieces of data or user confirmations. While it offers basic features like default text and input validation, it has limitations such as blocking behavior and lack of customization. For more complex needs, alternatives like custom modals or HTML forms provide better control and flexibility.
Similar Reads
JavaScript Tutorial JavaScript is a programming language used to create dynamic content for websites. It is a lightweight, cross-platform, and single-threaded programming language. It's an interpreted language that executes code line by line, providing more flexibility.JavaScript on Client Side: On the client side, Jav
11 min read
Web Development Web development is the process of creating, building, and maintaining websites and web applications. It involves everything from web design to programming and database management. Web development is generally divided into three core areas: Frontend Development, Backend Development, and Full Stack De
5 min read
React Interview Questions and Answers React is an efficient, flexible, and open-source JavaScript library that allows developers to create simple, fast, and scalable web applications. Jordan Walke, a software engineer who was working for Facebook, created React. Developers with a JavaScript background can easily develop web applications
15+ min read
React Tutorial React is a powerful JavaScript library for building fast, scalable front-end applications. Created by Facebook, it's known for its component-based structure, single-page applications (SPAs), and virtual DOM,enabling efficient UI updates and a seamless user experience.Note: The latest stable version
7 min read
JavaScript Interview Questions and Answers JavaScript is the most used programming language for developing websites, web servers, mobile applications, and many other platforms. In Both Front-end and Back-end Interviews, JavaScript was asked, and its difficulty depends upon the on your profile and company. Here, we compiled 70+ JS Interview q
15+ min read
Domain Name System (DNS) DNS is a hierarchical and distributed naming system that translates domain names into IP addresses. When you type a domain name like www.geeksforgeeks.org into your browser, DNS ensures that the request reaches the correct server by resolving the domain to its corresponding IP address.Without DNS, w
8 min read
HTML Interview Questions and Answers HTML (HyperText Markup Language) is the foundational language for creating web pages and web applications. Whether you're a fresher or an experienced professional, preparing for an HTML interview requires a solid understanding of both basic and advanced concepts. Below is a curated list of 50+ HTML
14 min read
NodeJS Interview Questions and Answers NodeJS is one of the most popular runtime environments, known for its efficiency, scalability, and ability to handle asynchronous operations. It is built on Chromeâs V8 JavaScript engine for executing JavaScript code outside of a browser. It is extensively used by top companies such as LinkedIn, Net
15+ min read
Web Development Technologies Web development refers to building, creating, and maintaining websites. It includes aspects such as web design, web publishing, web programming, and database management. It is the creation of an application that works over the internet, i.e., websites.To better understand the foundation of web devel
7 min read
CSS Tutorial CSS stands for Cascading Style Sheets. It is a stylesheet language used to style and enhance website presentation. CSS is one of the three main components of a webpage, along with HTML and JavaScript.HTML adds Structure to a web page.JavaScript adds logic to it and CSS makes it visually appealing or
7 min read