Home > Software > Programming > Javascript > HTML interface > Window messages

Window messages

Alan Campion - Sat, 18/02/2012 - 13:40 ( wiki )

Alert, prompt, and confirm message boxes (pop up windows)

Use alert, confirm, and prompt message boxes to obtain input from your user. The boxes are methods of the interface window object. Because the window object is at the top of the object hierarchy, you do not actually have to use the full name (for example, "window.alert()") of any of these message boxes, but it is a good idea to do so, because it helps you remember to which object they belong.

All three message boxes are modal, which means the user must respond to it before proceeding. Also, because they are modal only one instance of a message box can be open at any given time

alert.png Alert Message Box -

The alert method has one argument, the string of text you want to display to the user. The string is not HTML. The message box provides an OK button so the user can close it. You must close the message box before continuing. Click the button above for a demonstration of an alert box.

confirm.pngConfirm Message Box -

The confirm message box lets you ask the user a yes/no question, and gives the user the option of clicking either an OK button (true) or a Cancel button (false). The confirm method returns either true or false . Click the button above to test the confirm box. You must respond to it by clicking a button to proceed.

confirm.pngPrompt Message Box -

The prompt message box provides a text field in which the user can type an answer in response to your prompt. This box has an OK button and a Cancel button. If you provide a second string argument, the prompt message box displays that second string in the text field, as the default response. Otherwise, the default text is "<undefined>". Click the button above to test the prompt box.

Here is the javascript code for the three types of boxes which is placed within the <head> tags

codeView.png 
<script>
 function tstAlert()
 {
    window.alert("this is an alert box");
 }
        
 function tstConfirm()
 {
   var returnValue = window.confirm("Confirm box - OK or cancel");
   if (returnValue == true) 
     {alert("the returnValue is true - you clicked OK");}
   if (returnValue == false) 
     {alert("ReturnValue is false - you clicked cancel");}
 }
                          
 function tstPrompt()
 {
   //the format is prompt(message,defaultreply").
   //you must supply a default value even if you have none.
   var returnValue = window.prompt("Please enter your name","");
   window.alert("Hello " + returnValue);
 }
</script>

Create the following form to test the buttons

<form>
<input type="button" value = "alert button" onlick="tstAlert()" />
<input type="button" value = "confirm button" onlick="tstConfirm()" />
<input type="button" value = "confirm button" onlick="tstConfirm()" />
</form>
AttachmentSize
message.htm1.27 KB