Saturday, February 1, 2020

Learn about the various ways in which JavaScript can be used to create an alert, confirmation and prompt dialog boxes in this step by step guide


Hello guys evening and welcome to my new tutorial post on JavaScript. In my previous tutorial post, i talked about JavaScript Page redirection.

Now in this tutorial, am going to be talking about JavaScript dialog boxes. Kindly read through carefully and ask questions where you don't understand properly.

JavaScript supports three important types of dialog boxes. Theses dialog boxes can be used to raise an alert, or to get confirmation on any input, or to have a kind of input from the users. Here we will discuss each dialog box one by one.

Alert Dialog Box

An alert dialog box is mostly used to give a warming message to the users. For example, if one input field requires to enter some text buy the user does not provide any input, then as part of validation, you can use an alert box to give a warming message.

Nonetheless, an alert box can still be used for friendlier messages. Alert box gives only one button "OK" to select and proceed.

You can also check out our tutorial post on: JavaScript Events tutorial with examples

Example

<html>
     <head>
          <script  type = "text/Javascript">
               <!--
                    function  Warn() {
                         alert("This is a warning message!");
                         document.write("This is a warning message! ");       
                    }
               //-->
          </script>
     </head>

     <body>
          <p>Click the following button to see the result:</p>
          <form>
               <input  type = "button"  value = "ClickMe"  onclick = "Warn();" />    
          </form>
     </body>
</html>

Output

Below is the output of the above example.

Click the following button to see the result 

 

You can also read our tutorial post on: How to implement JavaScript functions in your program


Confirmation Dialog Box

A confirmation dialog box is mostly used to take user's consent on any option. It displays a dialog box with two buttons: OK and Cancel.

If the user clicks on OK button, the window method confirm() will return true. If the user clicks on the Cancel button, then confirm() returns false. You can use a confirmation dialog box as follows.

Example
<html>
     <head>
          <script  type = "text/Javascript">
               <!--
                    function getConfirmation() {
                         var retVal = confirm("Do you want to continue?");   
                         if ( retVal == true )  {
                             document.write ("User wants to continue!");
                             return true; 
                         }  else {U
                             document.write("User does not want to continue!");   
                             return false;
                         }
                  }
               //-->
          </script>
     </head>

     <body>
          <p>Click the following button to see the result: </p>
          <form>
               <input  type = "button"  value = "ClickMe"  onclick = "getConfirmation();" />    
          </form>
     </body>
</html>

Output
Below is output of the above example.

Click the following button to see the result 

 

You can also read our tutorial post on: JavaScript - Switch Case

Prompt Dialog Box
The prompt dialog box is very useful when you want to pop-up a text box to get user input. Thus, it enables you to interact with the user. The user needs to fill in the field and then click OK.

This dialog box is displayed using a method called prompt() which takes two parameters: (i) a label which you want to display in the text box and (ii) a default string to display in the text box.

This dialog box has two buttons: OK and Cancel. If the user clicks on the OK button, the window method prompt() will return the entered value from the text box. If the user clicks the Cancel button, the window method prompt() returns null.

Example
The following example shows how to use a prompt dialog box.

<html>
     <head>
          <script  type = "text/Javascript">
               <!--
                    function  getValue()  {
                         var  retVal = prompt("Enter your name : " , "your name here");    
                         document.write("You have entered : " + retVal ); 
                    }
               //-->
          </script>
     </head>

     <body>
          <p>Click the following button to see the result.</p>
          <form>
               <input  type = "button"  value = "ClickMe"  onclick = "getValue();" />
          </form>
     </body>
</html>

Output
Below is the output of the above example.

Click the following button to see the result 

 

Alright guys! we have come to the end of this tutorial post on JavaScript dialog boxes. In my next tutorial post, we will be discussing about JavaScript Void Keyword. 

Don't forget to ask your questions in areas you don't understand properly. Follow us on our various social media platforms, thanks for reading and bye for now.
Share:

0 comments:

Post a Comment

Hello dear readers! Please kindly try your best to make sure your comments comply with our comment policy guidelines. You can visit our comment policy page to view these guidelines which are clearly stated. Thank you.