Lecture 10 – JavaScript Dialog Boxes

There are three main types of dialog boxes in JavaScript. You can use these dialog boxes to seek any kind of information from the users, get confirmation or raise an alert. The following is a brief explanation of each type of dialog box.

Alert Dialog Box

Giving warnings to the users is the most common use of the alert dialog box. For example, if a user does not provide the necessary or mandatory information before submitting a form, you can display a warning message with the help the alert dialog box. This makes form or any other kind of validation a breeze.

However, you can use the alert dialog box for less threatening and pleasanter messages. You only get one button, Okay, with alert dialog box to dismiss the message or proceed. Here is an example for you.

<html>
   <head>   
      
         
            function Warn() {
               alert ("Please provide the required details!");
               document.write ("Please profide teh required details!");
            }
           
   </head>
   
   <body>
      <p>Click the button</p>      
      <form>
         <input type = "button" value = "Click Me" onclick = "Warn();" />
      </form>     
   </body>
</html>

You will get the following result when the code executes.

If you click the button, you will also get the warning message as shown in the following figure.

Confirmation Dialog Box

As the name suggest, the confirmation dialog box takes users’ opinion or consent regarding a certain problem or event. This dialog box comes with two different buttons that are Okay and Cancel.

The method confirm() will be true if someone clicks on the Okay button. However, it returns false if users clicks on the Cancel button. The example of a confirmation dialog box is as follows.

<html>
   <head>   
      
         
           
   </head>
   
   <body>
      <p>Click the following button </p>      
      <form>
         <input type = "button" value = "Click Me" onclick = "docConfirm();" />
      </form>      
   </body>
</html>

Now, you will get a dialog box if you click on the button. If you press Okay, it will display, “You want to continue” on the screen otherwise it will display, “You do not want to continue.”

Prompt Dialog Box

One of the best methods of getting user input or display a text box is to use the prompt dialog box. The user will have to fill in the blank fields on the box and click Okay.  

You can use the method prompt() to display the dialog box. Every prompt box has two buttons that are Okay and Cancel. Let us have a look at the following example.

<html>
   <head>     
      
        
            function boxPrompt() {
               var enterName = prompt("Enter your name : ", "your name here");
               document.write("You have entered : " + enterName);
            }
         
            
   </head>
   
   <body>
      <p>Click the following button</p>      
      <form>
         <input type = "button" value = "Click Me" onclick = "boxPrompt();" />
      </form>      
   </body>
</html>

The user will get a prompt box when it clicks the button. Subsequently, he will click Cancel to close the box or Okay to proceed further.

We have come to the end of this very basic JavaScript course. As usual, I recommend all of you to go for advanced JavaScript tutorials after completing this course. JavaScript is the most in demand programing language in the world.  Therefore, a complete mastery over JavaScript can open the doors to countless opportunities for you.