34

I'm showing a confirmation alert box through JavaScript:

function checked() {
 if (hdnval.toLowerCase() != textbox1.toLowerCase()) {
  var save = window.confirm('valid')
   if (save == true) 
   {
     return true;
   }
   else
    {
      return false;
    }
 }
}

The confirmation alert is showing with two buttons: OK and Cancel.

I want to show a third button in my confirmation alert. I want the three buttons to be like this: 'Yes' 'No' 'Cancel', as it shows in MS Word.

CRABOLO
  • 8,605
  • 39
  • 41
  • 68
Rocky
  • 4,454
  • 14
  • 64
  • 119
  • Pretty sure you don't have many options here. Also, how would 'No' be different from 'Cancel'? – Brian Driscoll Feb 01 '12 at 05:05
  • 1
    @BrianDriscoll: The OP probably wants to define custom logic for "No." For example, user clicks "Close": dialog says "Do you want to save your work before leaving?" Yes: save and close, No: close without saving, Cancel: leave the work open. – StriplingWarrior Feb 01 '12 at 05:10
  • @Brian Driscoll: StriplingWarrior is right, Yes means Save, No means don't save and go to other tab, cancel means don't save but stay in same page – Rocky Feb 01 '12 at 05:13
  • I am calling this javascript function many places in my application – Rocky Feb 01 '12 at 07:15

2 Answers2

41

This cannot be done with the native javascript dialog box, but a lot of javascript libraries include more flexible dialogs. You can use something like jQuery UI's dialog box for this.

See also these very similar questions:

Here's an example, as demonstrated in this jsFiddle:

<html><head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
    <link rel="stylesheet" type="text/css" href="/css/normalize.css">
    <link rel="stylesheet" type="text/css" href="/css/result-light.css">
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/base/jquery-ui.css">
</head>
<body>
    <a class="checked" href="http://www.google.com">Click here</a>
    <script type="text/javascript">

        $(function() {
            $('.checked').click(function(e) {
                e.preventDefault();
                var dialog = $('<p>Are you sure?</p>').dialog({
                    buttons: {
                        "Yes": function() {alert('you chose yes');},
                        "No":  function() {alert('you chose no');},
                        "Cancel":  function() {
                            alert('you chose cancel');
                            dialog.dialog('close');
                        }
                    }
                });
            });
        });

    </script>
</body><html>
Community
  • 1
  • 1
StriplingWarrior
  • 151,543
  • 27
  • 246
  • 315
  • I don't have knowledge in jquery will you please give some more demo expl. show that I could use jquery and could able to replace my code.. Please – Rocky Feb 01 '12 at 06:56
  • @Rocky: If I find time, I may provide a code sample, but the documentation for both jQuery and the jQuery UI dialog box are pretty clear. Check out the source code for the demo page I linked to. Use Google to find tutorials. I like helping when a few minutes' work on my part will save you hours of effort, but I'm not going to do all the work for you. – StriplingWarrior Feb 01 '12 at 16:38
  • @ StriplingWarrior: providing a bit for help and sample code would be much enough for me, rest all I could do if i'll get some idea, and thank you so much for ur reply and ans. – Rocky Feb 02 '12 at 06:11
  • Thank you so much, and suppose I want to return true or false then what I need to do? – Rocky Feb 03 '12 at 05:29
  • 1
    @Rocky: You now have a handler on each of the buttons that determines what will happen when they click "Yes" "No" or "Cancel". Use these handlers to actually make something happen depending on what the user clicks. Rather than returning `true` or `false` and having the calling function decide what to do in each case, you could have the calling function pass in callback functions to determine what should happen when the user clicks each button. – StriplingWarrior Feb 03 '12 at 16:17
  • @ StriplingWarrior: Thanks a lot, I solved my prob. by your exmp. – Rocky Feb 07 '12 at 12:49
35

If you don't want to use a separate JS library to create a custom control for that, you could use two confirm dialogs to do the checks:

if (confirm("Are you sure you want to quit?") ) {
    if (confirm("Save your work before leaving?") ) {
        // code here for save then leave (Yes)
    } else {
        //code here for no save but leave (No)
    }
} else {
    //code here for don't leave (Cancel)
}
David Millar
  • 1,858
  • 1
  • 14
  • 23