jquery-confrim使用，serializeArray()获取不到数据

最基本的增。

我想实现这样一个效果，当点击网页上的添加按钮后，在网页上弹出一个添加信息的 form，然后填写该 form，点击确认后把表单信息发送至服务器。

jquery-confrim 是一款对话框插件，可以实现在网页上弹出一个对话框，我再用 form 来填充这个对话框就可以完成上面的效果啦。

思路：

在 html 页面上写一个 form，并且设置为 隐藏，然后用 jquery-confrim 在弹出提示框的时候，用该 form 来填充。

隐藏可以这样写：

<form hidden>
</form>

先贴代码。

// 新增
function addJob() {
    $.confirm({
        type: 'dark',
        animationSpeed: 300,
        title: '手动添加 Job',
        content: $('.createDialog').html(),
        buttons: {
            confirm: {
                text: '确认',
               btnClass: 'waves-effect waves-button',
                action: function () {
                    $.ajax({
                        url:"/admin/addJob",
                        method:"post",
                        data : $(".dialog:last").serializeArray() ,
                        dataType:"json",
                        success:function(data){
                            if(data.state=="success"){
                                $.alert('新增成功');
                            }
                        },
                        error:function(){
                            $.alert('新增失败');
                        }
                    });
                },
            },
                cancel: {
                    text: '取消',
                    btnClass: 'waves-effect waves-button'
                }
            }

    });
}

假设我们的表单 id 为 addForm。

然后运行。

遇到一个大大问题：$("#addForm").serializeArray() 该代码一直执行不成功。

这行代码是为了序列化表单，即选取一个标签，把标签内部的表单元素序列化，返回 json 格式的数据。

折腾了好久，这一步得到的数据始终为空。

尝试直接用 document.getElementById().value，报错document.getElementById(...) is null。

这说明调用 js 的时候表单还没加载。

先看上面的代码，有这么一行。

content: $('.createDialog').html(),

这个的意思就是用 jquery-confrim 的时候，弹出的对话框用后面参数的内容来填充。

再审查这个对话框，原来这个插件把我之前隐藏的 form 复制了一份，贴在了网页的最后。

我之前想当然地以为它工作的方式是把隐藏的 form 直接展现出来…（想想也不可能）

我就以为是因为 js 出现在新的 form 的上面，所有 js 抓不到数据。

然而并不是这么回事。

## 原因

因为 jquery-confrim 复制了一份表单，那么现在网页上就有两个相同的表单了，所以就不能用$("#addForm").serializeArray() 这种方式。

因为$("#addForm") 会取到两个表单…

由此可见，给 form 定一个 id 也是不太合理的…

毕竟同一个id 在 html 内只能出现一次。

那就通过 class 来取。

data : $(".dialog:last").serializeArray() ,

这行代码的意思就是取最后一个表单的值序列化。

毕竟 jquery-confrim 新增的表单始终跟在网页最后（靠近</body>）。