Friday 17 January 2014

Javascript : Understanding Dailog boxes

JavaScript supports three types of dialog boxes. 
Dialog box are very useful to throw a kind of message or alert to user
or to get confirmation on any input or to have a kind of input from the users.

Alert Dialog Box:

An alert dialog box is mostly used to give a warning message to the users.
one input field requires to enter some text but user does not
enter that field then as a part of validation you can use alert box to
give warning message as follows:

<head>
<script type="text/javascript">

   alert("Warning !!");

</script>
</head>
Alert box gives only one button "OK" to select and proceed.

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 confirm() returns false.

<head>
<script type="text/javascript">

   var Val = confirm("Do you want to continue ?");
   if( Val == true ){
      alert("User wants to continue!");
 return true;
   }else{
      alert("User does not want to continue!");
 return false;
   }

</script>
</head>
To understand it in better way you can Try it yourself.

Prompt Dialog Box:

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

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

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

<head>
<script type="text/javascript">
   var Val = prompt("Enter your name : ", "your name");
   alert("You have entered : " +  Val );
</script>
</head>

No comments:

Post a Comment