Monday 3 September 2012

Confirm Dialog box with JavaScript


The Confirmbox has been used for prompt the input from user in form or two options Ok or Cancel, Yes or No etc. It is very useful in programming. i.e. When you save or update a record then a Messagebox has been appeared on screen and prompt his acceptance in form of two options yes or No. If user select Yes then It has been saved or Updated the record or if User select No then It has no make any changes. In HTML Form or aspx webpage, we are used the Javascript confirmbox.

To add a JavaScript ConfirmBox in your webpage, you will followed the below steps :

1. First Open a Text Editor and Type the following html codes :


<html>
<head>
<title>Confirm Box</title>
</head>
<body>
<button onclick="myFunction()">Click Here to Open a Confirmbox</button>
<br /><br /><br />
<input id="Text1" type="text" />
</body>
</html>

2. In above file, we create a Button and Textbox. Give the text to the button as 'Click Here to Open a Confirmbox' and give the id to textbox as 'Text1'. In Button we set a onclilck event. In which we give a function named "myFunction()". This is a Javascript function and used for give the confirmbox functionality.
3. Now we write a script in Bottom of this web page in which we give the functionality of confirmbox as follows :

<script type="text/javascript">
function myFunction() {
var x;
var r = confirm("Press any Button!");
if (r == true) {
x = "You pressed OK!";
}
else {
x = "You pressed Cancel!";
}
document.getElementById("Text1").value = x;
}
</script>

4. In above script a confirmbox which prompt to user "press any Button" and give to buttons 'Ok' or 'Cancel'. If user click on "Ok" button then a text "You pressed OK!" is show in textbox and either he click on "Cancel" Button then a text "You pressed Cancel!" is shown.

I have given an Example to illustrate this.












Please download the example as follows :

ConfirmBox

No comments:

Post a Comment

Note: only a member of this blog may post a comment.

Twitter Bird Gadget