Layui表单提交时如何通过JS拦截并修改form.val设置的值-Layui教程-PHP中文网

form.val 设置的值提交时没生效，因其仅更新 Layui 缓存而不触发原生 DOM 变化；应直接操作 DOM 的 value/checked/selected 属性，并在修改 select 或 checkbox 后调用 form.render() 同步 UI。

form.val 设置的值为什么提交时没生效？

因为 form.val 只是同步表单 dom 的 value 到 laydata 缓存，并不触发原生表单控件的 input 或 change 事件，后端接收时读的是 dom 实际值（尤其是 select、checkbox、radio 这类控件），而 layui 的渲染层和原生 dom 值可能脱节。

拦截 submit 事件后用原生 DOM 修改值最可靠

不要依赖 form.val 的返回值去“二次赋值”，直接操作 DOM 元素的 value、checked、selected 属性。Layui 表单提交本质仍是原生 submit，最终提交内容由 DOM 决定。

实操建议：

给 form 绑定 submit 事件，用 e.preventDefault() 拦截
用 document.querySelector 或 $ 获取目标元素，直接改 .value / .checked / .selectedIndex
若涉及 select 下拉框，记得同时调用 form.render('select') 同步 Layui 样式（否则 UI 不刷新）
修改完再调用 form.submit()（手动触发表单提交）或用 $.ajax 发送数据

示例：把隐藏字段 user_role 改为后台要求的枚举值

form.on('submit(*)', function(data){
  const elem = document.querySelector('[name="user_role"]');
  if (elem) {
    elem.value = 'admin'; // 直接写死或根据逻辑计算
  }
  // 注意：如果是 select，还要 form.render('select');
  return false; // 阻止默认提交，后续可 ajax 提交
});