Faiza Iqbal
Faiza Iqbal

Reputation: 191

Submitting multiple html forms

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();
        }
    }
}

Upvotes: 1

Views: 83

Answers (3)

Anandhukrishna VR
Anandhukrishna VR

Reputation: 279

Try this:

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

Upvotes: 0

pschichtel
pschichtel

Reputation: 779

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

Upvotes: 4

Faiza Iqbal
Faiza Iqbal

Reputation: 191

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)
        }
    });
}

Upvotes: 0

Related Questions