可以使用 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 对象并提示用户。
本文介绍了一种在网页中实现一个表单带有多个提交按钮并能提交到不同页面的方法，利用JavaScript动态改变表单的action属性，适用于批量操作如删除、转移等场景。
扫一扫
807
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
