解决Layui 表单提交数据为空的问题


Posted in Javascript onAugust 15, 2018

坑的外观

最近用了一段时间Layui作为项目后台管理模块的前端框架,感觉还是挺好用的。

今天踩了个坑,就是使用layui表单提交时,提交的数据为空。

例如,layer.msg(JSON.stringify(data.field));这句代码执行后,页面显示为空对象。

<form class="layui-form" action="">
 <div class="layui-form-item">
  <label class="layui-form-label">输入框</label>
  <div class="layui-input-block">
   <input type="text" id="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
  </div>
 </div>
</form>

layui.use('form', function(){
 var form = layui.form;

 //监听提交
 form.on('submit(formDemo)', function(data){
  layer.msg(JSON.stringify(data.field));//此处显示输入内容
  return false;
 });
});

坑的原因

想了半天都没弄明白,最后仔细对比了示例源码和自己的代码,原来是人家Layui提交表单时是按元素的name和value准备数据的,而我为了使用jQuey处理元素方便,把name改为id。

就是这个:<input type="text" id="title"

改为<input type="text" id="title" name="title"后,问题解决。

以上这篇解决Layui 表单提交数据为空的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Mootools 1.2教程 正则表达式
Sep 15 Javascript
jQuery判断密码强度实现思路及代码
Apr 24 Javascript
JQuery页面的表格数据的增加与分页的实现
Dec 10 Javascript
js 异步操作回调函数如何控制执行顺序
Dec 24 Javascript
js实现按Ctrl+Enter发送效果
Sep 18 Javascript
javascript三种代码注释方法
Jun 02 Javascript
jQuery中的一些小技巧
Jan 18 Javascript
详解webpack4.x之搭建前端开发环境
Mar 28 Javascript
javascript实现手动点赞效果
Apr 09 Javascript
electron-vue利用webpack打包实现多页面的入口文件问题
May 12 Javascript
Vue-cli3生成的Vue项目加载Mxgraph方法示例
May 31 Javascript
微信小程序实现可长按移动控件
Nov 01 Javascript
jQuery轮播图实例详解
Aug 15 #jQuery
JS实现获取毫秒值及转换成年月日时分秒的方法
Aug 15 #Javascript
对layui中表单元素的使用详解
Aug 15 #Javascript
layui中使用jquery控制radio选中事件的示例代码
Aug 15 #jQuery
vue生命周期实例小结
Aug 15 #Javascript
layui获取多选框中的值方法
Aug 15 #Javascript
layui radio性别单选框赋值方法
Aug 15 #Javascript
You might like
PHP4实际应用经验篇(9)
2006/10/09 PHP
PHP 文件上传功能实现代码
2009/06/24 PHP
PHP登录环节防止sql注入的方法浅析
2014/06/30 PHP
PHP数组操作类实例
2015/07/11 PHP
CI框架整合widget(页面格局)的方法
2016/05/17 PHP
一个简单的php路由类
2016/05/29 PHP
php使用parse_str实现查询字符串解析到变量中的方法
2017/02/17 PHP
PHP判断一个变量是否为整数、正整数的方法示例
2019/09/11 PHP
收藏Javascript中常用的55个经典技巧
2007/08/12 Javascript
javascript json 新手入门文档
2009/12/03 Javascript
使用原生javascript创建通用表单验证——更锋利的使用dom对象
2011/09/13 Javascript
Javascript中各种trim的实现详细解析
2013/12/10 Javascript
JavaScript fontcolor方法入门实例(按照指定的颜色来显示字符串)
2014/10/17 Javascript
最流行的Node.js精简型和全栈型开发框架介绍
2015/02/26 Javascript
javascript实现在指定元素中垂直水平居中
2015/09/13 Javascript
浅谈Javascript数据属性与访问器属性
2016/07/26 Javascript
Nodejs+Socket.io实现通讯实例代码
2017/02/13 NodeJs
详解微信小程序 相对定位和绝对定位
2017/05/11 Javascript
Vue+Element使用富文本编辑器的示例代码
2017/08/14 Javascript
基于js 字符串indexof与search方法的区别(详解)
2017/12/04 Javascript
Node.js 使用request模块下载文件的实例
2018/09/05 Javascript
vue.js 实现点击按钮动态添加li的方法
2018/09/07 Javascript
python多线程编程中的join函数使用心得
2014/09/02 Python
在python 中实现运行多条shell命令
2019/01/07 Python
python实现控制台打印的方法
2019/01/12 Python
pandas dataframe的合并实现(append, merge, concat)
2019/06/24 Python
python调用Matplotlib绘制分布点图
2019/10/18 Python
Python系统公网私网流量监控实现流程
2020/11/23 Python
python飞机大战游戏实例讲解
2020/12/04 Python
详解Html5中video标签那些属性和方法
2019/07/01 HTML / CSS
个人承诺书怎么写
2014/05/24 职场文书
计算机网络及管理学专业求职信
2014/06/05 职场文书
农村婚礼司仪主持词
2015/06/29 职场文书
父亲节感言
2015/08/03 职场文书
四则混合运算教学反思
2016/02/23 职场文书
房屋转让协议书(标准范本)
2016/03/21 职场文书