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丢到后台进行相关操作就可以了
layui表单提交的更多相关文章
- layui表单提交与ajax访问webapi
啊啊啊啊 这个东西实在很蛋疼啊 每次访问webapi就很老火 这里就一下 以后忘记的话就来查阅 不多说 直接开始 首先html页面 新建一个基于layui的form表单页面LayuiForm.csh ...
- LayUI表单提交不走ajax原因
在使用layui的时候.遇到一个问题.提交表单,没有走ajax,直接提交了表单页面. 原因是因为JQuery未引入 解决办法.引入JQuery或者使用layui自带Jquery var $ = lay ...
- layui表单提交使用form.on('submit(sub)',function (){}) 使用ajax请求时回调不执行的原因及解决方法
ayui使用官方的表单模块form.on('submit(sub)',function (){}) 提交,使用ajax请求向后台请求一个执行结果,根据结果进行处理,出现回调无法执行,并且页面出现了刷新 ...
- 20181019 记录 window.setTimeout('dofunction()',2000); - layui form 表单提交 事件 - F11全屏 事件 window.onresize
1 延时事件 window.setTimeout('dofunction()',2000); 函数外面要有引号 如果没有引号 就不能延时执行 应该是内容进行eval,所以外层不是传递字符串的话,外层函 ...
- layui框架实现多图片手动上传和随表单提交方法
首先在官方文档并没有手动上传的说明文档,这里手动实现上传原理是:在表单中有三个按钮,分别是上传图片按钮.隐藏上传按钮.表单提交按钮,点击上传图片按钮之后,图片添加在前端但是并没有真正的上传,而是在点击 ...
- 解决layui表单ajax提交回调函数不起作用问题的两种方式
最近想用layui开发一个论坛模板用的是fly-ui,才接触layui对其还不太熟悉.一个简单的登录就困扰了我很久.登录的form通过ajax提交回调函数老是不起作用.经过浪费了N多时间的调试,发现l ...
- layui+tp5表单提交回调
layui 前段页面form表单提交数据如果监听表单提交 ,tp5后台操作完成后使用 $this->success('success'); 后前端的页面不会出现layui的layer弹窗提示su ...
- Layui form表单提交注意事项
// 表单提交form.on('submit(first1)', function (data) { var articleFrom = data.field; $.ajax({ type:" ...
- layui表单验证
layui表单元素的校验只需在元素上加入lay-verify,layui提供了以下值. required(必填项) phone(手机号) email(邮箱) url(网址) number(数字) da ...
随机推荐
- MLHPC 2018 | Aluminum: An Asynchronous, GPU-Aware Communication Library Optimized for Large-Scale Training of Deep Neural Networks on HPC Systems
这篇文章主要介绍了一个名为Aluminum通信库,在这个库中主要针对Allreduce做了一些关于计算通信重叠以及针对延迟的优化,以加速分布式深度学习训练过程. 分布式训练的通信需求 通信何时发生 一 ...
- Java死锁编码及定位分析的demo
死锁 死锁是什么 大学课程中的四个要素: (1)互斥(2)不可抢占(3)循环等待(4)请求保持 也就是下图所描述 产生死锁的主要原因 (1)系统资源不足(2)进程运行推进的顺序不合适(3)资源分配不当 ...
- Python：MySQL数据库环境相关问题
系统环境 Ubuntu 16.04.2 LTS mysql Ver 14.14 Distrib 5.7.18, for Linux (x86_64) using EditLine wrapper P ...
- 多测师讲解接口测试 _HTTP常见的状态码归纳_高级讲师肖sir
100 Continue 初始的请求已经接受,客户应当继续发送请求的其余部分 101 Switching Protocols 服务器将遵从客户的请求转换到另外一种协议 200 OK 一切正常,对 ...
- Rust之路（2）——数据类型 上篇
[未经书面同意,严禁转载] -- 2020-10-13 -- Rust是系统编程语言.什么意思呢?其主要领域是编写贴近操作系统的软件,文件操作.办公工具.网络系统,日常用的各种客户端.浏览器.记事本. ...
- 在Jenkins容器中安装docker-compose
首先使用Docker容器安装Jenkins 链接参考 安装成功后使用管理员权限进入到Jenkins容器 docker exec -it -u root jenkins bash 下载docker-co ...
- day43 Pyhton 并发编程06
一.内容回顾 线程 锁 为什么有了GIL之后还需要锁 多个线程同时操作全局变量还需要锁 当出现'非原子性操作',例如+= -= *= /= l.append(l) 原子性操作 a += 1 a= a ...
- localStorage使用小结
一.什么是localStorage.sessionStorage 在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的,解决了cookie存储空间不足的问题 ...
- Git 高级用法，你会了吗？
请注意我有意跳过了 git commit.git pull/push 之类的基本命令,这份小抄的主题是 git 的一些「高级」用法. 导航 -- 跳到之前的分支 git checkout - 查看历史 ...
- 最大子段和之M子段和
最大M子段和 题目模型 N个整数组成的序列 \(a_1,a_2,a_3,-,a_n\) ,将这N个数划分为互不相交的M个子段,并且这M个子段的和是最大的. 问题分析 方法一: 看到序列,我们首先要尝试 ...