javascript - jquery-confirm - 以多个按钮的形式提交点击按钮

Question

我正在使用 this非常好的 Jquery 确认插件，问题是我在使用多个按钮的形式提交特定按钮时遇到问题，我的代码在没有 jquery-confirm 插件的 php side 中工作正常。它可以获得确切的按钮提交值，但我想在提交前得到确认。以下是我的场景:

我有 2 个单一形式的删除提交按钮，并与 jquery-confirm 集成。当我点击特定的删除按钮(18)时，它提交了整个表单，我想要的只是允许提交的点击按钮，下面是我的代码:

<form action="" method="POST" id="messages">
<button type="submit" name="message_id" value="18" class="btn btn-danger confirmation" >Delete</button>

<button type="submit" name="message_id" value="17" class="btn btn-danger confirmation" >Delete</button>
</form>

J查询代码:

$('.confirmation').confirm({
        content: 'Delete this message?',
        title: 'Please confirm',
        confirm: function(){
            $('#messages :submit').submit();
        }
    });

到目前为止，我已经尝试使用 this.$target.closest('#messages').submit(); 和 trigger('click') 但它们没有按预期工作.

如果我在 button 中添加 onclick="return confirm('Delete this message?');"，它将触发警报框并按预期提交所选按钮，而不是整个表单提交。我想要的是仅在提交按钮时从 PHP 端获取提交按钮的值。当我点击特定的删除按钮(值 18)时，我可以在没有 jquery-confirm 插件的情况下捕获 $_POST['message_id'] value = 18。但是当我将 jquery-confirm 与 submit() 一起使用时，从 PHP 端它无法捕获任何 $_POST['message_id'] 值。

查看我的 jsfiddle了解更多详情:

Answer 1

试试这个方法。

$('button[type=submit]').on('click',function(e){
e.preventDefault(); // prevent submit button from firing and submit form
var $this = $(this);   
$('.confirmation').confirm({
        content: 'Delete this message?',
        title: 'Please confirm',
        confirm: function(){
           $this.parent('form').submit(); // since user has confirmed action now submit form
        }
    });
});

或

创建一个小的 delete.php 文件，您可以在其中放置处理消息删除的 php 代码。

使用 jQuery post() 确认后提交您的数据。

    $('button[type=submit]').on('click',function(e){
        e.preventDefault(); // prevent submit button from firing and submit form
        var $this = $(this);   
        $('.confirmation').confirm({
                content: 'Delete this message?',
                title: 'Please confirm',
                confirm: function(){
                         $.post( "delete.php", { message_id: $this.val() })
                         .done(function() {
                          alert( "second success" );
                          })
                          .fail(function() {
                          alert( "error" );
                          });
                }
            });
        });