Стиль представления формы AJAX

Question

Я использую Ajax с jQuery для отправки веб-формы.Когда веб-форма отправляет хорошее сообщение, появляется сообщение.Сообщение охватывает саму форму и предоставит пользователю информацию о том, что делать дальше и т. Д. Проблема заключается в том, что форма может иметь несколько полей, и когда пользователь нажимает «Отправить», он видит, что форма исчезает, но это все.

Я добавил несколько JS, которые выводили бы пользователя в верхнюю часть страницы (и видели сообщение с благодарностью вверху), но все же там, где была форма, могло быть много пустого пространства.

Вопрос, который у меня возникает, состоит в том, как бы я изменил форму из исходного состояния для отображения: нет;пока сообщение с подтверждением показывается на своем месте.

Вот копия моего кода:

function jqsub() {

var $j = jQuery.noConflict();
var $jform = $j('#ajaxform'); // form ID
var $jmessagebox = $j('#ajaxdiv'); // message box ID
var $jsuccessmessage = "<h3>Thank You For Your Submission!</h3>"; // success message in HTML format
var $jerrormessage = "<h3>Error - Please Try Again</h3>"; //error message in HTML format

$j.ajax({
    type: 'POST',
    url: $jform.attr('action'),
    data: $jform.serialize(), 
    success: function (msg) { 
                        if (msg.FormProcessV2Response.success) {
                        $jmessagebox.append($jsuccessmessage) 
                        $jmessagebox.fadeIn();
                        }
                        else {
                        $jmessagebox.append($jerrormessage) 
                        $jmessagebox.fadeIn();  
                        }    
                },
    error: function (msg) {
                        $jmessagebox.append($jerrormessage) 
                        $jmessagebox.fadeIn();
                },
     });
$j( 'html, body' ).animate( { scrollTop: 0 }, 0 );
}

Вот страница, с которой я работаю: http://ubhape2remodel.businesscatalyst.com/testform.html

Еще одно примечание: в случае ошибкив форме, как просто удалить сообщение об ошибке и снова показать форму?(В основном, происходит переключение между состояниями отображения формы и сообщения). Еще раз спасибо за вашу помощь!

Надеюсь, что все это имеет смысл.

Я приветствую любые советы, идеи и помощь.

Спасибо!

Линда

Answer 1

Вы можете медленно поменять форму, а затем показать сообщение:

$jform.fadeOut("slow", function(){
  $jmessagebox.fadeIn("slow");
});

Надеюсь, это поможет. Приветствия

Answer 2

вы можете скрыть элементы, используя .hide()

Answer 3

Почему бы не извлечь сообщение из формы, и в случае успеха сначала исчезнуть из формы, а затем исчезнуть в сообщении:

 if (success) {
     $('#formId').fadeOut('fast', function(){
          $('#messageId').fadeIn('fast');
     });
 }

Чтобы заставить вас произойти одно за другим (последовательно), выдолжны предоставить функцию обратного вызова для fadeOut.

Answer 4

Идентификатор формы на вашей странице - «ajaxform», поэтому ниже следует скрыть форму (используя объект $ j, который вы определили выше):

$j("#ajaxform").css("display","none");

Могу ли я также предложить поместить код сокрытия / прокрутки в функцию обратного вызова success? Если форма не была успешно отправлена, вы не хотите сообщить своим пользователям, не так ли?

Отредактировано, чтобы показать возвращение формы после ошибки (где buttonID - это идентификатор кнопки в окне сообщения:

$j("#buttonID").live("click",function(){
    $jmessagebox.fadeOut("slow", function(){
        $jform.fadeIn("slow");
    });
});