可以使用
layui 的
表单提交监听函数来实现多个
表单只
提交一个的效果。
首先，给每个需要
提交的
表单设置一个唯一的 id，然后在页面加载完成后，使用
layui 的 form.on() 方法监听
表单提交事件，当任意一个
表单提交时，获取该
表单的
数据并存储到一个全局变量中，然后阻止
表单提交。当最后一个
表单提交时，将存储的所有
表单数据合并，然后使用 ajax
提交数据并清空存储的
数据。
示例代码如下：
HTML：
```html
<!--
表单1 -->
<form class="
layui-form" id="form1">
<div class="
layui-form-item">
<label class="
layui-form-label">用户名</label>
<div class="
layui-input-block">
<input type="text" name="username" required lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="
layui-input">
</div>
</div>
<div class="
layui-form-item">
<label class="
layui-form-label">密码</label>
<div class="
layui-input-block">
<input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="
layui-input">
</div>
</div>
<div class="
layui-form-item">
<div class="
layui-input-block">
<button class="
layui-btn" lay-submit lay-filter="form1">
提交</button>
</div>
</div>
</form>
<!--
表单2 -->
<form class="
layui-form" id="form2">
<div class="
layui-form-item">
<label class="
layui-form-label">姓名</label>
<div class="
layui-input-block">
<input type="text" name="name" required lay-verify="required" placeholder="请输入姓名" autocomplete="off" class="
layui-input">
</div>
</div>
<div class="
layui-form-item">
<label class="
layui-form-label">年龄</label>
<div class="
layui-input-block">
<input type="number" name="age" required lay-verify="required" placeholder="请输入年龄" autocomplete="off" class="
layui-input">
</div>
</div>
<div class="
layui-form-item">
<div class="
layui-input-block">
<button class="
layui-btn" lay-submit lay-filter="form2">
提交</button>
</div>
</div>
</form>
```
JavaScript：
```javascript
// 定义一个全局变量，用于存储所有
表单数据
var formData = {};
// 监听
表单提交事件
layui.form.on('submit', function(data){
// 获取
表单 id 和
数据
var id = data.form.attr('id');
var data = data.field;
// 将
数据存储到全局变量中
formData[id] = data;
// 如果不是最后一个
表单提交，则阻止
表单提交
if (Object.keys(formData).length < 2) {
return false;
}
// 合并所有
表单数据
var allData = {};
for (var key in formData) {
allData = Object.assign(allData, formData[key]);
}
// 使用 ajax
提交数据
$.ajax({
url: 'http://example.com/submit',
type: 'POST',
data: allData,
success: function(){
// 清空全局变量
formData = {};
// 提示用户
提交成功
layer.msg('
提交成功');
},
error: function(){
// 提示用户
提交失败
layer.msg('
提交失败，请重试');
}
});
});
```
在上面的代码中，我们使用了 Object.keys() 方法来获取 formData 对象中属性的数量，然后判断当前
提交的
表单是否为最后一个
表单。如果不是最后一个
表单，则阻止
表单提交。最后一个
表单提交时，我们使用 Object.assign() 方法将所有
表单数据合并为一个对象，然后使用 ajax
提交数据。在
提交成功或失败后，我们清空 formData 对象并提示用户。
最低0.47元/天 解锁文章
1158
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
