Question

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

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

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

赞赏任何指针/想法。干杯 NIK

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

Answer 1

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

如果您想按顺序提交，则必须执行此操作：

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

Answer 2

在我看来，既然两个AJAX调用都在同一个函数jqsub()内，那么它们都被提交了，这也是你在第二个表单上看到确认的原因。如果您在提交表单时发布代码会更容易帮助，但我认为问题就在那里。

Answer 3

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

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

}

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

使用ajax和jquery进行多表单提交

3 个答案: