关于layui框架的switch组件不传值的问题

Layui一直是波波非常喜爱的一个前端框架，通过这个框架可以很快的构建后端页面。本篇笔记主要记录下layui框架的switch组件在POST请求中数据为空的情况。

layui框架的switch组件不传值的问题

原HTML代码部分：

  1. <div class="layui-form-item">
  2.         <label class="layui-form-label">运行状态</label>
  3.         <div class="layui-input-inline">
  4.             <input type="checkbox" name="status_switch" lay-skin="switch" lay-text="运行|停止" lay-filter="status_switch" {if $vo.status eq 1}checked{/if}>
  5.             <input type="hidden" name="status" value="{$vo.status|default='0'}" >
  6.         </div>
  7.     </div>

问题描述：

post提交表单时，打印接收的数据不含_POST["status"]；即使input框包含value值，提交表单后后端也获取不到。

解决办法：

1、如HTML代码部分所示，在switch开关组件下方增加一个隐藏的input框，name="status"。

2、页面底部添加JS代码。

  1. window.form.render('checkbox');
  2.         layui.use(['form','jquery'],function (){
  3.             var form = layui.form;
  4.             var $ = layui.jquery;
  5.             form.on('switch(status_switch)',function (data){
  6.                 if(data.elem.checked){
  7.                     $("input[name='status']").val('1');
  8.                 }else{
  9.                     $("input[name='status']").val('0');
  10.                 }
  12.             })
  13.         })

第一行代码的作用是部分渲染form表单。 代码到此问题得以解决。

 

你想把广告放到这里吗？

发表评论

您必须 登录 才能发表留言！