Multiple form submission with ajax and jquery

Question

I am having an issue where I have two forms on the one page that are submitted using Ajax and Jquery. My code works to submit the forms the only issue is when one form is submitted it shows the confirmation message on the other form as well, even though that form has not been submitted.

Basically I have hidden a div with the confirmation message and it appears after the message successfully goes through. Does anybody know how I can stop the confirmation message appearing on the form that hasn't submitted. Here is the code -

function jqsub() {

//Form 1
var $form = $('#catwebformform39698');
var $messagebox = $('#hide-message');
var $successmessage = " "; 

    $.ajax({
    type: 'POST',
    url: $form.attr('action'),
    data: $form.serialize(),
    success: function (msg) {
            $messagebox.append($successmessage);
            $messagebox.delay(800).fadeIn(550);
            $form.fadeOut(250);
        }
});

//Form 2
var $form2 = $('#catemaillistform1628'); 
var $messagebox2 = $('#hide-message2');
var $successmessage2 = " "; 

$.ajax({
    type: 'POST',
    url: $form2.attr('action'),
    data: $form2.serialize(),
    success: function (msg) {
            $messagebox2.append($successmessage2);
            $messagebox2.delay(800).fadeIn(550);
            $form2.fadeOut(250);
        }
});
} 

Any pointers/ideas appreciated. Cheers Nik

Edit * I had tried to add another jqsub() function but the system I am using will only allow one. So essentially I was hoping I could stop the process with some kind of logic within the code or similar. So essentially they have to exist in the one function.

Answer 1

Are you sure both form have not been submitted? Looking at your code, it looks like they're both submitted by that one function. javascript is asynchronous, so the 2nd form would submit right after the first one, w/o waiting for the first one to finish.

If you wanted to submit then sequentially, you would have to do this:

function jqsub() {
    jqsub1();

    function jqsub1() {
        //Form 1
        var $form = $('#catwebformform39698');
        var $messagebox = $('#hide-message');
        var $successmessage = " "; 

        $.ajax({
            type: 'POST',
            url: $form.attr('action'),
            data: $form.serialize(),
            success: function (msg) {
                $messagebox.append($successmessage);
                $messagebox.delay(800).fadeIn(550);
                $form.fadeOut(250);

                jsub2();
            }
        });
    }

    function jsub2() {
        //Form 2
        var $form2 = $('#catemaillistform1628'); 
        var $messagebox2 = $('#hide-message2');
        var $successmessage2 = " "; 

        $.ajax({
            type: 'POST',
            url: $form2.attr('action'),
            data: $form2.serialize(),
            success: function (msg) {
                $messagebox2.append($successmessage2);
                $messagebox2.delay(800).fadeIn(550);
                $form2.fadeOut(250);
            }
        });
    }
}

Answer 2

Well it seems to me that since both AJAX calls are inside the same function jqsub() they are both submitted and that's why you see the confirmation on the second form too. It would be easier to help if you post the code when you submit the form but I think that the problem lies there.

Answer 3

Well, it's obvious.Your putting both the submit events inside a single function (jqsub). you just need to separate them. like this:

function jqsub(){
//Form 1
var $form = $('#catwebformform39698');
var $messagebox = $('#hide-message');
var $successmessage = " "; 

    $.ajax({
    type: 'POST',
    url: $form.attr('action'),
    data: $form.serialize(),
    success: function (msg) {
            $messagebox.append($successmessage);
            $messagebox.delay(800).fadeIn(550);
            $form.fadeOut(250);
        }
});
}
function jqsub2(){
//Form 2
var $form2 = $('#catemaillistform1628'); 
var $messagebox2 = $('#hide-message2');
var $successmessage2 = " "; 

$.ajax({
    type: 'POST',
    url: $form2.attr('action'),
    data: $form2.serialize(),
    success: function (msg) {
            $messagebox2.append($successmessage2);
            $messagebox2.delay(800).fadeIn(550);
            $form2.fadeOut(250);
        }
});

}

EDIT : In that case you must somehow determine which form is being submitted. You can pass the id of the form being submitted to the function and then use a switch statement and perform the action respectively. Check this link . your CMS must somehow provide options for this kind of operation.