layui表单与原生js表单的一些小问题（一）

首先先说一下layui吧

在layui 的form表单中，我们可以通过监听按钮点击，获取到，当前表单中的所有key和value

例如：

需要各位自己去引入layui 的js和css咯
HTML代码：
<form class="layui-form" action="">
                    <div style="float: left;">
                        <input type="hidden" name='classs' class="ids" value="0"/>
                        <div class="layui-form-item inputs">
                            <div class="layui-inline">
                                <label class="layui-form-label">颜色</label>
                                <div class="layui-input-inline">
                                    <input  class="layui-input color" name="color" lay-verify="required|chinese" />
                                </div>
                            </div>
                        </div>
                    </div>
                    <div style="float: left;">
                        <div class="layui-form-item inputs">
                            <div class="layui-inline">
                                <label class="layui-form-label">尺寸</label>
                                <div class="layui-input-inline">
                                    <input  class="layui-input size" name="size" lay-verify="required|floating" />
                                </div>
                            </div>
                        </div>
                    </div>
                        <div class="layui-form-item inputs">
                            <div class="layui-inline">
                                <label class="layui-form-label">库存</label>
                                <div class="layui-input-inline">
                                    <input name="stock" class="layui-input stock" type="text" placeholder="库存" autocomplete="off" lay-verify="required|number">
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button class="layui-btn btn" lay-submit="" lay-filter="submits">确认添加</button>
                            </div>
                        </div>
                        <hr>
                </form>
Js代码：
layui.use([ 'form', 'layedit', 'laydate', 'upload', 'table','layer' ], function() {
                    form = layui.form, layer = layui.layer, layedit = layui.layedit, laydate = layui.laydate, upload = layui.upload, table = layui.table;

/*点击添加按钮*/
  　　 form.on('submit(submits)',function(data){
   　　 /*获取当前添加的表单数据key和value*/
   　　 console.log(data.field)
　  　})
})                

在原生js情况下，通过点击按钮获取到当前表单中的所有key和value：

例如：

这个不需要引入额外的js或者css，只需要jquery的js就可以了
HTML代码：
<form>
                <input type="hidden" name='classs' class="ids" value="0" />
                <div class="block" style="float: left;">
                    <label>颜色<label>
                    <input type="text" class="gb_color" name="gb_color" placeholder="颜色" />
                </div>
                <div class="block" style="float: left;">
                    <label>尺寸<label>
                    <input type="text" class="gb_size" name="gb_size" placeholder="尺寸" />
                </div>
                <div class="block" style="float: left;">
                    <label>库存<label>
                    <input type="text" class="gb_stock" name="gb_stock" placeholder="库存" />
                </div>
                <div class="block">
                    <input type="button" id="gb-submit" name="submit" value="添加按钮"/>
                </div><br>
            </form>
/*引入在线的jquery*/
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
　　　　　　　　　　/*3.获取到当前添加的值*/
                    var d = {};
                    var t = $('form').serializeArray();
                    $.each(t, function() {
                      d[this.name] = this.value;
                    });
　　　　　　　　　　console.log(d) //当前表单中添加的值，上面的这一块代码放到按钮的监听事件中去

</script>