jquery-确认-提交具有多个按钮的形式的单击按钮

Question

我使用的是这非常好的Jquery确认插件，问题是我对提交特定按钮的形式有问题，有多个按钮，我的代码在没有jquery-confirm插件的php side中工作得很好。它可以得到确切的按钮提交值，但我想得到确认之前提交。以下是我的设想：

我有两个删除提交按钮的单一形式，并与jquery-确认集成。当我单击特定的删除按钮(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>

Jquery代码：

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

到目前为止，我已经尝试过使用this.$target.closest('#messages').submit();，使用触发器(“点击”)，但它们没有像预期的那样工作。

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

有关更多细节，请参见我的小提琴：

Answer 1

我找到了一个解决办法，就是添加带有单击的message_id值的隐藏输入，所以现在一切都很好，在这里发布是为了防止其他人需要这样做：

$('.confirmation').confirm({
        content: 'Delete this message?',
        title: 'Please confirm',
        confirm: function(){
            $('<input>').attr('type','hidden').attr('name', 'message_id').attr('value', this.$target.val()).appendTo('form');
            $('#messages').submit();
        }
    });

Answer 2

试试这个方法。

$('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" );
                          });
                }
            });
        });