Open In App

Javascript Window prompt() Method

Last Updated : 21 Jun, 2025
Summarize
Comments
Improve
Suggest changes
Share
Like Article
Like
Report

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:

WindowPrompt()
Javascript Window prompt() Method Example Output

In 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.

Validating User Input with window.prompt()

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