title: One submit button for multiple forms. Master save strategy,
body: <p>Picture below shows simplification of the html page layout I am working with. It has 3 forms, every form has it's own submit button and can be submitted individually. At the top of the page "Master Save" is located. This button should save all 3 forms.
  <img src="https://i.stack.imgur.com/BjVfR.png" alt="saving strategy for multiple forms">
  Every form have <code>submit()</code> function overloaded and they look like this:</p>
  
  <pre class="lang-js prettyprint-override"><code>    form1.submit(function () {
                  Form1SubmitOverloaded(this);
              return false;
       });
  
      Form1SubmitOverloaded = function (form) {
  
              $.post(form.action, $(form).serialize(), function (data) {
  
              //DOM manipulation, etc/
  
              }).fail(function () {
  
                  //error parsing etc.
  
              });
  
          return false;
      };
  </code></pre>
  
  <p>After pressing "Master Save" I want to submit forms <strong>in order</strong> 1 > 2 > 3. But I want Form 2 to wait until form 1 has ended.</p>
  
  <p>Form1 submitted >> Form2 submitted >> Form3 submitted.</p>
  
  <pre><code>$('#masterSave').click(function () {
  
              $('#form1').submit();
  
              $('#form2').submit(); // wait until form1 ended
  
              $('#form3').submit(); // waint until form2 ended
  
              return false;
          });
  </code></pre>
  
  <p>Please provide method to order submits in 'click' function as presented.
  Thanks.</p>