Javascript 使用ajax和jquery提交多个表单

我遇到了一个问题，我在一个页面上有两个表单，它们是使用Ajax和Jquery提交的。我的代码用于提交表单唯一的问题是，当提交一个表单时，它也会在另一个表单上显示确认消息，即使该表单尚未提交

基本上，我已经隐藏了一个带有确认消息的div，它在消息成功通过后出现。有人知道我如何阻止未提交表单上出现的确认消息吗。这是代码-

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

任何建议/想法都值得赞赏。 干杯 尼克

编辑*

---

我曾尝试添加另一个jqsub（）函数，但我使用的系统只允许添加一个。所以本质上我希望我可以用代码中的某种逻辑或类似的东西来停止这个过程。所以本质上，它们必须存在于一个函数中。

在我看来，因为两个AJAX调用都在同一个函数中

jqsub（）

，所以它们都被提交了，这就是为什么您在第二个表单上也看到了确认。如果您在提交表单时发布代码会更容易提供帮助，但我认为问题在于此。

很明显，您将两个提交事件放在一个函数（jqsub）中。 你只需要把它们分开。像这样：

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

}

---

编辑：在这种情况下，您必须以某种方式确定提交的表单。您可以将提交表单的id传递给函数，然后使用switch语句分别执行操作。检查。您的CMS必须以某种方式为此类操作提供选项。

您确定两个表单都没有提交吗？看看你的代码，看起来它们都是由一个函数提交的。javascript是异步的，所以第二个表单将在第一个表单之后提交，而不等待第一个表单完成

如果要按顺序提交，则必须执行以下操作：

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

---

很抱歉，我没有提到我只能使用jsub（）一次，不能创建它的任何其他变体，我使用的是一个专有的CMS：（很好，只需将这些函数包装在jsub（）中即可。更新我不是很清楚，jqsub（）是添加到我正在使用的CMS中的一个函数。jqsub1（）jqsub2（）等等…不工作，因为它们是系统的一部分。我需要研究如何仅使用jqsub（）使其工作。我希望有某种逻辑，比如如果提交了表单1，那么就停止，否则就转到表单2。本质上，这一切都必须存在于一个函数中。有点痛苦！本质上，上面的代码只是一个函数。其他两个函数都在其中。我假设您的CMS只允许您连接一个名为jqsub的特定函数（）。它不应该关心jqsub（）的结构，除非有其他限制。啊，是的，我明白了。这段代码仍然提交表单，但仍然触发确认消息。我将其标记为所选答案，因为这似乎是对CMS的限制，而不是对代码的限制。我没有提到我只能使用jsub（）一旦无法创建它的任何其他变体，我使用的是专有CMS：（对不起，我没有提到我只能使用jsub（）一次，无法创建它的任何其他变体，我使用的是专有CMS:(