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