Confirm Box with yes and no options using javascript


Download Good Example

Sometimes we need to show Confirmation message to user with yes or no options…
Now we will learn about how to do this confirmation using javascript…
we can do this in different situations…
1.simple confirmation(alert)
2.with user choice we need to do the operation(confirm)
3.prompt user to enter something(prompt)

1.SimpleConfirmation(alert box)
we can use this alert box to display some simple message to user with ok button..
until user click on ok button browser won’t allow to next step…

2.ConfirmationBox with Yes and No options(confirm box)
we can use this confirm box to display confirmation to user
user need to select either yes or no, based on this user selection we can do different tasks…

3.promptbox with textbox(prompt box)
we can use this prompt box to simple data from the user…

I made an example with ticket booking in movie theatre…

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;

<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
<title></title>

<script language="javascript" type="text/javascript">
// <!CDATA[

    function MyFnBooking(image) {
        var x = document.getElementById(image);
        if (x.src.substring(x.src.lastIndexOf("https://chikkanti.files.wordpress.com/2012/08/red.jpg&quot;)) != "https://chikkanti.files.wordpress.com/2012/08/red.jpg&quot;) {
            if (confirm('Are you sure u want to book this seat..?')) {
                x.src = "https://chikkanti.files.wordpress.com/2012/08/green.jpg&quot;;
                var x = prompt('Enter Your Name');
                alert(x + " Your seat Confirmed..!");
            }
            else {
                alert("Thanks for visiting..!");
            }
        }
        else {
            alert("This seat is already Booked..!");
        }
    }
// ]]>
</script>
</head>
<body>
<table>
<tr><td><img id="imgSeat1" src="https://chikkanti.files.wordpress.com/2012/08/gray.jpg&quot; onclick="MyFnBooking(this.id)"/></td></tr></table>
</body>
</html>

How to use in asp.net

we can use onclientclick  to show this confirm box

<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head id="Head1" runat="server">
<title></title>
<script type="text/javascript" language="javascript">
    function MyFunction() {
        if (confirm('Are you sure u want to delete ?')) {
            return true;
        }
        else {
            return false;
        }
    }
    function MyFunctionToGoogle(GoogleURL) {
        if (confirm('Are you sure u want to go Google ?')) {
            alert(GoogleURL);
            window.location = "http://www.Google.com&quot;;

            return true;
        }
        else {
            return false;
        }
    }
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button ID="Button1" runat="server" Text="Click!" onclick="Button1_Click"
OnClientClick="return confirm('Are you sure u want to delete','?');"/>
<asp:Button ID="Button2" runat="server" Text="Click!" onclick="Button1_Click"
OnClientClick="if(!confirm('Are you sure u want to delete ?')){return false;}"/>
<asp:Button ID="Button3" runat="server" Text="Click!" onclick="Button1_Click"
OnClientClick="if(!MyFunction()){return false;}"/>
<asp:Button ID="Button4" runat="server" Text="Click!"
OnClientClick="if(!MyFunctionToGoogle('http://www.google.com&#039;)){return false;}"/>
</div>
</form>
</body>
</html>

Thanks

…………HappyCoding…….

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s