One submit button for multiple forms. Master save strategy,

Question

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. saving strategy for multiple forms Every form have submit() function overloaded and they look like this:

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

After pressing "Master Save" I want to submit forms in order 1 > 2 > 3. But I want Form 2 to wait until form 1 has ended.

Form1 submitted >> Form2 submitted >> Form3 submitted.

$('#masterSave').click(function () {

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

            $('#form2').submit(); // wait until form1 ended

            $('#form3').submit(); // waint until form2 ended

            return false;
        });

Please provide method to order submits in 'click' function as presented. Thanks.

put form 1, form 2 , form 3 in master form OR use ajax submit and then perform other submit on previous ajax success — Arijit Mukherjee, Oct 09 '14 at 09:13
According to [this](http://stackoverflow.com/questions/7985930/is-form-submit-synchronous-or-async) submit() is asynchronous() and it'll also reload your page. Just use AJAX, it's asynchronous but you can chain each call and it won't refresh your page. — Adriano Repetti, Oct 09 '14 at 09:14
Can't you just chain your promises using [deferred.then](http://api.jquery.com/deferred.then/) ? — Kippie, Oct 09 '14 at 09:15
@ArijitMukherjee form inside of form ? I think this is not possible. — Piotr Leniartek, Oct 09 '14 at 09:36
@Kippie I don't want to loose functionality of submitting individual forms. Can I use these `deffered.then` withous changing `submit` functions code ? Could you provide example for my question. — Piotr Leniartek, Oct 09 '14 at 09:39

Nishan Senevirathna · Answer 1 · 2014-10-09T09:51:46.593

1

you can use something like this

 Form1SubmitOverloaded();
 $.ajax({
  type: "POST",
  url: test1.php,
  data: $( "#form1" ).serialize(),
  success: function(){
                Form2SubmitOverloaded();
                $.ajax({
                      type: "POST",
                      url: test2.php,
                      data: $( "#form2" ).serialize(),
                      success: function(){
                                    Form3SubmitOverloaded();
                                    $.ajax({
                                          type: "POST",
                                          url: test2.php,
                                          data: $( "#form2" ).serialize(),
                                          success: function(){
                                                    alert("All submit successfully");
                                                    }  
                                    });
                                }  
                });
            }  
});

edited Oct 09 '14 at 09:51

answered Oct 09 '14 at 09:21

Nishan Senevirathna

709
5
12

But your answer those not use my `submit()` functions. There is logic inside of them. So this is useless. – Piotr Leniartek Oct 09 '14 at 09:45
So you can call your submit function as first statement of each success function. It does nothing since those are synchronous by default – Nishan Senevirathna Oct 09 '14 at 09:49
@rexilion this is what i meant in my 2nd statement – Arijit Mukherjee Oct 09 '14 at 10:00
@NishanSenevirathna but as stated in my question `Form1SubmitOverloaded(); Form2SubmitOverloaded(); Form3SubmitOverloaded();` are doing posts inside of them. So what to write istead of `url: test1.php, data: $( "#form1" ).serialize(),` because I dont want to do this second time? – Piotr Leniartek Oct 09 '14 at 10:11
Yes I mean do all the pre logic inside the Form2SubmitOverloaded() method and remove posting thing from it. Basically can't you separate pre-processing part from form posting part? – Nishan Senevirathna Oct 09 '14 at 10:15

score 1 · Answer 2 · answered Oct 09 '14 at 09:28

1

.post() method doesn't look to have a synch property. But .ajax() has.

I suggest you use the .ajax() method instead of the .post() shortcut method. That way you could force ajax to be synchronious

$.ajax({
   [...]
   async : false
}

answered Oct 09 '14 at 09:28

Dionys

3,083
1
19
28

Please have a look at the doc warning about async: false. – Dionys Oct 09 '14 at 09:31

One submit button for multiple forms. Master save strategy,

2 Answers2