在IE和Google Chrome中提交多表单提交 [英] Multi-forms submission in IE and Google chrome

问题描述

我有几种形式（用户可以动态添加新表单）在一个页面中，它们都被提交给相同的struts2操作。

当用户点击保存按钮时，我需要提交所有这些表格。


FF中的事情很顺利。但在IE和Google chrome中，只提交了最后一个表单。

任何帮助表示赞赏。谢谢。

每个表单的元素都是相同的，一个表单构成一个对象。每个表单的数据将被添加到一个域对象中，然后该对象将被保存到数据库中。



处理保存操作的JavaScript函数：

 < script type =text / javascript> 
函数submit（）{
 var formCnt = document.getElementById（'formCnt'）。value; 
 for（var i = 1; i< = formCnt; i ++）{
 var formName ='form'+ i; 
 document.forms [formName] .submit（）; 
} 
} 
< / script> 
 ... 
< input type =hiddenid =formCntname =formCntvalue =5/> 
 
< form action =add.htmname =form1id =form1method =postenctype =multipart / form-data/> 
< input type =textname =item.priceid =item.pricevalue =/> 
 ... 
< / form> 
 
< form action =add.htmname =form2id =form2method =postenctype =multipart / form-data/> 
< input type =textname =item.priceid =item.pricevalue =/> 
 ... 
< / form> 
 
 ... 
 
 
< input type =textname =item.priceid =item.pricevalue =/> 
 ... 
< / form> 
 
 ... 
  

解决方案

您应该只能一次提交一份表格。提交按钮必须位于< form> 标签内，并且只应提交提交按钮所在的表单。那隐藏的 input 标签应该在表单标签内以及BTW。

即使通过JS来完成，一个 submit（）向服务器发起一个新的 POST 请求。你一次只能提出一个请求，这就是为什么只有最后一个出现。我不知道为什么它能在FF中工作。

如果您需要立即提交所有内容，为什么要将它分解开始？如果您需要表单中的小节，则可以使用< fieldset> 标签。

编辑

运行脚本时发生的情况与您的所有表单都有提交按钮相同，并且您可以快速点击所有提交按钮。单击一个提交按钮将该表单的数据发送到服务器的 POST 请求中并刷新页面。如果您在页面刷新前快速点击另一个按钮，则可以提交另一个表单，旧请求将被取消。

我可以想象的唯一方法是如何所有表单的数据都可能按照你所做的方式到达服务器，如果在下一个 submit（）触发之前发送请求。从本质上讲，您依赖于浏览器速度很慢，或者至少在继续执行脚本之前处理请求。显然，这在FF中起作用，但在其他浏览器中失败。因为它应该。

编辑2

如果您需要提交多个字段使用相同的名称，请使用一种形式，并为您的字段指定唯一的名称。最好的命名方案取决于后端如何处理表单提交。

• item0 ， item1


• item.0 ，项目。 1


• Model.0.item ， Model.1.item

I have several forms(user can add new form dynamically) in one page, they're all submitted to the same struts2 action. I need to submit all these forms when the user clicks the save button.

Things go well in FF. But in IE and Google chrome, only the last form is submitted.

Any help is appreciated. Thank you.

Each form's elements are the same, one form one object. Every form's data will be added to an domain object then the object will be persisted to DB.

JavaScript function to handle save operation:

<script type="text/javascript" >
    function submit() {
        var formCnt = document.getElementById('formCnt').value;
        for(var i = 1; i <= formCnt; i++) {
            var formName = 'form' + i;
            document.forms[formName].submit();
        }
    }
</script>
...
<input type="hidden" id="formCnt" name="formCnt" value="5" />

<form action="add.htm" name="form1" id="form1" method="post" enctype="multipart/form-data" />
     <input type="text" name="item.price" id="item.price" value="" />
    ...
</form>

<form action="add.htm" name="form2" id="form2" method="post" enctype="multipart/form-data" />
     <input type="text" name="item.price" id="item.price" value="" />
    ...
</form>

    ...

<form action="add.htm" name="form5" id="form5" method="post" enctype="multipart/form-data" />
     <input type="text" name="item.price" id="item.price" value="" />
    ...
</form>

   ...

解决方案

You should only be able to submit one form at a time. A submit button must be inside <form> tags, and only the form that the submit button is in should be submitted. That hidden input tag there should be inside a form tag as well BTW.

Even when doing it via JS, a submit() initiates a new POST request to the server. You can only make one request at a time, that's why only the last shows up. I have no idea why it would work in FF.

If you need to submit everything at once anyway, why break it up to begin with? If you want "subsections" in a form, you can use the <fieldset> tags.

Edit

What happens when you run your script is the same as if all your forms have a submit button, and you click all submits buttons in rapid order. Clicking one submit button sends the data of that form to the server in a POST request and refreshes the page. If you're fast enough to click another button before the page refreshes, you can submit another form, the old request will be canceled.

The only way I can imagine how the data of all forms could possibly get to the server the way you're doing it is if the request happens to be send before the next submit() is triggered. Essentially you're relying on the browser being slow, or at least handling the request before continuing the script execution. Apparently that works in FF, but fails in other browsers. As it should.

Edit 2

If you need to submit multiple fields with the same name, use one form and give your fields unique names. The best naming scheme depends on how your backend handles form submissions.

• item0, item1
• item.0, item.1
• Model.0.item, Model.1.item

这篇关于在IE和Google Chrome中提交多表单提交的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！