zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    JS之四舍五入有小数点
    c# table 怎么在前台循环展示 ViewBag
    c# ajax从后台获取数据list数组 $.each再显示数据
    c# 快捷键
    c#_导出table功能
    c# 缓存详解
    c# url链接转成二维码图片,再转成byte[]二进制流,输出到前段ajax
    JS ajax 返回的json对象 新增属性值(干货)
    tomcat配置HTTPS
    zookeeper集群安装
  • 原文地址:https://www.cnblogs.com/a973692898/p/13391792.html
Copyright © 2011-2022 走看看