Problem with multi-forms submission in IE and Google chrome

Question

I have serveral 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>

   ...

Answer 1

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

Answer 2

I believe you're only allowed to submit just one at a time - this might be a bad practice but how about basically duplicating each forms code and replicating it in an iframe, submitting the form there, either that or relying on XHR ( $.post ) to mimic what the forms would do.

Answer 3

try using document.getElementById(formId).submit(); instead. the document.form.x, document.forms[int], document.forms[id], and document.x methods of accessing forms are not cross-browser compatible ways of referencing a form.

Also - I believe I once had an issue when I had both a name AND an id on my form. The best practice is to use id I believe.