layui的from提交一些小细节

layui-form提交

用到layui前端样式,都会使用到form提交,本人初次使用有很多的地方都不是很熟练,所以总是会踩坑。

  1. 是否引用了对应的layui.css和layui.js
<link rel="stylesheet" type="text/css" href="${hj }/MainJS/assets/css/layui.css" media="all">
<script charset="utf-8" type="text/javascript" src="${hj }/MainJS/assets/layui.js"></script>

引入了这两个文件,layui的基本功能都可以实现。

  1. 使用该layui-form参数,对表单完成局部更新。
<form class="layui-form">
	需要包含到所要提交的表单数据,以及按钮
</form>

如果没有把所要提交的表单写在form标签里,提交不了数据

  1. 事件监听:表单提交事件
<button type="button" class="layui-btn layui-btn-normal layui-icon" 
lay-filter="insert" lay-
  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在layui开关中提交表单,你可以使用layui的form模块和switch开关组件结合起来。首先,确保你已经引入了layui的相关文件。 然后,你可以使用下面的代码示例来实现: HTML代码: ```html <form class="layui-form" action="" lay-filter="formDemo"> <div class="layui-form-item"> <label class="layui-form-label">开关</label> <div class="layui-input-block"> <input type="checkbox" name="switch" lay-skin="switch" lay-text="ON|OFF" lay-filter="switchDemo"> </div> </div> <div class="layui-form-item"> <div class="layui-input-block"> <button class="layui-btn" lay-submit lay-filter="submitDemo">提交</button> <button type="reset" class="layui-btn layui-btn-primary">重置</button> </div> </div> </form> ``` JavaScript代码: ```javascript // layui表单模块初始化 layui.use('form', function(){ var form = layui.form; // 监听开关的状态变化事件 form.on('switch(switchDemo)', function(data){ // 如果开关状态为开启 if(data.elem.checked){ // 提交表单 form.on('submit(submitDemo)', function(){ // 表单提交的逻辑处理 // ... return false; // 阻止表单跳转 }); } else{ // 关闭开关时,取消表单提交事件 form.off('submit(submitDemo)'); } }); }); ``` 这样,当你打开开关时,点击提交按钮会触发表单提交事件,你可以在其中处理表单数据的提交逻辑。当关闭开关时,提交按钮将不会触发表单提交事件。 注意:上述代码中的lay-filter属性可以自定义,但需要保持一致性。另外,你可能还需要自行处理表单数据的收集和提交方式。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值