可以
使用 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 对象并提示用户。
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
