如何使用 layui 提交动态表单?引入 layui 脚本并在 HTML 页面中创建带有名称属性的表单。使用 layui 的 form 模块监听表单提交事件,获取表单数据并执行其他操作。

如何使用 layui 提交动态表单
第一步:引入 layui
在 HTML 页面中引入 layui 脚本:
<code class="html"><script src="layui/layui.js"></script></code>
第二步:编写表单
创建动态表单,其中表单元素的名称以 name 属性指定:
<code class="html"><form id="myForm">
<div class="layui-form-item">
<label class="layui-form-label">姓名:</label>
<div class="layui-input-inline">
<input type="text" name="name">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">邮箱:</label>
<div class="layui-input-inline">
<input type="email" name="email">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button type="button" class="layui-btn" id="submitBtn">提交</button>
</div>
</div>
</form></code>第三步:绑定提交事件
使用 layui 的 form 模块监听表单提交事件:
<code class="javascript">layui.use(['form'], function(){
var form = layui.form;
// 监听提交按钮点击事件
form.on('submit(submitBtn)', function(data){
// data 包含表单中所有元素的值
console.log(data.field); // 输出表单数据
// 其他提交代码...
});
});</code>










