H5W3
当前位置:H5W3 > 其他技术问题 > 正文

【Web前端问题】js处理一个网页两个表单提交到两个不同的action

我需要处理一个页面中的两个表单,这两个表单填好之后,用户点击提交,就能够一起提交,但是两个表单的数据分别存在两个数据库表中,就需要两个页面同时提交到不同的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: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>

回答:

建议放到一个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:个人建议,并非最佳解决方法

本文地址:H5W3 » 【Web前端问题】js处理一个网页两个表单提交到两个不同的action

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址