jquery-confirm - 提交带有多个按钮的表单中单击的按钮答案

【问题标题】：jquery-confirm - submit clicked button in form with multiple buttonsjquery-confirm - 提交带有多个按钮的表单中单击的按钮
【发布时间】：2016-09-17 07:05:09
【问题描述】：

我正在使用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>

jQuery 代码：

$('.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：

【问题讨论】：

所以你想只做一个按钮提示？
您能否详细说明一下当我点击特定的删除按钮（18）时，它会提交整个表单，我想要的只是允许提交的点击按钮跨度>
您可以通过单击删除按钮并确认来发布 jquery 代码吗？如果您的确认码之前是点击事件，请发布。
我想要的是仅在提交按钮时从 PHP 端获取提交按钮的值。当我单击特定的删除按钮（值 18）时，我可以在没有 jquery-confirm 插件的情况下捕获 $_POST['message_id'] value = 18。但是当我将 jquery-confirm 与 submit() 一起使用时，从 PHP 端它无法捕获任何 $_POST['message_id'] 值

标签： javascript jquery forms

【解决方案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 代码。

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

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

【讨论】：

嗨彼得，感谢您提供有用的答案，但我不想通过 $.post 或 $.ajax 过于复杂，只需在用户单击确定时进行简单确认，然后它将表单提交给 PHP边:)
您能否确认在我的答案中使用示例 A 时发布的内容？ @SonDang，我的意思是你能回应发布的内容吗？
我也尝试了您的第一个示例，但它也不起作用。但是我找到了一个解决方法是添加带有单击的 message_id 值的隐藏输入，然后一切正常:)

【解决方案2】：

我发现一种解决方法是使用单击的 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();
        }
    });

【讨论】：