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 = "&nbsp;"; 

    $.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 = "&nbsp;"; 

$.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.

rkw · Accepted Answer · 2011-12-06 09:10:54Z

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 = "&nbsp;"; 

        $.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 = "&nbsp;"; 

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

edited Dec 6, 2011 at 9:10

answered Dec 6, 2011 at 8:44

rkw

7,2974 gold badges28 silver badges39 bronze badges

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

6 Comments

Nik Over a year ago

Sorry I didn't mention I can only use jsub() once and cannot create any other variations of it, I am using a proprietary CMS :(

rkw Over a year ago

that's perfectly fine, just wrap those functions inside jsub(). updated

Nik Over a year ago

I am not being very clear, jqsub() is a function added to the propietry CMS I am using. jqsub1() jqsub2() etc... do not work as they're a apart of the system. I need to work how to get it to work using only jqsub(). I was hoping there could be some kind of logic, like if form one is submitted stop else move onto form 2. Essentially it all has to exist in the one function. A bit painful!

rkw Over a year ago

Essentially, the code above is just one function. Those other 2 functions are inside of it. I'm assuming your CMS lets you hook onto just one specific function called jqsub(). It shouldn't care about the structure of jqsub(), unless there is some other restriction.

Nik Over a year ago

Ah yes I see. This code still submits the form but also still triggers the confirmation message. I marking it as the chosen answer because it seems to be a limitation to the CMS rather than the code. Cheers

|

2hamed · Accepted Answer · 2011-12-06 09:43:35Z

0

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 = "&nbsp;"; 

    $.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 = "&nbsp;"; 

$.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.

edited Dec 6, 2011 at 9:43

answered Dec 6, 2011 at 8:41

2hamed

9,10713 gold badges73 silver badges113 bronze badges

1 Comment

Nik Over a year ago

Sorry I didn't mention I can only use jsub() once and cannot create any other variations of it, I am using a proprietary CMS :(

BenMorel · Accepted Answer · 2013-11-12 00:16:42Z

0

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.

edited Nov 12, 2013 at 0:16

BenMorel

37k52 gold badges208 silver badges339 bronze badges

answered Dec 6, 2011 at 8:39

Nicola Peluchetti

77k32 gold badges150 silver badges197 bronze badges

1 Comment

Nik Over a year ago

Sorry I didn't mention I can only use jsub() once and cannot create any other variations of it, I am using a proprietary CMS :(

Collectives™ on Stack Overflow

Multiple form submission with ajax and jquery

3 Answers 3

6 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related