Post
Ask Question

JavaScript Dialog Boxes

Introduction

 
In programming languages dialog is used to give a message to the user, to confirm some activity, or to get some values from the user. JavaScript also provides some dialog boxes. JavaScript language provides three types of dialog boxes:
  1. Alert Dialog Box
  2. Confirm Dialog Box
  3. Prompt Dialog Box

Alert Dialog Box

 
The alert dialog box used to give simple friendlier messages to the user. In some cases like in validation, we want to give users an error message or after some activity, we want to give a successful complete message to users, in these situations we can use an alert dialog box. To show the alert dialog box “alert ()” method is used. This method takes one argument, which is displayed as a message.
 
Alert box gives only one button “Ok” to select and proceed. 
 
Example
  1. <html>    
  2.     
  3. <head>    
  4.     <script type="text/javascript">    
  5.         function ShowMessage()     
  6.         {    
  7.             alert("This is a alert message!");    
  8.         }    
  9.     </script>    
  10. </head>    
  11.     
  12. <body>    
  13.     <form>    
  14.         <input type="button" value="Show Alert" onclick="ShowMessage();" />    
  15.     </form>    
  16. </body>    
  17.     
  18. </html>   
Output
 
 
output
 

Confirm Dialog Box

 
Confirm dialog box used to get users confirmation to proceed for some activities like to redirect to the next page or not. To show confirm dialog box “confirm ()” method is used. This method takes only one argument for the message to be displayed on the confirm box. Confirm box has two buttons “Ok” and “Cancel”. Confirm return true or false. If the user clicks the “OK” button, then confirm method returns true, and if the user clicks on “Cancel”, then it return false.
 
Example
  1. <html>    
  2.     
  3. <head>    
  4.     <script type="text/javascript">    
  5.         function ShowMessage()    
  6.         {    
  7.             var retVal = confirm("Do you want to continue ?");    
  8.             document.getElementById("Result").innerHTML =    
  9.                 retVal;    
  10.         }    
  11.     </script>    
  12. </head>    
  13.     
  14. <body>    
  15.     <form>    
  16.         <input type="button" value="Show Alert" onclick="ShowMessage();" />    
  17.         <p id="Result" style="font-size:30px"></p>    
  18.     </form>    
  19. </body>    
  20.     
  21. </html>   
In this example the result is shown in <p> element. Means the returned value of confirm box is displayed in <p> element.
 
Output
 
output
 
If the user clicks on “OK”, then confirm method return true as below.
 
output
 

Prompt Dialog Box

 
In many situations, we want to take inputs from the user, in this situation prompt dialog box is useful. This dialog box displayed with a textbox to get input from the user. This dialog box displayed using “prompt ()” method. This method takes two arguments, first is argument displayed as the label for input textbox and the second one is default string to be displayed in the input textbox. The prompt dialog box displayed with one textbox and two buttons “OK” and “Cancel”. If the user clicks “OK” the prompt method returns entered value, else if the user clicks “Cancel”, then it returns a null value.
 
Example
  1. <html>    
  2.     
  3. <head>    
  4.     <script type="text/javascript">    
  5.         function ShowMessage()    
  6.         {    
  7.             var retVal = prompt("Plese enter your name.");    
  8.             document.getElementById("Result").innerHTML =    
  9.                 retVal;    
  10.         }    
  11.     </script>    
  12. </head>    
  13.     
  14. <body>    
  15.     <form>    
  16.         <input type="button" value="Show Alert" onclick="ShowMessage();" />    
  17.         <p id="Result" style="font-size:30px"></p>    
  18.     </form>    
  19. </body>    
  20.     
  21. </html>   
In this example, we prompt for the user to enter the name and then the entered name is displayed in <p> element.
 
Output
 
output
 
If the user clicks on “OK”, then the name is displayed in <p> element.
 
output


Similar Articles