Web Hosting by Netfirms | Free Domain Names by Netfirms

Using confirm

The easiest way to allow a user to confirm a process is with the confirm method of the window object. The confirm method is useful when a developer needs to get a true (yes) or false (no) answer from the user.

The following illustration gives the user a button to click on which will change the background color of the document to blue. However just before the color is changed the user is asked if they realy want to changed the color or not with the prompt method. If they click the yes button the color is changed otherwise the color is not changed and operation is cancelled. Run Code | View Code

Process

Getting the user's chose - the prompt method
Changing the background color of the document - set the bgColor property of the document to blue if the users choice is yes.
Function: getConfirmation

Events

The user presses the button - onclick event of the button defined in the body of the document.

Input

The string displayed on the dialog - "Are you sure you want to change the background color?"
The string on the face of the button - "Set background color to blue"
The boolean value that the dialog returns - yes

Event Trigger

The onclick event of the button in the document will call the getConfirmation function.

The Solution

Define the button element

<input type="button"> Set the value property of button to "Set background color to blue" to force the web browser to insert the message on the button's face. <input type="button" value="Set background color to blue"> Register the onclick event of the button <input type="button" value="Set background color to blue" onClick=""> Make the onClick event of the button call the getConfirmation function <input type="button" value="Set background color to blue" onClick= "getConfirmation()">

Define getConfirmation

Function analyses

The "getConfirmation" function is called as soon as the user clicks the change color button. The function first creates a local variable called "yes" then it runs the confirm method that creates a dialog window. (The application now freezes) After the dialog is closed (In one of the three ways) it returns "true" or "false" and inserts it into the "yes: variable. Then the next line is executed (because the dialog is disposed) which checks if the value of "yes" is "true". If it is "true" (it means the user clicked on the yes button and) the "bgColor" property of the document is set to blue which dynamically changes the background color of the web page. If the value of "yes" is false nothing is done.

Comments with code

function getConfirmation(){

Define the local variable yes var yes Show the dialog with the confirm method and pass it the string as it's value yes = confirm('Are you sure you want to change the background color?') Test if the returned value from the dialog is "true" if(yes){

Change the background color of the document to blue document.bgColor = "blue";

}

Important

Returned values of the prompt method
This "prompt" method displays a model dialog with yes and no buttons and a message on it. The message is a string value that is given to the method as the one and only parameter the method expects. The method returns "true" or "false" depending on what choice the user makes. In a normal situation the user can pick one of three choices, they can click the yes button, they can click the no button or they can close the dialog. If the user clicks the yes button the dialog returns "true". If the user clicks the no button or closes the dialog it returns "false". Once the user makes a decision and performs one of the three actions the dialog is closed and it returns a boolean value. The value should be checked to determine what choice the user made and wether the user agreed with the presented message or not.
The "bgColor" property is case sensitive
The background of the document in this example is changed to blue by changing the bgColor property of the document and setting it's value to "blue". As I remember in my early days of JavaScript it didn't work for me but I found out why after about three annoying hours. The "bgColor" property is case sensitive meaning that "Bgcolor" and "bgColor" are different. The web browser only understands "bgColor" so use that.

Run Code | View Code

JavaScript Tutorial Home