zoukankan      html  css  js  c++  java
  • layui表单提交

    关于layui表单提交  只是简单用一个文本框记录一下提交过程    其他的如下拉框选择框样式可以参考官网

    下面直接开始。首

    一:前台页面

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <title></title>
    <link href="../layui/css/layui.css" rel="stylesheet" />
    <script src="../layui/layui.js"></script>
    <script src="../layui/jquery-3.3.1.js"></script>
    </head>
    <body>
    <form class="layui-form" action="">
    <div class="layui-form-item">
    <label class="layui-form-label">输入框</label>
    <div class="layui-input-block">
    <input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
    </div>
    </div>
    <div class="layui-form-item">
    <label class="layui-form-label">密码框</label>
    <div class="layui-input-inline">
    <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
    </div>
    <div class="layui-form-mid layui-word-aux">辅助文字</div>
    </div>
    <div class="layui-form-item">
    <label class="layui-form-label">选择框</label>
    <div class="layui-input-block">
    <select name="city" lay-verify="required">
    <option value=""></option>
    <option value="0">北京</option>
    <option value="1">上海</option>
    <option value="2">广州</option>
    <option value="3">深圳</option>
    <option value="4">杭州</option>
    </select>
    </div>
    </div>
    <div class="layui-form-item">
    <label class="layui-form-label">复选框</label>
    <div class="layui-input-block">
    <input type="checkbox" name="like[write]" title="写作">
    <input type="checkbox" name="like[read]" title="阅读" checked>
    <input type="checkbox" name="like[dai]" title="发呆">
    </div>
    </div>
    <div class="layui-form-item">
    <label class="layui-form-label">开关</label>
    <div class="layui-input-block">
    <input type="checkbox" name="switch" lay-skin="switch">
    </div>
    </div>
    <div class="layui-form-item">
    <label class="layui-form-label">单选框</label>
    <div class="layui-input-block">
    <input type="radio" name="sex" value="男" title="男">
    <input type="radio" name="sex" value="女" title="女" checked>
    </div>
    </div>
    <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">文本域</label>
    <div class="layui-input-block">
    <textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>
    </div>
    </div>
    <div class="layui-form-item">
    <div class="layui-input-block">
    <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    <button class="layui-btn" lay-submit lay-filter="save">保存</button>
    </div>
    </div>
    </form>

    <script>
    //Demo
    layui.use('form', function(){
    var form = layui.form;

    //监听提交
    form.on('submit(formDemo)', function (data) {
    data.field.state = 1;
    layer.msg(JSON.stringify(data.field));
    return false;
    });
    //监听保存
    form.on('submit(save)', function (data) {
    data.field.state = 0;
    layer.msg(JSON.stringify(data.field));
    return false;
    });

    });
    </script>
    </body>
    </html>

    老方法  考的你的html编辑器就可以用了 可以看到数据前台已经拿到了 接下来只需要ajax丢到后台进行相关操作就可以了 

  • 相关阅读:
    MongoDB学习总结(二) —— 基本操作命令(增删改查)
    C#连接SQLite数据库方法
    第一章 算法在计算中的作用
    VS2010学习笔记
    centos+docker+jenkins
    git一些简单运用
    centos7 cannot find a valid baseurl for repo
    https://mirrors.ustc.edu.cn/dockerce/linux/centos/dockerce/repodata/repomd.xml:HTTPS Error 404 Not Found
    python路径相关处理
    python的excel处理之openpyxl
  • 原文地址:https://www.cnblogs.com/yagamilight/p/9949243.html
Copyright © 2011-2022 走看看