How to make form submission synchronous?

Question

As javascript(including form submission) is synchronous and single thread model except ajax calls. Is that right? But i am facing one issue regarding this.

I am submitting the form at line 1 and then closing the pop up. what happens is self.close get called before form submission. So here it is behaving in asynch mode. Is form submission a asynchronous process? If yes how can i make the code after form submission synchronous?(I dont want to use setTimeOut and ajax)

Here is my relevant jsp code

function clickSave()
 {

    document.form.action="customerAction.do";
    document.form.submit();// line 1
    self.close();// line 2

 }

Update:- Looks like i need to correct myself form submission is asynchronous process as per Is form submit synchronous or async?. So question is how can i make self.close synchronous with form submission

Adrian Maire · Accepted Answer · 2019-04-16T09:16:36.287

As javascript(including form submission) is synchronous and single thread model except ajax calls. Is that right? But i am facing one issue regarding this.

Well, JS is asynchronous for every event listener. Ajax allow asynchronous mode, returning the result as an event.

JS is mostly NOT CONCURRENT: only one function is being performed at time. However, in newest versions there are ways to create background "concurrent" threads in JS (1)

JS run on a single thread. (except for background threads)

I am submitting the form at line 1 and then closing the pop up. what happens is self.close get called before form submission.

That is not possible.

Is form submission an asynchronous process?

The submission is asynchronous, that is, the JS will continue to run and end.

You may test that will this example (2).

If yes how can i make the code after form submission synchronous?(I dont want to use setTimeOut and ajax)

Submit will reload the entire page, so your JS will end and after that, the window will load the new page from the server with the form result. You may include in this new page a new JS to "continue".

If you don't want to reload all the page, you must use AJAX, and in this case, you have 2 options:

Asynchronous: you may set an event listener to receive and use the result.
Synchronous: your page will block until the result is ready.

Note: (1): https://developer.mozilla.org/en-US/docs/Web/Guide/Performance/Using_web_workers?redirectlocale=en-US&redirectslug=DOM%2FUsing_web_workers

(2):

<html>
    <body>
        <script type="text/javascript">
        function click2()
        {
            document.getElementById('form1').submit();
            for(var i=0; i < 1000000000; i++);
            window.open('http://www.stackoverflow.com');
        }
        </script>

        <button onclick="click2();"> click </button>
        <br/><br/>
        <form id="form1" action="http://www.duckduckgo.com" method="get">
            <input type="text" value="hello"/>
        </form>
    </body>
</html>

i think i can do one more thing create the script tag with self.close and return to same page. It will close the window , thats what i think — emilly, Jun 19 '13 at 16:56
"I am submitting the form at line 1 and then closing the pop up. what happens is self.close get called before form submission. "What i mean with this is call does not go to server because form submission is asynchronous and self.close is executed even before call goes to server. "So Thats is possible :)" — emilly, Jun 19 '13 at 17:01
No: what is asynchronous is the response, the call is always synchronous and will be sent to the server always. Of course, if the server return a 404 or any other error, your JS will not be able to process it. — Adrian Maire, Jun 20 '13 at 08:51
This isn't really a correct definition of JavaScript or concurrency. JavaScript has run concurrently for a very long time, otherwise, webpages would be an awful option for creating UIs. Concurrency means actions can run asynchronously, so they won't block other things from happening, but they all run on a single UI thread. What you're describing is multi-threading with web workers, which are not required for AJAX calls or async/await operations. — Mike Young, Jul 24 '21 at 18:23
@MikeYoung: To me, asynchronous does not means concurrent: you push events to a queue and then execute them from an event loop. There is never two events or executions unit running in parallel or out of order(strictly through multiple CPU cores/threads, or through OS scheduling). Without workers, you will never face the need of memory/execution barriers (for mutex, semaphores, conditional variables, etc.). — Adrian Maire, Jul 24 '21 at 20:58

How to make form submission synchronous?

1 Answers1

Linked