document.form.submit() is too slow to complete before window.close()

Question

I am having an issue with saving a form. The form itself has about 40 rows with around 12 inputs for each row in this style:

On save, it should POST and then close the window. However, it never truly saves it. This makes me think that it is closing the window before it saves. Here's the code in question:

 $('#save-btn').click(function() {
    document.form.submit(); 
    window.close();
 };

If I remove the window.close() and use the inspector than I see in the parameters field that all the values save correctly. This is again what lead me to think that the window is closing to early.

I have tried using the following in the above #save-btn function:

setTimeout('window.close()',5000)

Yet this never seemed to execute the window.close() after the 5 seconds and all around seems like bad programming to force it to wait 5 seconds and then close when it could take any amount of time.

I then attempted to use an AJAX request like:

var _url = 'submit?nameParam="+nameParam+"&com=editlist&'+$('form').serialize();
console.log(_url); //just to see what its pushing out

$.ajax({
     url: _url,
     error: function(){
     alert('Error submitting form.');
     },

     success: function() {
     window.close();
     }
     });

This resulted in 414 Request-URI Too Long. I know the case for this is it should be a POST to begin with, but I was just trying to make it work.

Just because, this is how our form is set up:

<form name="form" action="submit" method="post">

Our solution was to close the page from our action page

Answer 1

Remove the serialized data from your _url and instead pass it through the .ajax() request with the data setting:

var _url = 'submit?nameParam="+nameParam+"&com=editlist';

$.ajax({
    url: _url,
    method: "POST",
    data: $('form').serialize(),
    error: function() {
        alert('Error submitting form.');
    },
    success: function() {
        window.close();
    }
});