Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Display Yes and No buttons instead of OK and Cancel in Confirm box? [duplicate]

Possible Duplicate:
how to create yes/no/cancel box in javascript instead of ok/cancel?

In a Confirm message box, how can I change the buttons to say "Yes" and "No" instead of "OK" and "Cancel"? Is there some way to accomplish this using jQuery/Javascript? Thanks in advance for any help.

like image 453
user300485 Avatar asked Jun 22 '11 20:06

user300485


People also ask

Can we change OK cancel on confirm box?

No, it is not possible to change the content of the buttons in the dialog displayed by the confirm function. You can use Javascript to create a dialog that looks similar.

Can we change Yes No Confirm box?

Create confirmation dialog with Yes and No buttonsThe confirmation dialog created using the confirm() method has no parameters for changing the button labels. You can't replace the OK and Cancel buttons because it's defined by the browser you are using.

Which popup boxes in Javascript displays a OK and Cancel button?

The confirm() function displays a popup message to the user with two buttons, OK and Cancel .

How many buttons are there in Confirm box?

The confirm box displays a dialog box with two buttons, OK and Cancel. When the user clicks on the OK button it returns true and when the user clicks on the Cancel button it returns false.


2 Answers

Create your own confirm box:

<div id="confirmBox">
    <div class="message"></div>
    <span class="yes">Yes</span>
    <span class="no">No</span>
</div>

Create your own confirm() method:

function doConfirm(msg, yesFn, noFn)
{
    var confirmBox = $("#confirmBox");
    confirmBox.find(".message").text(msg);
    confirmBox.find(".yes,.no").unbind().click(function()
    {
        confirmBox.hide();
    });
    confirmBox.find(".yes").click(yesFn);
    confirmBox.find(".no").click(noFn);
    confirmBox.show();
}

Call it by your code:

doConfirm("Are you sure?", function yes()
{
    form.submit();
}, function no()
{
    // do nothing
});

You'll need to add CSS to style and position your confirm box appropriately.

Working demo: jsfiddle.net/Xtreu

like image 132
gilly3 Avatar answered Oct 08 '22 21:10

gilly3


If you switch to the jQuery UI Dialog box, you can initialize the buttons array with the appropriate names like:

$("#id").dialog({
  buttons: {
    "Yes": function() {},
    "No": function() {}
  }
});
like image 22
Richard B Avatar answered Oct 08 '22 21:10

Richard B