因为需要分页,所以一个页面有多个form,最后只有一个提交按钮,如何用js点击提交按钮提交所有fo

因为需要分页,所以一个页面有多个form,最后只有一个提交按钮,如何用js点击提交按钮提交所有form,另外最后的提交按钮放在哪?需要放在最后一个form里吗?

你好,多表单同时提交建议使用异步模式,或者使用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,这是不合理的。

希望是你想要的答案,望采纳~~

温馨提示:答案为网友推荐,仅供参考
第1个回答  推荐于2017-12-15

因为需要分页,所以有多个form的说法不成立,分页是对同一类型的数据换页显示,那么当前页面上的只是同类型数据的多行而已,为什么不能放到一个form中?

没有代码,加上表述的不是很清楚,我只能猜测

原理

由于当submit 一个form时,页面会提交给后台,所以js是不会执行第二个form的submit的,因为第一个form submit时,当前页面都没有了.

对于常规的多form提交的解决办法我知道有两种

    第一种通过隐藏frame来实现,你可以看看这个兄弟多年前的一个帖子

    http://blog.csdn.net/elifefly/article/details/7032334

    第二种 用ajax实现,form的提交用button而不是submit ,当button点击时,js将需要提交的数据封装成json或者(任何你觉得可以的格式)提交给后台, 由于ajax请求,当前页面不刷新,所以你可以提交任意多的数据

追问

我是在做一个问卷调查,为了取得数据判断是否都答完了,用了swiper.js,一屏一屏的,每一屏的4道题用了一个form,每一道题就是简单的单选多选,如果用一个form就都乱了,就差最后这个提交的功能了

除了第二种方法,js可以办到吗?因为ajax不会

另外都提交到一个地址

本回答被网友采纳
第2个回答  2015-12-15
楼上说的是获取你的所有表单,然后获得每个表单的提交按钮,在js中执行这个按钮的click事件,for(buttons){buttons[i].click();}
第3个回答  2015-12-15
获取所有表单的提交按钮元素,循环click();追问

需要每个form里都写一个提交按钮,然后隐藏,最后一个不隐藏吗