jquery-confirm 插件没有在 jquery-validation 中提交按钮 type="submit"？答案

【问题标题】：Jquery-confirm plugin doesn't submit button type="submit" inside jquery-validation?jquery-confirm 插件没有在 jquery-validation 中提交按钮 type="submit"？
【发布时间】：2018-05-27 11:57:33
【问题描述】：

我正在使用https://jqueryvalidation.org/ 插件和https://craftpip.github.io/jquery-confirm 插件。

我有这个脚本代码：

$("#form1").validate({
  submitHandler: function(form) {

            $.confirm({
                title: 'Confirm',
                content: 'Are you sure?',
                buttons: {
                    ok: {
                        text: "OK",
                        btnClass: 'btn-success',
                        action: function () {           
                            form.submit();
                        }
                    },
                    cancel: {
                        text: "Annulla",
                        action: function () {
                            }
                        }
                }
            });     


        }
);

和形式：

<form id="form1" name="form1" action="index.php" method="post">
  <input type="text" name="var1" value="1">
  <input type="text" name="var2" value="2">
  <input type="text" name="var3" value="3">
  <button type="submit" class="btn btn-info" value="edit" name="action">EDIT</button>
</form>

页面本身 index.php:

if ( isset($_POST['action']) && $_POST['action'] == "edit" ) {
   echo "EDITED";
   exit();
}

var_dump($_POST);

问题是按钮提交没有通过！！我不知道为什么。我的 var_dump 说有所有 3 个输入 type="text" 但不是按钮。

我尝试删除 jquery-confirm 并且没关系，所有输入和按钮类型提交都通过了：

$("#form1").validate({
  submitHandler: function(form) {
            form.submit();
        }
);

不知道怎么解决。我不知道如何使用 $_POST 和 PHP 使用 jsfiddle 发布示例。

【问题讨论】：

您的JS已经有语法错误，请复制并粘贴正确的代码。

标签： php jquery

【解决方案1】：

那是因为submit() 不包括提交按钮。您必须手动按下按钮的值。

一个关于如何做到这一点的例子：

$('document').ready(function() {
$("#form1").validate({
  submitHandler: function(form) {

            $.confirm({
                title: 'Confirm',
                content: 'Are you sure?',
                buttons: {
                    ok: {
                        text: "OK",
                        btnClass: 'btn-success',
                        action: function () { 
                            let variables = $('#form1').serializeArray();
                            variables.push({name: $('#form1 button').attr('name'), value: $('#form1 button').attr('value')})

                            // Perform custom XHR here ($.ajax) with `variables`

                        }
                    },
                    cancel: {
                        text: "Annulla",
                        action: function () {
                            }
                        }
                }
            });     


        }
});
});

https://jsfiddle.net/n2gwjvqd/2/

PS：缓存 jquery 选择器是有意义的

variables.push({name: $('#form1 button').attr('name'), value: $('#form1 button').attr('value')})

可能会变成

let button = $('#form1 button');
variables.push({name: button.attr('name'), value: button.attr('value')})

【讨论】：