JQuery confirm box to get user confirmation of action

Confirmation box can be show to the user to confirm the action. Before deleting or updating any records we may want user to remind again for the action.
We will display one dialog box with two options, Yes and No. Based on the user selection by pressing the buttons we can run different part of the script to complete the process.
Let us start with a simple confirmation box where user action is displayed as message.

Initialize the dialog box

We can manage different properties of the dialog box here.

$("#dialog-window").dialog({
        resizable: false,
        autoOpen: false,
        modal: true,
        title: "Confirm Box",
        height: 250,
        width: 400,
        buttons: {
            "Yes": function () {
                $(this).dialog('close');
                callback(true);
            },
                "No": function () {
                $(this).dialog('close');
                callback(false);
            }
        }
 });

Callback function

This is where we will execute our script based on the user choice. Any record deletion or updating action can be posted to backend script by using Load, GET or Post here.

function callback(value) {
 if (value) {
  $('#display').html('You clicked Yes button') 
 }// end of if (value )
else{
// code to execute if false
$('#display').html('You clicked No button') 
}
} // end of callback function

Opening the dialog box

Inside click function of the button we have kept our code to open the dialog box.

$("#b1").click(function(){
$("#dialog-window").html("Confirm to Submit ...");
$( "#dialog-window" ).dialog( "open" );
})

Full code you can get in above demo page.

This article is written by plus2net.com team.

plus2net.com

Most Popular JQuery Scripts
1	Two dependant list boxes
2	Calendar with Date Selection
3	Data change by Slider
4	Show & Hide element

Confirm Box for user choice in jQuery

Initialize the dialog box

Callback function

Opening the dialog box

Subscribe

1

2

3

4