Многократная отправка формы с помощью ajax и jquery

Question

У меня проблема с двумя формами на одной странице, которые были отправлены с использованием 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 (), но система, которую я использую, разрешит только одну.По сути, я надеялся, что смогу остановить процесс с помощью некоторой логики в коде или подобном.По сути, они должны существовать в одной функции.

Answer 1

Вы уверены, что обе формы не были отправлены? Глядя на ваш код, кажется, что они оба представлены этой единственной функцией. 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);
            }
        });
    }
}

Answer 2

Ну, это очевидно. Вы помещаете оба события отправки в одну функцию (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);
        }
});

}

РЕДАКТИРОВАТЬ : В этом случае вы должны каким-то образом определить, какая форма отправляется.Вы можете передать идентификатор формы, представляемой функции, а затем использовать оператор switch и выполнить действие соответственно.Проверьте эту ссылку .ваша CMS должна каким-то образом предоставлять опции для такого рода операций.

Answer 3

Мне кажется, что, поскольку оба вызова AJAX находятся внутри одной и той же функции jqsub(), они оба отправлены, и поэтому вы также видите подтверждение во второй форме.Было бы легче помочь, если вы отправите код при отправке формы, но я думаю, что проблема в этом.