The prompt function in JavaScript serves to present a dialog box that requests input from the user. It is typically utilized to gather information from the user prior to navigating the webpage. This function can be invoked without the need for the window prefix. When the prompt dialog appears, the user must select either "OK" or "Cancel" to continue.
The prompt function is utilized to show a dialog box that requires user input, taking two parameters: The initial parameter is the message that is shown within the text box, while the second parameter is the default value that appears in the text box. The prompt dialog features two buttons: OK and Cancel. It either returns null or the value that the user has input. If the user selects "OK," the function yields the entered string. Conversely, if "Cancel" is clicked, it will return null.
The prompt dialog captures the user's attention and compels them to acknowledge the designated message. Therefore, it is advisable to refrain from excessive use of this technique, as it restricts the user's ability to interact with other sections of the webpage until they dismiss the dialog.
Syntax
prompt(message, default)
Values
The values of the parameters for this function are specified in the following manner.
message: This parameter is optional. It represents the text that is presented to the user. If there is no need to display any content in the prompt, we can choose to leave this value out.
default: This parameter is optional as well. It is represented as a string that holds the default value shown within the textbox.
Let us examine a few instances of utilizing the JavaScript prompt function.
Example1
In this illustration, we have a straightforward prompt dialog that showcases a message along with two buttons labeled (OK and Cancel). An HTML button is provided, which serves the purpose of triggering the prompt dialog. We implement the onclick attribute to invoke the fun function, within which the prompt function is defined.
<html>
<head>
<script type = "text/javascript">
function fun() {
prompt ("This is a prompt box", "Hello world");
}
</script>
</head>
<body>
<p> Click the following button to see the effect </p>
<form>
<input type = "button" value = "Click me" onclick = "fun();" />
</form>
</body>
</html>
Output
Upon running the code presented above, the resulting output will be -
Upon selecting the "Click me" button, the resulting output will be -
Example2
Here is yet another illustration of employing the prompt method.
<!DOCTYPE html>
<html>
<head>
<title>
JavaScript prompt() method
</title>
<script>
function fun() {
var a = prompt("Enter some text", "the logic-practice.com");
if (a != null) {
document.getElementById("para").innerHTML = "Welcome to " + a;
}
}
</script>
</head>
<body style = "text-align: center;">
<h1 style = "color: red;">
Hello World
</h1>
<h2>
Example of the JavaScript prompt() method
</h2>
<button onclick = "fun()">
Click me
</button>
<p id = "para"></p>
</body>
</html>
Output
Upon the completion of executing the aforementioned code, the resultant output will be -
Upon pressing the Click me button, the resulting output will be -
Upon selecting the OK button, the result will be -
Example3
In this illustration, a prompt dialog appears featuring a message along with buttons. In this case, we incorporate line breaks within the message of the dialog. These line breaks are implemented using the '\n' character. The inclusion of line breaks enhances the readability and clarity of the message. To observe the effect, we need to click on the specified button.
<html>
<head>
<script type = "text/javascript">
function fun() {
prompt(" Hello World \n Welcome to the logic-practice.com \n This is a prompt box ");
}
</script>
</head>
<body>
<p> Click the following button to see the effect </p>
<form>
<input type = "button" value = "Click me" onclick = "fun();" />
</form>
</body>
</html>
Output
Upon executing the code provided above and selecting the "Click me" button, the resulting output will be -