解决LayUI表单获取不到data的问题

2024-12-01 13:35:16

前几天用LayUI表单进行AJAX提交的时候发现,function(data)里的data始终无法获取表单里填的值，当时我认为是出BUG了就用了$('#updateform').serialize()来获取表单数据

 	   //form表单 更新员工信息
	 	form.on('submit(form_emp2)', function(data){
			var temp=$('#updateform').serialize();
   // layer.msg(JSON.stringify($('#form1').serialize()));
   // alert(JSON.stringify(temp));
  // return false;
	 		$.ajax({
	 			url:'<%=basePath%>employ/updateEmployee',
	 			type:'POST',
	 			data:temp,
	 			dataType:'JSON',
	 			success:function(rs)
	 			{
	 				if(rs.code=='10000')
	 				{
	 					layer.msg('更新成功');
	 				 $('.employpage').jsGrid("loadData");
	 				  layer.close(openid);
	 				  openid=null;
	 				}
	 				else
	 				{
	 					layer.msg('更新失败');
	 				}
	 			},
	 			error:function()
	 			{
	 				layer.msg("test")
	 			}
	 		});

	 	 return false;

	 	 });

但是今天问题又来了，我发现我的LayUI表单想要添加一个不能为空的验证居然添加不上去，我的input 如下:

<input name="depName" id="departName" placeholder="请输入所在部门" required lay-verify="required" class="layui-input" onclick="showDep();" ></input>

由此我想到了前几天的获取不到data的事情，考虑到可能有所关联，于是又开始了研究。后来终于发现原因是我的form表单缺少了class="layui-form"

LayUI 是根据class来查找form表单的，缺少了这个class 自然data就获取不到了。

以上这篇解决LayUI表单获取不到data的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

Layui table 组件的使用之初始化加载数据、数据刷新表格、传参数

背景笔者之前一直使用 bootstrap table ,因为当前项目中主要使用 Layui 框架,于是也就随了 Layui table ,只是在使用的时候出现了一些问题,当然也是怪自己不熟悉的锅吧! 出现的问题: 1.使用 Layui 官方提供的 [转换静态表格] 方式初始化加载时报 id 找不到的错误(自己的锅) 2.传递参数问题(姑且算是 Layui 官方的锅) 笔者使用的 table 加载刷新方案有一个页面,左侧是一个 tree,右侧是一个 table,默认 table 加载全数据,当
layui.js实现的表单验证功能示例

本文实例讲述了layui.js实现的表单验证功能.分享给大家供大家参考,具体如下: 该示例可针对文本框,手机,邮箱,textarea等格式进行验证首先引入如下文件: <script src="layui/layui.js"></script> <script src="layui/lay/dest/layui.all.js"></script> <link rel="stylesheet"
解决layui前端框架 form表单,table表等内置控件不显示的问题

使用form表单前需要声明, table表格也是类似原理以上这篇解决layui前端框架 form表单,table表等内置控件不显示的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.
解决Layui 表单提交数据为空的问题

坑的外观最近用了一段时间Layui作为项目后台管理模块的前端框架,感觉还是挺好用的. 今天踩了个坑,就是使用layui表单提交时,提交的数据为空. 例如,layer.msg(JSON.stringify(data.field));这句代码执行后,页面显示为空对象. <form class="layui-form" action=""> <div class="layui-form-item"> <label cla
解决LayUI表单获取不到data的问题

前几天用LayUI表单进行AJAX提交的时候发现,function(data)里的data始终无法获取表单里填的值,当时我认为是出BUG了就用了$('#updateform').serialize()来获取表单数据 //form表单更新员工信息 form.on('submit(form_emp2)', function(data){ var temp=$('#updateform').serialize(); // layer.msg(JSON.stringify($('#form1').se
解决layui 表单元素radio不显示渲染的问题

最近一直在使用layui,一个对程序员相对友好的前端框架,很多效果都进行了初步的封装. 在使用过程中遇到最多的问题就是引用的问题,各种模板无法使用,虽然都一一百度解决. 本次需要解决的问题是 layui-form表单无法渲染效果. 我希望的效果是但是程序运行效果是问题分析: 因为这个表单,我是使用laytpl动态插入的,因此表单中radio的效果并没有渲染上,打开调试模式可以看到正常的radio渲染结果,应该是包括一个i标签和一个span标签而我们的渲染结果,只有一个input标签所以
微信小程序简单实现form表单获取输入数据功能示例

本文实例讲述了微信小程序简单实现form表单获取输入数据功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 index.wxml <form bindsubmit="formBindsubmit" bindreset="formReset"> <view style="display:flex;"> <label>用户名:</label> <input name="u
微信小程序使用form表单获取输入框数据的实例代码

本文讲述了微信小程序使用form表单获取输入框数据的实例代码.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 index.wxml 用户名: 密码: 登录重置 {{tip}}{{userName}}{{psw}} index.js Page({ data:{ // text:"这是一个页面" tip:'', userName:'', psw:'' }, formBindsubmit:function(e){ if(e.detail.value.userName.leng
使用layer弹窗和layui表单实现新增功能

1.需求:使用layer在弹窗内完成新增,成功后提示并刷新页面(父页面,list页面) 2.实现 a* 页面效果图 b*页面代码 --构建from表单 <div id="add-main" style="display: none;"> <form class="layui-form" id="add-form" action=""> <div class="layu
解决laravel 表单提交-POST 异常的问题

Laravel 显示以下内容: Laravel框架中为避免CSRF攻击,Laravel自动为每个用户Session生成了一个CSRF Token,该Token可用于验证登录用户和发起请求者是否是同一人,如果不是则请求失败. 同时Laravel提供了一个全局帮助函数csrf_token来获取该Token值,因此只需在视提交图表单中添加 input hidden(表单隐藏域) 即可在请求中带上Token <input type="hidden" name="_token&q
浅谈layui 表单元素的选中问题

layui对表单元素都作了美化,比如下拉列表,单选框,多选框.对表单美化后相应元素的操作,其实是在layui处理过后的div上操作,不能真的反映在原始我们编写的表单的元素上.这也会出现一个问题,如果想用JS对表单做些预处理,怎么做?操作原始的元素并不会展现在layui处理过的表单中的,那我们就对layui处理过的表单动手这里要提两个我用过的,一个是单选框,一个是下拉列表 * 单选框,layui美化后,对应的type=radio的input项隐藏,在input之后追加了一个div,里面用i标签美
vue 解决form表单提交但不跳转页面的问题

vue使用@submit.prevent=""来设置提交时执行的函数,并阻止页面跳转: <form id="msgForm" action="" method="post" @submit.prevent="sub"> sub函数写在methods内: methods:{ $.post('http://api.test.ai/visitorinfo/', $('#msgForm').serial
jquery实现表单获取短信验证码代码

效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jquery表单获取短信验证码代码</title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script&g

解决LayUI表单获取不到data的问题

相关推荐

随机推荐