首先先说一下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>