Submitting multiple html forms

Question

I want to submit html forms present in an array. But the problem is only last form is actually posted to server. All other forms do not reach server. Any hint what I am doing wrong here?

if (numberOfRows > 0) {
    for (var i = 0; i < numberOfRows; i++) 
        {
            alert('submitting form ' + i);
                submittedForms[i].submit();
        }
    }
}

From the code you've posted, no. What does `submittedForms` look like? Also what alerts do you get? — ᴘᴀɴᴀʏɪᴏᴛɪs, Jun 20 '18 at 09:07

pschichtel · Accepted Answer · 2018-06-20T14:57:42.700

4

Submitting a form with .submit() is similar to a user clicking a submit button which will result in a new page being loaded. So calling .submit() on multiple forms in the same page would equal a user clicking multiple submit buttons, what is the browser supposed to be doing then? I'm not sure if the specification documents a certain behavior, but I don't see how this could be handled generally. If all you want is that the form data reaches the server, use AJAX. For example like this when using jQuery: jQuery AJAX submit form

edited Jun 20 '18 at 14:57

answered Jun 20 '18 at 09:09

pschichtel

689
7
17

Thank you for saving my time :) – Faiza Iqbal Jun 20 '18 at 12:46
You're welcome. You might as well accept the answer if it solved your problem. – pschichtel Jun 20 '18 at 13:09

score 0 · Answer 2 · edited Jun 25 '18 at 08:18

0

Try this:

$('#form1').submit();
$('#form2').submit();

edited Jun 25 '18 at 08:18

Pang

8,605
144
77
113

answered Jun 20 '18 at 09:13

Anandhukrishna VR

219
2
17

Faiza Iqbal · Answer 3 · 2018-06-20T12:57:17.527

Thanks to @pschichtel. I ended up using ajax to post multiple forms at once. Below is my final code:

 var numberOfRows = submittedForms.length;
 if (numberOfRows > 0) {
                for (var i = 0; i < numberOfRows; i++) {

                    var formData = new FormData(submittedForms[i]); // yourForm: form selector        
                    postFormAjax(formData);
                }
                deleteForms();
            }
            
function postFormAjax(formData)
{
    $.ajax({
        type: "POST",
        url: "https:url/servlet/servlet.WebToCase?encoding=UTF-8", // where you wanna post
        data: formData,
        processData: false,
        contentType: false,
        error: function (jqXHR, textStatus, errorMessage) {
            alert(errorMessage); // Optional
        },
        success: function (data) {
            alert(data)
        }
    });
}

Submitting multiple html forms

3 Answers3