Confirmation Box
A JavaScript confirmation box is the same as an alert box. It is a way to prompt your users to explicitly confirm an action. It supplies the user with a choice; they can either press "Ok" to confirm the popup's message or they can press "Cancel" and not agree to the popup's request.
Function
function ShowConfirm()
{
var confrm = confirm("Are you sure you want to do that?");
var status = document.getElementById("content");
if (confrm == true)
{
status.innerHTML = "You confirmed, thanks";
}
else
{
status.innerHTML = "You cancelled the action";
}
}
Prompt Box
A JavaScript prompt box is used to obtain a value from the user. You can use this to prompt a user for their password before continuing with a secure action. A Prompt Box also has "Ok" and "Cancel" buttons. If the user clicks on the "Ok" button then the window method prompt() will return the value from the TextBox entered by the user. If the user clicks on the "Cancel" button then the window method prompt() returns null.
Function
function ShowPrompt()
{
var promptValue = prompt('Enter any value in below', '');
if (promptValue != null)
{
document.getElementById("content").innerHTML = "Prompt Box value ->" + promptValue;
}
else
{
document.getElementById("content").innerText = "You cancel Prompt Box";
}
}
The following example shows how to display popup boxes in JavaScript.
Complete Program
Confirm_Prompt_PopupDemo.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
function ShowConfirm()
{
var confrm = confirm("Are you sure you want to do that?");
var status = document.getElementById("content");
if (confrm == true)
{
status.innerHTML = "You confirmed, thanks";
}
else
{
status.innerHTML = "You cancelled the action";
}
}
function ShowPrompt()
{
var promptValue = prompt('Enter any value in below', '');
if (promptValue != null)
{
document.getElementById("content").innerHTML = "Prompt Box value ->" + promptValue;
}
else
{
document.getElementById("content").innerText = "You cancel Prompt Box";
}
}
</script>
</head>
<body>
<p>
<input id="Button1" type="button" value="Show Confirm Box" onclick="ShowConfirm()" />
<input id="Button2" type="button" value="Show Prompt Box" onclick="ShowPrompt()" /></p>
<div id="content" style="width: 339px; height: 273px">
</div>
</body>
</html>
Output
![Animation2.gif]()
For more information, download the attached sample application.