javascript - js处理一个网页两个表单提交到两个不同的action

Question

我需要处理一个页面中的两个表单，这两个表单填好之后，用户点击提交，就能够一起提交，但是两个表单的数据分别存在两个数据库表中，就需要两个页面同时提交到不同的action中进行处理。我在提交按钮的onclick事件中是这样写的： '''javascript form1.submit(); form2.submit(); ''' 在实际使用的时候，大约有十分之一的概率两个表单只能提交一个，其他情况下正常，但是提交的顺序并不固定，我怎样才能确保两个表单都能百分之百提交呢？

Answer 1

form 的 submit 事件触发后，会使网页发起新的 GET或POST，显性的表现就是“网页会刷新”。

所有有一定概率，一个 form 触发后，第二天 form submit 还没来得起发起，网页已经刷新掉了。

这种情况，建议你使用 ajax 来做。或者全部放到一个 form 里，然后后端来进行数据的分离后再进行存储等操作。

Answer 2

不考虑直接用$.post()或者$.ajax()么？

Answer 3

简单，三步搞定：

第一步. 在页面里面加入2个隐藏的iframe, 如下：

<iframe name="form_target_1" style="display:none;"></iframe>  
<iframe name="form_target_2" style="display:none;"></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>

Answer 4

建议放到一个form里。

如果使用框架，在后端直接将model分离即可，如果不使用，建议调用同级私有函数分别操作。

Answer 5

两个表单的元素字段名可以考虑用数组的形式：

例如 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:个人建议，并非最佳解决方法