收藏，7.9k 浏览
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
我需要处理一个页面中的两个表单，这两个表单填好之后，用户点击提交，就能够一起提交，但是两个表单的数据分别存在两个数据库表中，就需要两个页面同时提交到不同的action中进行处理。我在提交按钮的onclick事件中是这样写的：
'''javascript
form1.submit();
form2.submit();
在实际使用的时候，大约有十分之一的概率两个表单只能提交一个，其他情况下正常，但是提交的顺序并不固定，我怎样才能确保两个表单都能百分之百提交呢？
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
form 的 submit 事件触发后，会使网页发起新的 GET或POST，显性的表现就是“网页会刷新”。
所有有一定概率，一个 form 触发后，第二天 form submit 还没来得起发起，网页已经刷新掉了。
这种情况，建议你使用 ajax 来做。或者全部放到一个 form 里，然后后端来进行数据的分离后再进行存储等操作。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
不考虑直接用$.post()或者$.ajax()么？
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
简单，三步搞定：
第一步. 在页面里面加入2个隐藏的iframe, 如下：
&iframe name="form_target_1" style="display:"&&/iframe&
&iframe name="form_target_2" style="display:"&&/iframe&
第二步. 表单设置target属性：
&form name="form_1" target="form_target_1"&...&form&
&form name="form_2" target="form_target_2"&...&/form&
第三步. 按钮提交事件：
&button onclick="form_1.submit(); form_2.submit();"&提交&/button&
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
建议放到一个form里。
如果使用框架，在后端直接将model分离即可，如果不使用，建议调用同级私有函数分别操作。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
两个表单的元素字段名可以考虑用数组的形式：
例如 form1 提交的数据保存到user表的，表单元素的name属性可设置成user[username],user[email]
form2 提交的数据要保存到product表的，表单元素的name属性可设置成product[id],product[name],product[price]
后台处理的时候：
$user_posts = $input-&post('user'); //取user数据
$product_posts = $input-&post('product'); //取product数据
这样两部分数据可以一次性提交，然后分开处理
PS:个人建议，并非最佳解决方法
同步到新浪微博
分享到微博？
与我们一起探索更多的未知
专业的开发者技术社区，为用户提供多样化的线上知识交流，丰富的线下活动及给力的工作机会
加入只需一步
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
举报理由：
推广（招聘、广告、SEO 等）方面的内容
带有人身攻击、辱骂、仇恨等违反条款的内容
与已有问题重复（请编辑该提问指向已有相同问题）
不友善内容
答非所问，不符合答题要求
其他原因（请补充说明）
补充说明：
扫扫下载 App
SegmentFault
一起探索更多未知JavaScript表单处理（上）
为了分担服务器处理表单的压力，JavaScript提供了一些解决方案，从而大大打破了处处依赖服务器的局面。
&发文不易，转载请亲注明出处，谢谢！
一．表单介绍
在HTML中，表单是由&form&元素来表示的，而在JavaScript中，表单对应的则是HTMLFormElement类型。HTMLFormElement继承了HTMLElement，因此它拥有HTML元素具有的默认属性，并且还独有自己的属性和方法：
HTMLFormElement属性和方法
属性或方法
acceptCharset
服务器能够处理的字符集
接受请求的URL
表单中所有控件的集合
请求的编码类型
表单中控件的数量
表单的名称
用于发送请求和接受响应的窗口名称
将所有表单重置
获取表单&form&对象的方法有很多种，如下：
document.getElementById('myForm'); & & & & & & & &//使用ID获取&form&元素
document.getElementsByTagName('form')[0]; & & //使用获取第一个元素方式获取&
document.forms[0]; & & & & & & & & & & & & & & & & & & & & & & & & //使用forms的数字下标获取元素
document.forms['yourForm']; & & & & & & & & & & & & & & & & & //使用forms的名称下标获取元素
document.yourF & & & & & & & & & & & & & & & & & & & &//使用name名称直接获取元素（不推荐）
PS：最后一种方法使用name名称直接获取元素，已经不推荐使用，这是向下兼容的早期用法。问题颇多，比如有两个相同名称的，变成数组；而且这种方式以后有可能会不兼容。
通过事件对象，可以阻止submit的默认行为，submit事件的默认行为就是携带数据（默认以get方式）跳转到指定页面（默认为本页）。
& & & &addEvent(fm, 'submit', function (evt) { & & &//注意是在form对象上触发submit事件
& & & & & & & preDef(evt);
& & & &});
PS：submit事件，用传统的方式：fm.onsubmit = function () {}。
PS：必须把submit事件绑定到form对象上，才可以触发submit事件，只不过触发submit事件的流程是点击input中的submit按钮而已。
我们可以使用submit()方法来自定义触发submit事件，也就是说，并不一定非要点击submit按钮才能提交。示例代码如下：
//实现ctrl+enter实现提交
1 &addEvent(document, 'keydown', function (evt) {
3 & & & & & & & var e = evt || window.
5 & & & & & & & if (e.ctrlKey && e.keyCode == 13) &fm.submit();
7 & & & &});
PS：在表单中尽量避免使用name=&submit&或id=&submit&等命名，这会和submit()方法发生冲突导致无法提交。
提交数据最大的问题就是重复提交表单。因为各种原因，当一条数据提交到服务器的时候会出现延迟等长时间没反映，导致用户不停的点击提交，从而使得重复提交了很多相同的请求，或造成错误、或写入数据库多条相同信息。
//模拟延迟
&1 &addEvent(fm, 'submit', function (evt) { & & & & & & &
&3 & & & & & & & preDef(evt); & & //先阻止提交
&5 & & & & & & & setTimeout(function () {
&7 & & & & & & & & & & &fm.submit(); & & &//提交
&9 & & & & & & & }, 3000); & &//3秒钟之后才发送数据（延迟就可能会导致，用户不停地点击提交）
11 & & & &});
有两种方法可以解决这种问题：
第一种就是提交之后，立刻禁用点击按钮；
第二种就是提交之后取消后续的表单提交操作。
document.getElementById('sub').disabled = & & & & & & &//将按钮禁用（仅限于使用提交按钮进行提交的形式）
&1 var fm = document.getElementById('myForm');
&3 var flag = & & & & & & & & & & & & & & & & & & & & & & & & //设置一个监听变量
&5 addEvent(fm, 'submit', function (evt) {
&7 & & & & & & & preDef(evt);
&9 & & & & & & & if (flag == true) & & & & & & & & & & & //如果存在返回退出事件
11 & & & & & & & flag = & & & & & &//否则确定是第一次，设置为true，表示我提交过一次了
13 & & & & & & & alert('提交');
15 & & & & & & & setTimeout(function () {
17 & & & & & & & & & & &fm.submit();
19 & & & & & & & }, 3000);
21 & & & &});
PS：在某些，F5只能起到缓存刷新的效果（浅刷新），有可能获取不到真正的源头更新的数据。那么使用ctrl+F5就可以把源头给刷出来。
用户点击重置按钮时，表单会被初始化。虽然这个按钮还得以保留，但目前的Web已经很少去使用了。因为用户已经填写好各种数据，不小心点了重置就会全部清空，用户体验极差。
有两种方法调用reset事件：
第一个就是直接type=&reset&即可；
第二个就是使用fm.reset()方法调用即可。
&input type=&reset& value=&重置& /& & & & & & & & & &//不需要JS代码即可实现
& & & &addEvent(document,'click', function () {
& & & & & & & fm.reset(); & & & & & & & & & & & & & & & & & & & & & & & &//使用JS方法实现重置
& & & &}); & & & & & & & &
如果想访问表单元素，可以使用之前章节讲到的DOM方法访问。但使用原生的DOM访问虽然比较通用，但不是很便利。表单处理中，我们建议使用HTML DOM，它有自己的elements属性，该属性是表单中所有元素的集合。
PS：表单控件是什么？ form里面的input，submit，textarea，select 这些叫做表单控件，其实就是表单元素标签，通过表单元素集合获取第一个元素，非表单控件会被忽略掉。
fm.elements[0]; & & & & & & & & & & & & & & & & & & & & & & & &//获取第一个表单字段元素
fm.elements['user']; & & & & & & & & & & & & & & & & & & & & & //获取name是user的表单字段元素
fm.elements. & & & & & & & & & & & & & & & & & & & & & & & & //获取所有表单字段的数量
如果多个表单字段都使用同一个name，那么就会返回该name的NodeList表单列表。
fm.elements['sex']; & & & & & & & & & & & & & & & & & & & & & &//获取相同name表单字段列表 & & & &&
PS：我们是通过fm.elements[0]来获取第一个表单字段的，但也可以使用fm[0]直接访问第一个字段。因为fm[0]访问方式是为了向下兼容的，所以，我们建议大家使用elements属性来获取。
共有的表单字段属性
除了&fieldset&元素之外，所有表单字段都拥有相同的一组属性。由于&input&类型可以表示多种表单字段（由type属性决定），因此有些属性只适用于某些字段。以下罗列出共有的属性：
属性或方法
布尔值，表示当前字段是否被禁用
指向当前字段所属表单的指针，只读
当前字段的名称
布尔值，表示当前字段是否只读
表示当前字段的切换
当前字段的类型
当前字段的值
这些属性其实就是HTML表单里的属性，在XHTML相关知识中有详细介绍（自行查阅），这里不作赘述，重点看几个最常用的：
fm.elements[0]. & & & & & & & & & & & & & & & & & & & //获取和设置value
fm.elements[0].form == & & & & & & & & & & & & & & &//查看当前字段所属表单
fm.elements[0].disabled = & & & & & & & & & & & & &//禁用当前字段
fm.elements[0].type = 'checkbox'; & & & & & & & & & & &//修改字段类型，极不推荐!
除了&fieldset&字段之外，所有表单字段都有type属性。对于&input&元素，这个值等于HTML属性的type值。对于非&input&元素，这个type的属性值如下：
非&input&元素的type属性值
type属性的值
&select&...&/select&
select-one
&select multiple&...&/select&
select-multiple
自定义按钮
&button&...&/button&
自定义非提交按钮
&button type=&button&&...&/button&
自定义重置按钮
&button type=&reset&&...&/button&
自定义提交按钮
&button type=&submit&&...&/button&
PS：&input&和&button&元素的type属性是可以动态修改的，而&select&元素的type属性则是只读的。(在不必要的情况下，建议不修改type)。
共有的表单字段方法
每个表单字段都有两个方法：foucs()和blur()。
将焦点定位到表单字段里
从元素中将焦点移走
& & & &fm.elements[0].focus(); & & & & & & & & & & & & & & & & & & //将焦点移入
& & & &fm.elements[0].blur(); & & & & & & & & & & & & & & & & & & &//将焦点移出
共有的表单字段事件
表单共有的字段事件有以下三种：
当字段失去焦点时触发
对于&input&和&textarea&元素，在改变value并失去焦点时触发；对于&select&元素，在改变选项时触发
当前字段获取焦点时触发
& & & &addEvent(textField, 'focus', function () { & & & & & & //缓存blur和change再测试一下
& & & & & & & alert('Mr.Lee');
& & & &});
PS：关于blur和change事件的关系，并没有严格的规定。在某些浏览器中，blur事件会先于change事件发生；而在其他浏览器中，则恰好相反。
---恢复内容结束---
为了分担服务器处理表单的压力，JavaScript提供了一些解决方案，从而大大打破了处处依赖服务器的局面。
&发文不易，转载请亲注明出处，谢谢！
一．表单介绍
在HTML中，表单是由&form&元素来表示的，而在JavaScript中，表单对应的则是HTMLFormElement类型。HTMLFormElement继承了HTMLElement，因此它拥有HTML元素具有的默认属性，并且还独有自己的属性和方法：
HTMLFormElement属性和方法
属性或方法
acceptCharset
服务器能够处理的字符集
接受请求的URL
表单中所有控件的集合
请求的编码类型
表单中控件的数量
表单的名称
用于发送请求和接受响应的窗口名称
将所有表单重置
获取表单&form&对象的方法有很多种，如下：
document.getElementById('myForm'); & & & & & & & &//使用ID获取&form&元素
document.getElementsByTagName('form')[0]; & & //使用获取第一个元素方式获取&
document.forms[0]; & & & & & & & & & & & & & & & & & & & & & & & & //使用forms的数字下标获取元素
document.forms['yourForm']; & & & & & & & & & & & & & & & & & //使用forms的名称下标获取元素
document.yourF & & & & & & & & & & & & & & & & & & & &//使用name名称直接获取元素（不推荐）
PS：最后一种方法使用name名称直接获取元素，已经不推荐使用，这是向下兼容的早期用法。问题颇多，比如有两个相同名称的，变成数组；而且这种方式以后有可能会不兼容。
通过事件对象，可以阻止submit的默认行为，submit事件的默认行为就是携带数据（默认以get方式）跳转到指定页面（默认为本页）。
& & & &addEvent(fm, 'submit', function (evt) { & & &//注意是在form对象上触发submit事件
& & & & & & & preDef(evt);
& & & &});
PS：submit事件，用传统的方式：fm.onsubmit = function () {}。
PS：必须把submit事件绑定到form对象上，才可以触发submit事件，只不过触发submit事件的流程是点击input中的submit按钮而已。
我们可以使用submit()方法来自定义触发submit事件，也就是说，并不一定非要点击submit按钮才能提交。示例代码如下：
//实现ctrl+enter实现提交
1 &addEvent(document, 'keydown', function (evt) {
3 & & & & & & & var e = evt || window.
5 & & & & & & & if (e.ctrlKey && e.keyCode == 13) &fm.submit();
7 & & & &});
PS：在表单中尽量避免使用name=&submit&或id=&submit&等命名，这会和submit()方法发生冲突导致无法提交。
提交数据最大的问题就是重复提交表单。因为各种原因，当一条数据提交到服务器的时候会出现延迟等长时间没反映，导致用户不停的点击提交，从而使得重复提交了很多相同的请求，或造成错误、或写入多条相同信息。
//模拟延迟
&1 &addEvent(fm, 'submit', function (evt) { & & & & & & &
&3 & & & & & & & preDef(evt); & & //先阻止提交
&5 & & & & & & & setTimeout(function () {
&7 & & & & & & & & & & &fm.submit(); & & &//提交
&9 & & & & & & & }, 3000); & &//3秒钟之后才发送数据（延迟就可能会导致，用户不停地点击提交）
11 & & & &});
有两种方法可以解决这种问题：
第一种就是提交之后，立刻禁用点击按钮；
第二种就是提交之后取消后续的表单提交操作。
document.getElementById('sub').disabled = & & & & & & &//将按钮禁用（仅限于使用提交按钮进行提交的形式）
&1 var fm = document.getElementById('myForm');
&3 var flag = & & & & & & & & & & & & & & & & & & & & & & & & //设置一个监听变量
&5 addEvent(fm, 'submit', function (evt) {
&7 & & & & & & & preDef(evt);
&9 & & & & & & & if (flag == true) & & & & & & & & & & & //如果存在返回退出事件
11 & & & & & & & flag = & & & & & &//否则确定是第一次，设置为true，表示我提交过一次了
13 & & & & & & & alert('提交');
15 & & & & & & & setTimeout(function () {
17 & & & & & & & & & & &fm.submit();
19 & & & & & & & }, 3000);
21 & & & &});
PS：在某些浏览器，F5只能起到缓存刷新的效果（浅刷新），有可能获取不到真正的源头更新的数据。那么使用ctrl+F5就可以把源头给刷出来。
用户点击重置按钮时，表单会被初始化。虽然这个按钮还得以保留，但目前的Web已经很少去使用了。因为用户已经填写好各种数据，不小心点了重置就会全部清空，用户体验极差。
有两种方法调用reset事件：
第一个就是直接type=&reset&即可；
第二个就是使用fm.reset()方法调用即可。
&input type=&reset& value=&重置& /& & & & & & & & & &//不需要JS代码即可实现
& & & &addEvent(document,'click', function () {
& & & & & & & fm.reset(); & & & & & & & & & & & & & & & & & & & & & & & &//使用JS方法实现重置
& & & &}); & & & & & & & &
如果想访问表单元素，可以使用之前章节讲到的DOM方法访问。但使用原生的DOM访问虽然比较通用，但不是很便利。表单处理中，我们建议使用HTML DOM，它有自己的elements属性，该属性是表单中所有元素的集合。
PS：表单控件是什么？ form里面的input，submit，textarea，select 这些叫做表单控件，其实就是表单元素标签，通过表单元素集合获取第一个元素，非表单控件会被忽略掉。
fm.elements[0]; & & & & & & & & & & & & & & & & & & & & & & & &//获取第一个表单字段元素
fm.elements['user']; & & & & & & & & & & & & & & & & & & & & & //获取name是user的表单字段元素
fm.elements. & & & & & & & & & & & & & & & & & & & & & & & & //获取所有表单字段的数量
如果多个表单字段都使用同一个name，那么就会返回该name的NodeList表单列表。
fm.elements['sex']; & & & & & & & & & & & & & & & & & & & & & &//获取相同name表单字段列表 & & & &&
PS：我们是通过fm.elements[0]来获取第一个表单字段的，但也可以使用fm[0]直接访问第一个字段。因为fm[0]访问方式是为了向下兼容的，所以，我们建议大家使用elements属性来获取。
共有的表单字段属性
除了&fieldset&元素之外，所有表单字段都拥有相同的一组属性。由于&input&类型可以表示多种表单字段（由type属性决定），因此有些属性只适用于某些字段。以下罗列出共有的属性：
属性或方法
布尔值，表示当前字段是否被禁用
指向当前字段所属表单的指针，只读
当前字段的名称
布尔值，表示当前字段是否只读
表示当前字段的切换
当前字段的类型
当前字段的值
这些属性其实就是HTML表单里的属性，在XHTML相关知识中有详细介绍（自行查阅），这里不作赘述，重点看几个最常用的：
fm.elements[0]. & & & & & & & & & & & & & & & & & & & //获取和设置value
fm.elements[0].form == & & & & & & & & & & & & & & &//查看当前字段所属表单
fm.elements[0].disabled = & & & & & & & & & & & & &//禁用当前字段
fm.elements[0].type = 'checkbox'; & & & & & & & & & & &//修改字段类型，极不推荐!
除了&fieldset&字段之外，所有表单字段都有type属性。对于&input&元素，这个值等于HTML属性的type值。对于非&input&元素，这个type的属性值如下：
非&input&元素的type属性值
type属性的值
&select&...&/select&
select-one
&select multiple&...&/select&
select-multiple
自定义按钮
&button&...&/button&
自定义非提交按钮
&button type=&button&&...&/button&
自定义重置按钮
&button type=&reset&&...&/button&
自定义提交按钮
&button type=&submit&&...&/button&
PS：&input&和&button&元素的type属性是可以动态修改的，而&select&元素的type属性则是只读的。(在不必要的情况下，建议不修改type)。
共有的表单字段方法
每个表单字段都有两个方法：foucs()和blur()。
将焦点定位到表单字段里
从元素中将焦点移走
& & & &fm.elements[0].focus(); & & & & & & & & & & & & & & & & & & //将焦点移入
& & & &fm.elements[0].blur(); & & & & & & & & & & & & & & & & & & &//将焦点移出
共有的表单字段事件
表单共有的字段事件有以下三种：
当字段失去焦点时触发
对于&input&和&textarea&元素，在改变value并失去焦点时触发；对于&select&元素，在改变选项时触发
当前字段获取焦点时触发
& & & &addEvent(textField, 'focus', function () { & & & & & & //缓存blur和change再测试一下
& & & & & & & alert('Mr.Lee');
& & & &});正在读取中...
正在读取中...
正在读取中...
JS提交表单弹出确认框效果一
所属栏目：　时间：　来源：　作者：
正在读取中...
如网站留言反馈等等提交表单时，希望点提交按钮时弹出确认框，点确认提交才提交，而不是直接提交。一方面，也是为了提醒网站访客是否填写完整了。另一方面，也在一定程序上阻止注册机等恶意提交表单。1、在表单模板里添加以下JS代码：&script language="Javascript"&
function validator()
if(confirm("确认要提交本表单吗？")==true)
&/script&2、表单加上以下代码：onsubmit="return validator()例如：&form id="form1" name="form1" method="post" action="/16css.php" onsubmit="return validator()"&JS代码里的 validator 就是表单里的 validator 保持一致即可。代码非常简单，因此不再提示演示及下载...具体效果请看演示，一流资源网推荐下载。
请站长喝杯咖啡？
站长一直坚持白天工作、晚上熬夜更新素材，付出了巨大的精力和时间，其中的辛酸难以言述。坚持免积分、免登录、无任何限制下载！如果本站素材对你有用，不妨考虑请站长喝杯咖啡鼓励一下！
条评论给个评价吧
正在读取中...
下载最多的
正在读取中...
最近更新的
2014全新改版上线
2013全新改版上线为什么用按钮submit提交表单可以
但是用js脚本提交同样的表单就报404错误呢？
[问题点数：50分，结帖人nick207]
为什么用按钮submit提交表单可以
但是用js脚本提交同样的表单就报404错误呢？
[问题点数：50分，结帖人nick207]
不显示删除回复
显示所有回复
显示星级回复
显示得分回复
只显示楼主
相关推荐：
2009年2月 Java大版内专家分月排行榜第三2008年11月 Java大版内专家分月排行榜第三2008年8月 Java大版内专家分月排行榜第三2008年7月 Java大版内专家分月排行榜第三
2009年6月 Java大版内专家分月排行榜第三
本帖子已过去太久远了，不再提供回复功能。一个表单多个提交按钮的问题！_百度知道
一个表单多个提交按钮的问题！
我有一个表单里面有一个添加和一个修改按钮是提交到同一个PHP处理页面，怎么判断用户点的时候哪一个按钮？还有怎么用JS改变按钮的提交页面？我只知道可以&input type=&button& onclick=&javascript:this.form.submit()&&怎么指定提交的地址？
我有更好的答案
用JS改变按钮的提交页面:&script type=&text/javascript&&function fun(){document.myform.action=&要提交的路径&; }&/script&&form name=&myform&&&input type=&button& value=&提交&
onclick=&fun()& /&&/form&
根据提交表单的值来判断 如&input type=&submit& value=&修改& name=&action& /&&input type=&submit& value=&添加& name=&action& /&
在提交页面中：if request(&action&)='修改'
判断那个提交的就在你提交时传个不同的参数，根据参数判断
其他类似问题
为您推荐：
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁