layui中的submit提交本地数据在控制在输出为空数组(解决)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>监听sublime提交按钮</title>
    <link rel="stylesheet" href="./layui/css/layui.css">
</head>
<body>
    <form class="layui-form" id="form">
        //添加文本框   name属性需要加上 可以自己定义
        <input type="text" name="title" class="layui-input">
        <input type="text" name="title" class="layui-input">
        <input type="text" name="title" class="layui-input">
        <button class="layui-btn" lay-submit lay-filter='sign'>提交</button>
    </form>
    <script src="./layui/layui.js"></script>
    <script>
        layui.use(["form",'jquery'],function(){
            var form = layui.form,
                $ = layui.jquery;
            //点击提交按钮
            form.on('submit(sign)',function(data){
                console.log(data.elem)
                // console.log(data.form)
                // 能够获取到form下input的所有的值 坑 只能得到最后一个文本框中的值
                console.log(data.field)
                // 能够获取到form下input的所有的值
                // .serializeArray()返回 JSON 数据结构数据
                console.log($("#form").serializeArray()) //输出文本框中的值 数组形式
                var form = $("#form").serializeArray()
                for(var i=0;i<form.length;i++){
                    console.log(form[i])
                    console.log(form[i].value)
                }
                return false; //用于页面跳转 如果需要跳转注释掉就行了
            })
        })
    </script>
</body>
</html>

posted on 2019-03-15 20:17  A-pupli  阅读(1108)  评论(0编辑  收藏  举报