因为需要分页,所以一个页面有多个form,最后只有一个提交按钮,如何用js点击提交按钮提交所有fo
你好,多表单同时提交建议使用异步模式,或者使用iframe实现伪异步
我写了一个使用iframe提交的例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Multiple Form Submit</title>
</head>
<body>
<form action="a.php" target="J_ASubmit">
<input type="text" name="a" value="a">
</form>
<form action="b.php" target="J_BSubmit">
<input type="text" name="b" id="" value="b">
</form>
<form action="c.php" target="J_CSubmit">
<input type="text" name="c" id="" value="c">
</form>
<input type="button" value="提交所有表单" id="J_Button">
<script>
(function(){
var btn = document.getElementById('J_Button'),
forms = document.getElementsByTagName('form');
btn.onclick = function() {
for (var i = forms.length - 1; forms[i]; i--) {
var ifr = document.createElement('iframe');
ifr.style.display = 'none';
ifr.id = forms[i].getAttribute('target');
ifr.setAttribute('name', forms[i].getAttribute('target'));
document.body.appendChild(ifr);
forms[i].submit();
}
}
})();
</script>
</body>
</html>
打开页面后,点击“提交所有表单”按钮,会同时提交三个表单,可以在控制台验证:
当然,这么简单的写肯定不行,实际使用至少还得增加iframe存在性验证,不然body中会append很多空的同名,且同id的iframe,这是不合理的。
希望是你想要的答案,望采纳~~
因为需要分页,所以有多个form的说法不成立,分页是对同一类型的数据换页显示,那么当前页面上的只是同类型数据的多行而已,为什么不能放到一个form中?
没有代码,加上表述的不是很清楚,我只能猜测
原理
由于当submit 一个form时,页面会提交给后台,所以js是不会执行第二个form的submit的,因为第一个form submit时,当前页面都没有了.
对于常规的多form提交的解决办法我知道有两种
第一种通过隐藏frame来实现,你可以看看这个兄弟多年前的一个帖子
第二种 用ajax实现,form的提交用button而不是submit ,当button点击时,js将需要提交的数据封装成json或者(任何你觉得可以的格式)提交给后台, 由于ajax请求,当前页面不刷新,所以你可以提交任意多的数据
我是在做一个问卷调查,为了取得数据判断是否都答完了,用了swiper.js,一屏一屏的,每一屏的4道题用了一个form,每一道题就是简单的单选多选,如果用一个form就都乱了,就差最后这个提交的功能了
除了第二种方法,js可以办到吗?因为ajax不会
需要每个form里都写一个提交按钮,然后隐藏,最后一个不隐藏吗