Javascript 如何在提交前添加确认框

我是一个新的开发人员，我有一个问题。我想你能解决这个问题。我想在删除前显示确认框。这是我的Ajax代码，我如何做到这一点 HTML:

<input type='button' class="btn btn-danger delete_button" id="delete_button<?php echo $row->id;?>" value="delete" onclick="delete_row('<?php echo $row->id;?>');">

Wordpress PHP

function delete_form()
    {
        if(isset($_POST['delete_row']))         
        {
            $id=$_POST['row_id'];
            echo $row_no;
            global $wpdb;
            $table_name = "countries";
            $wpdb->delete($table_name, 
                        array( 'id' => $id ) );
            exit();
        }    
    }

add_action( 'wp_ajax_delete_form', 'delete_form' );
add_action('wp_ajax_nopriv_delete_form', 'delete_form');

试一试

试一试

---

您可以将confirbox放在ajax调用之前，请参见下面的代码

function delete_row(id)
{
if (confirm("Do you want to delete?") == true) {
 jQuery.ajax({
    type:'post',
    url: "/blue_bucket/wp-admin/admin-ajax.php?action=delete_form",  
    data:{
            delete_row:'delete_row',
            row_id:id,
        },
    success:function(response) {
        if(response=="success")
            {
            var row=document.getElementById("row"+id);
            row.parentNode.removeChild(row);
            }
            top.location.href="admin.php?page=data_list";
    }
 });
}
}

---

您可以将confirbox放在ajax调用之前，请参见下面的代码

function delete_row(id)
{
if (confirm("Do you want to delete?") == true) {
 jQuery.ajax({
    type:'post',
    url: "/blue_bucket/wp-admin/admin-ajax.php?action=delete_form",  
    data:{
            delete_row:'delete_row',
            row_id:id,
        },
    success:function(response) {
        if(response=="success")
            {
            var row=document.getElementById("row"+id);
            row.parentNode.removeChild(row);
            }
            top.location.href="admin.php?page=data_list";
    }
 });
}
}

---

将此作为第一行添加到delete_行（）：

---

将此作为第一行添加到delete_行（）：

---

看看这段代码，我有：

如果您在项目中使用引导（编辑-我刚刚注意到您是！：-D），只需遵循README.md！只需将一个类添加到要连接确认模式的按钮。如果没有，请查看实际代码，将HTML调整为任意值，并编辑javascript调用或弹出对话框：

(function($) {
    $.fn.extend({
        deleteConfirm: function(options)
        {
            var defaults =
            {
                heading: "Please confirm",
                body: 'Are you sure you wish to perform this action?',
                ok_text: 'Proceed',
                cancel_text: 'Back',
                log: false
            };

            options = $.extend(defaults,options);

            $('body').append('<div class="modal fade" id="bs-delete-confirm" tabindex="-1" role="dialog" aria-labelledby="bs-delete-confirm-label" aria-hidden="true"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button><h4 class="modal-title" id="bs-delete-confirm-label">Please confirm</h4></div><div id="bs-delete-confirm-body" class="modal-body"></div><div class="modal-footer"><a id="bs-delete-confirm-cancel" class="btn btn-default" data-dismiss="modal" aria-hidden="true"></a><a id="bs-delete-confirm-ok" class="btn btn-primary"></a></div></div></div></div>');

            $('#bs-delete-confirm-label').html(options.heading);
            $('#bs-delete-confirm-body').html(options.body);
            $('#bs-delete-confirm-cancel').html(options.cancel_text);
            $('#bs-delete-confirm-ok').html(options.ok_text);

            this.each(function() {
                $(this).on('click',function(e){
                  e.preventDefault();
                  link = $(this).prop('href');
                  $('#bs-delete-confirm-ok').prop('href',link);
                  $('#bs-delete-confirm').modal();
                  if(options.log == true){
                      console.log('Clicked link = ' + link);
                  }
                });
            });
        }
    });
})(jQuery); 

（函数（$）{
$.fn.extend({
deleteConfirm：功能（选项）
{
var默认值=
{
标题：“请确认”，
正文：“您确定要执行此操作吗？”，
ok_text:'继续'，
取消文本：“返回”，
日志：false
};
选项=$.extend（默认值，选项）；
$（'body'）。追加（'times；请确认'）；
$（'#bs delete confirm label'）.html（options.heading）；
$（'#bs delete confirm body'）.html（options.body）；
$（'#bs delete confirm cancel'）.html（options.cancel_text）；
$（'#bs delete confirm ok'）.html（options.ok_text）；
这个。每个（函数（）{
$（此）.on（'click'，函数（e）{
e、 预防默认值（）；
link=$（this.prop（'href'）；
$（'#bs delete confirm ok'）.prop（'href'，link）；
$（'bs delete confirm'）.modal（）；
如果（options.log==true）{
log（'Clicked link='+link）；
}
});
});
}
});
})（jQuery）；

看看这段代码我有：

如果您在项目中使用引导（编辑-我刚刚注意到您是！：-D），只需遵循README.md！只需将一个类添加到要连接确认模式的按钮。如果没有，请查看实际代码，将HTML调整为任意值，并编辑javascript调用或弹出对话框：

(function($) {
    $.fn.extend({
        deleteConfirm: function(options)
        {
            var defaults =
            {
                heading: "Please confirm",
                body: 'Are you sure you wish to perform this action?',
                ok_text: 'Proceed',
                cancel_text: 'Back',
                log: false
            };

            options = $.extend(defaults,options);

            $('body').append('<div class="modal fade" id="bs-delete-confirm" tabindex="-1" role="dialog" aria-labelledby="bs-delete-confirm-label" aria-hidden="true"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button><h4 class="modal-title" id="bs-delete-confirm-label">Please confirm</h4></div><div id="bs-delete-confirm-body" class="modal-body"></div><div class="modal-footer"><a id="bs-delete-confirm-cancel" class="btn btn-default" data-dismiss="modal" aria-hidden="true"></a><a id="bs-delete-confirm-ok" class="btn btn-primary"></a></div></div></div></div>');

            $('#bs-delete-confirm-label').html(options.heading);
            $('#bs-delete-confirm-body').html(options.body);
            $('#bs-delete-confirm-cancel').html(options.cancel_text);
            $('#bs-delete-confirm-ok').html(options.ok_text);

            this.each(function() {
                $(this).on('click',function(e){
                  e.preventDefault();
                  link = $(this).prop('href');
                  $('#bs-delete-confirm-ok').prop('href',link);
                  $('#bs-delete-confirm').modal();
                  if(options.log == true){
                      console.log('Clicked link = ' + link);
                  }
                });
            });
        }
    });
})(jQuery); 

（函数（$）{
$.fn.extend({
deleteConfirm：功能（选项）
{
var默认值=
{
标题：“请确认”，
正文：“您确定要执行此操作吗？”，
ok_text:'继续'，
取消文本：“返回”，
日志：false
};
选项=$.extend（默认值，选项）；
$（'body'）。追加（'times；请确认'）；
$（'#bs delete confirm label'）.html（options.heading）；
$（'#bs delete confirm body'）.html（options.body）；
$（'#bs delete confirm cancel'）.html（options.cancel_text）；
$（'#bs delete confirm ok'）.html（options.ok_text）；
这个。每个（函数（）{
$（此）.on（'click'，函数（e）{
e、 预防默认值（）；
link=$（this.prop（'href'）；
$（'#bs delete confirm ok'）.prop（'href'，link）；
$（'bs delete confirm'）.modal（）；
如果（options.log==true）{
log（'Clicked link='+link）；
}
});
});
}
});
})（jQuery）；

在发送ajax请求之前，使用confirm Box获得用户的确认在发送ajax请求之前，使用confirm Box获得用户的确认技术上正确，但我会使用

！确认

并尽早返回，这样整个过程就不会出现在

if

语句中。无论如何，如果条件为false，它将跳过所有代码并返回。我理解这一点，但它只是使代码看起来更干净，并且没有它不需要的另一层缩进：）技术上正确，但我会使用

！确认

并尽早返回，这样整个过程就不会出现在

if

语句中。无论如何，如果条件为false，它将跳过所有代码并返回我理解，但这只会使代码看起来更干净，并且不会有它不需要的另一层缩进：）

(function($) {
    $.fn.extend({
        deleteConfirm: function(options)
        {
            var defaults =
            {
                heading: "Please confirm",
                body: 'Are you sure you wish to perform this action?',
                ok_text: 'Proceed',
                cancel_text: 'Back',
                log: false
            };

            options = $.extend(defaults,options);

            $('body').append('<div class="modal fade" id="bs-delete-confirm" tabindex="-1" role="dialog" aria-labelledby="bs-delete-confirm-label" aria-hidden="true"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button><h4 class="modal-title" id="bs-delete-confirm-label">Please confirm</h4></div><div id="bs-delete-confirm-body" class="modal-body"></div><div class="modal-footer"><a id="bs-delete-confirm-cancel" class="btn btn-default" data-dismiss="modal" aria-hidden="true"></a><a id="bs-delete-confirm-ok" class="btn btn-primary"></a></div></div></div></div>');

            $('#bs-delete-confirm-label').html(options.heading);
            $('#bs-delete-confirm-body').html(options.body);
            $('#bs-delete-confirm-cancel').html(options.cancel_text);
            $('#bs-delete-confirm-ok').html(options.ok_text);

            this.each(function() {
                $(this).on('click',function(e){
                  e.preventDefault();
                  link = $(this).prop('href');
                  $('#bs-delete-confirm-ok').prop('href',link);
                  $('#bs-delete-confirm').modal();
                  if(options.log == true){
                      console.log('Clicked link = ' + link);
                  }
                });
            });
        }
    });
})(jQuery);