Send two forms with ajax one submit button

Question

I have two forms on one page (one generated by one service so I can't change it). I need when I sumbit form1 then firstly I send with Ajax, second form an after send second form send first form. I try to do it this way:

$('#form1').submit(function(event) {
            var this = (this);
            event.preventDefault();           
            $.ajax({
                type:"POST",
                url: "/wp-admin/admin-ajax.php",
                data: $('#form2').serialize(),
                success:function(data){
                    this.unbind('submit').submit();
                }         
            });
        });

The problem is, that I can't send first form after second one. Ajax ends with success, but first form are not send.

Thanks for help

Please spell out more clearly the desired order of events.

Roamer-1888
– Roamer-1888

2014-10-11 21:05:36 +00:00
Commented Oct 11, 2014 at 21:05 — Roamer-1888
– Roamer-1888, Commented Oct 11, 2014 at 21:05

Alex · Accepted Answer · 2014-10-11 21:10:15Z

1

You have to use promise to make it convenient.

function submitForm1 () { 
 return $.ajax({
                type:"POST",
                url: "/wp-admin/admin-ajax.php",
                data: $('#form1').serialize(),        
            });
}); 


function submitForm2 () { 
 return $.ajax({
                type:"POST",
                url: "/wp-admin/admin-ajax.php",
                data: $('#form2').serialize(),       
            });
});



submitForm2().done(function () {
    submitForm1();
});

answered Oct 11, 2014 at 21:10

Alex

2,1741 gold badge17 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Roamer-1888 Over a year ago

The question does not indicate that form1 should be submitted with AJAX.

Roamer-1888 · Accepted Answer · 2014-10-11 21:28:17Z

0

Two things :

$.ajax() returns a promise, so you can chain .then(fn), which can make life easier with regard to the meaning of this.
form.submit() will not retrigger the form's submit handler, therefore you don't need to unbind it.

Try this :

$('#form1').on('submit', function(event) {
    event.preventDefault();
    $.ajax({
        type: "POST",
        url: "/wp-admin/admin-ajax.php",
        data: $('#form2').serialize()
    }).then(this.submit.bind(this));
});

answered Oct 11, 2014 at 21:28

Roamer-1888

19.3k5 gold badges35 silver badges45 bronze badges

Comments

Patrick Evans · Accepted Answer · 2014-10-11 21:09:41Z

Your form does not get sent because the this keyword in your success function will not be referencing your form element and so your function calls with it are erroring out.

Also this is a reserved word you cannot use it as a variable

var this = (this);
//change to
var that = this;

You can set the execution context of the success function a couple ways

Pass the context in the ajax options

jQuery.ajax({
   //...
   context: jQuery("#form1"),
   success:function(data){
      this.unbind("submit").submit();
   }
})

Use the bind function

jQuery.ajax({
    //...
    success: function(data){
       this.unbind("submit").submit();
    }.bind(jQuery("#form1"))
});

Use a saved reference of this

var that = this;
jQuery.ajax({
   //...
   success:function(data){
       jQuery(that).unbind("submit").submit();
   }
});

Collectives™ on Stack Overflow

Send two forms with ajax one submit button

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related