用Javascript同时提交多个Web表单的方法

1问题来自一位网友的提问：
web页面里有多个表单，每个表单对应着某一类数据操作。
比如一个详细的简历信息页面分
1、个人资料
2、工作经验
3、项目经验
4、其他信息 4个表单。
一般的需求是允许用户单独提交其中任何一个表单到下一个页面进行修改操作（也就是说页面有4个不同的修改按钮,点击哪个按钮则只提交某一个表单的数据到服务器，并根据表单的action）。
现在有这样的需求，允许用户选择其中任意的一个或多个表单进行提交修改，这样的话在客户端如何提交表单？
声明：可能会有人说将4个表单合成一个大表单，根据修改按钮的不同在服务器端进行不同的数据操作即可。这是一种解决办法，但考虑到页面数据量比较大，为了提高效率，减少数据传输量，还是希望能够分成多个表单提交，所以这个办法暂不考虑。是不是一定要用js或ajax？如果不用呢？

2 个人观点
1 用Ajax提交，比如prototype
new Ajax.Request("/do1",{parameters:$("form1").serialize().......);

new Ajax.Request("/do2",{parameters:$("form2").serialize().......);

你可以同时调用多个，默认是异步提交，所以可以同时提交多个表单，这个方案是最简单的。

2 使用多个iframe,然后将每个表单的target指向不同的iframe
然后用js的
document.getElementById("form1").submit();
document.getElementById("form2").submit();
。。。
这个样子进行提交。

3 两个方法的对比
Ajax方便简单，对结果的处理也比较省事，框架都替我们做好了，但不能跨域提交
iframe最符合一般的使用，也可以跨域提交，处理返回结果稍微麻烦些，需要在iframe里面使用 parent.进行调用才可以。

赞 (0)

相关推荐

  • javascript实现回车键提交表单方法总结

    本文实例总结了javascript实现回车键提交表单方法.分享给大家供大家参考.具体分析如下: 第一种方法:javascript实现 复制代码 代码如下: <html> <head> <title> javascript 实现回车键提交表单</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <scr

  • javascript实现表单提交后，提交按钮不可用的方法

    本文实例讲述了javascript实现表单提交后,提交按钮不可用的方法.分享给大家供大家参考.具体如下: 这里使用javascript控制表单提交后,提交按钮不可用,可以防止用户多次提交. <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>表单提交后按钮禁用</title> &l

  • 一个JavaScript防止表单重复提交的实例

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>防止重复表单提交</title> <style> #refresh{ display: none; width:200px; height:20px; background

  • javascript下阻止表单重复提交、防刷新、防后退

    1 服务器端的解决方法.这是我最为推荐的方法.优点是判断准确,兼容性最大. 做法:a页面显示表单,然后提交b页面处理,处理完后重定向到c页面显示结果. 1.0 在访问a页面时在session里生成一个标志ID,例如 //伪代码  session("submitID")=random()  然后把这个值写到表单的一个hidden的input里 //伪代码  <%response.write("<input name=submitID2 type=hidden val

  • 可实现多表单提交的javascript函数

    <script language=javascript> function submitForm(formId,action){     var form=document.getElementById(formId);     form.action=action;     form.submit(); } </script> 传个表单ID和url进去就行了~

  • Javascript 同时提交多个Web表单的方法

    比如一个详细的简历信息页面分 1.个人资料 2.工作经验 3.项目经验 4.其他信息 4个表单. 一般的需求是允许用户单独提交其中任何一个表单到下一个页面进行修改操作(也就是说页面有4个不同的修改按钮,点击哪个按钮则只提交某一个表单的数据到服务器,并根据表单的action). 现在有这样的需求,允许用户选择其中任意的一个或多个表单进行提交修改,这样的话在客户端如何提交表单? 声明:可能会有人说将4个表单合成一个大表单,根据修改按钮的不同在服务器端进行不同的数据操作即可.这是一种解决办法,但考虑到

  • javascript 回车键触发表单提交的问题

    比如搜索行为,希望输入完关键词之后直接按回车键立即提交表单,而有些复杂表单,可能要避免回车键误操作在未完成表单填写的时候就触发了表单提交. 要控制这些行为,不需要借助JS,浏览器已经帮我们做了这些处理,这里总结几条规则: 如果表单里有一个type="submit"的按钮,回车键生效. 如果表单里只有一个type="text"的input,不管按钮是什么type,回车键生效. 如果按钮不是用input,而是用button,并且没有加type,IE下默认为type=bu

  • javascript 解决表单仍然提交即使监听处理函数返回false

    复制代码 代码如下: <form action="http://www.jb51.net" id="form"> <input type="text" /> <input type="submit" /> </form> <script> var code = function () { return false; }; var element = window.do

  • 表单提交(插入效果)javascript

    表单提交(插入效果)javascript

    var img_src=''; var ToAdd=''; function show_image(){ var num1=document.reply_form.first_num.value; var num2=document.reply_form.second_num.value; var num3=document.reply_form.third_num.value; var num=num1+num2+num3; if('000'==num){ document.getElemen

  • 用Javascript同时提交多个Web表单的方法

    1问题来自一位网友的提问: web页面里有多个表单,每个表单对应着某一类数据操作. 比如一个详细的简历信息页面分 1.个人资料 2.工作经验 3.项目经验 4.其他信息 4个表单. 一般的需求是允许用户单独提交其中任何一个表单到下一个页面进行修改操作(也就是说页面有4个不同的修改按钮,点击哪个按钮则只提交某一个表单的数据到服务器,并根据表单的action). 现在有这样的需求,允许用户选择其中任意的一个或多个表单进行提交修改,这样的话在客户端如何提交表单? 声明:可能会有人说将4个表单合成一个大

  • JAVA防止重复提交Web表单的方法

    本文实例讲述了JAVA防止重复提交Web表单的方法.分享给大家供大家参考,具体如下: package cn.com.form; import java.io.IOException; import java.security.MessageDigest; import java.security.NoSuchAlgorithmException; import java.util.Random; import javax.servlet.ServletException; import java

  • Web表单提交之disabled问题js解决方法

    本文实例讲述了Web表单提交之disabled问题js解决方法.分享给大家供大家参考.具体分析如下: 例如,有如下表单 复制代码 代码如下: <form id="inputForm" action="shorttermrental.action" method="post">      <input name="pname" type="text" id="pname"

  • JavaScript一文带你玩转web表单网页

    JavaScript一文带你玩转web表单网页

    一.前言 前面我们介绍了web网页的快速开发,这次我们讲点更深层次些的,看这面之前建议先看 上篇,之后在食用这篇. 二.正文部分 如图示:点击webapp上面的小三角形点到直到看到jsp位置 我们在创建好了之后这里会有jsp的空单子,我们在这输入的内容,会先反馈到前端,之后再进行 后端数据处理和接收. 第一步:我们先在这输入一些东西如图:其中<h1>内容</h1>这是格式,说明中间的内容是 一个h1 大小的标题,h1--h6标题在逐渐减小,要慎用h1,因为h1比较大 要先点击这个运

  • javascript巧用eval函数组装表单输入项为json对象的方法

    本文实例讲述了javascript巧用eval函数组装表单输入项为json对象的方法.分享给大家供大家参考,具体如下: 在ajax方式做web开发时,经常会遇到会保存前,收集表单输入项,组成json对象,然后把对象直接post到服务端的场景 常规做法是在js里写类似如下的代码: var myObj = {}; myObj.x = document.getElementById("x").value; myObj.y = document.getElementById("y&q

  • Python的Flask框架中web表单的教程

    Python的Flask框架中web表单的教程

     概要 在前面章节我们为主页定义了一个简单的模板,部分尚未实现的模块如用户或帖子等使用模拟的对象作为临时占位. 本章我们将看到如何利用web表单填补这些空白. web表单是web应用中最基本的构建要素,我们将通过表单来实现用户发帖和应用登录功能. 完成本章内容你需要基于前面章节完成的微博应用代码,请确认这些代码已安装并能正常运行. 配置 Flask-WTF是WTForms项目的Flask框架扩展,我们将用他来帮助我们处理web表单. 大部分Flask扩展都需要定义相关配置项,所以我们先来在应用根

  • js实现a标签超链接提交form表单的方法

    本文实例讲述了js实现a标签超链接提交form表单的方法.分享给大家供大家参考.具体实现方法如下: <form action="/home/search" method="get" id="search_form"> <div class="searchBox png" id="searchBox"> <input type="text" id="

  • HTML页面禁用Enter键自动提交表单的方法

    在HTML页里面由于使用了form,常常需要禁用enter提交表单.因为内容页或者母版页自身有如果有type="submit"的button,当textbox聚焦时,按下enter都会触发表单的默认提交(不论是IE还是firefox),于是需要在onkeydown中监听用户的按键.实际测试,IE8中导致表单提交的不确定因素太多,点击表单的table中的td都会触发表单提交,而firefox则不会:于是在ie和ff中禁用表单提交需要不同的思路. 对于IE: 只有当事件源是TEXTAREA

  • js实现键盘Enter键提交表单的方法

    本文实例讲述了js实现键盘Enter键提交表单的方法.分享给大家供大家参考.具体实现方法如下: //执行键盘按键命令 function keyDown(e){ var keycode = 0; //IE浏览器 if(CheckBrowserIsIE()){ keycode = event.keyCode; }else{ //火狐浏览器 keycode = e.which; } if (keycode == 13 ) //回车键是13 { //document.getElementById("lo

随机推荐