title: Wait for form.submit() / POST to complete
body: <p>I'm stuck in a really bizarre situation here. It's complicated to explain but I'll try my best.</p>
  
  <p><strong>Detailed explanation of the issue:</strong></p>
  
  <blockquote>
    <p>On every top Nav click (Green donuts/circles), or next button, I must submit the form, if it exists and is valid. If not valid, form.valid() triggers validation errors and return false would stop any further propagation. This setup was working flawlessly until I noticed a strange behavior which isn't very persistence. Form on my 3rd tab, specifically, is quite data heavy. When I hit next button it should practically go thru the same process: check for an existing form, if valid, then submit. Submit calls the POST action method and when post completes it GETs the view for next tab. It works like this 5/10 times but at other times GET executes before the POST, which causes next page to load with incomplete data. When I put breakpoints to debug, I see GET for the next tab executing before POST of the current tab.</p>
  </blockquote>
  
  <p><strong>UI Explained:</strong></p>
  
  <p>I have a UI with 4 navigation <code>&lt;a&gt;</code> buttons on top - in the center there's a always a form - and at the bottom I have Previous &amp; Next buttons.</p>
  
  <p><a href="https://i.stack.imgur.com/t7wKf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/t7wKf.png" alt="enter image description here"></a></p>
  
  <p>Forms are constructed in MVC using  <code>Ajax.BeginForm</code></p>
  
  <p>For each Nav link <code>&lt;a&gt;</code> element on top, I have a JavaScript function</p>
  
  <pre><code>var LoadTabs = function (e, arg) {  
      // This is to validate a form if one of the top links is clicked and form has incomplete fields...
      if (arg !== "prev" &amp;&amp; arg !== "next") {
          if (!window.ValidateForm(false)) return false;
      }
  
      var url = $(this).attr('data'); // this contains link to a GET action method
      if (typeof url != "undefined") {
          $.ajax(url, { context: { param: arg } }).done(function (data) {                
              $('#partialViewContainer').html(data);
          });
      }
  }
  </code></pre>
  
  <p>This function above binds to each top link on page load.</p>
  
  <pre><code>$('.navLinks').on('click', LoadTabs);
  </code></pre>
  
  <p>My Next &amp; Previous buttons basically trigger the click event i.e. <code>LoadTabs</code> function.</p>
  
  <pre><code>$('button').on('click', function () { 
          if (this.id === "btnMoveToNextTab") {
              if (!window.ValidateForm(true)) return false;                
  
              $.ajax({
                  url: url,
                  context: { param: 'next' },
                  method: "GET",
                  data: data,
                  success: function(response) {
                      if (typeof response == 'object') {
                          if (response.moveAhead) {
                              MoveNext();
                          }
                      } else {
                          $('#mainView').html(response);
                      }
                      ScrollUp(0);
                  }
              });
          } 
  
          if (this.id === "btnMoveToPreviousTab") {
              MoveBack();
          }
          return false;
      });
  
  
  MoveNext() Implementation is as below:
  
  function MoveNext() {        
      var listItem = $('#progressbarInd &gt; .active').next('li');        
  
      listItem.find('.navLink').trigger('click', ['next']);
      ScrollUp(0);
  }
  </code></pre>
  
  <p>The problem is, for some reasons, when Nav Link 3 is active and I hit NEXT button - Instead of posting the form first via form.submit() - the nav 4 gets triggered - hence GET for nav 4 runs before form POST of nav 3. </p>
  
  <p>My ValidateForm method is basically just checking if the form exists and is valid then Submit, else returns false. Its as below:</p>
  
  <pre><code>function ValidateForm(submit) {
  
      var form = $('form');
  
      // if form doesn't exist on the page - return true and continue
      if (typeof form[0] === "undefined") return true;
  
      // now check for any validation errors
      if (submit) {
          if (!$(form).valid()) {                
              return false;
          } else {
              $(form).submit();
          }
      } 
      else {
          return true;
      }
  
      return true;
  }
  </code></pre>
  
  <p>My speculation is that form.submit does get triggered as it should be but since submit takes a little longer to finish it continues with the next code block in the button <code>onclick</code> event.</p>
  
  <p>I first thought that this is a server side issue as in the POST I'm saving a big chunk of data with a few loops, and any code block that's process heavy I have that part in</p>
  
  <p><code>var saveTask =  Task.Factory.StartNew(() =&gt; ControllerHelper.SomeMethod(db, model)); Task.WaitAll(saveTask);</code></p>
  
  <p>WaitAll will wait and pause the execution until SomeMethod finishes executing. I'm not sure how can I lock a process in JavaScript and wait for it to finish execution. Because I think If i can somehow lock the form.submit() in ValidateForm until its finished processing .. via a callback method perhaps... </p>
  
  <p>Please if anyone can put me in right direction, I'd greatly appreciate the help. If you need more information please let me know I'd be happy to provide!</p>