JQuery многоступенчатая анимация формы, когда пользователь нажимает кнопку отправки - PullRequest
Новая
       21

JQuery многоступенчатая анимация формы, когда пользователь нажимает кнопку отправки

0 голосов
/ 26 марта 2012

Как я могу заставить мою многоэтапную форму jQuery исчезать при успешной отправке, и результаты исчезают?Я использую его вместе с плагином формы jQuery (http://jquery.malsup.com/form/).

Это мой код формы jQuery, который обрабатывает все представления. 

<script type="text/javascript">

// prepare the form when the DOM is ready 

$(document).ready(function() { 
var options = { 
    target:        '#t5',  
    beforeSubmit:  showRequest,  
    success:       showResponse   
}; 

// bind to the form's submit event 

$('#t5_booking').submit(function() { 
    $(this).ajaxSubmit(options); 
    return false; 
    }); 
});  

// pre-submit callback 

function showRequest(formData, jqForm, options) { 
    var queryString = $.param(formData); 
    // alert('About to submit: \n\n' + queryString); 
}

// post-submit callback 

function showResponse(responseText, statusText, xhr, $form)  { 
} 
</script>

Это многоступенчатая форма, с которой он работает вместе:1006 *

http://jsfiddle.net/methuselah/xSkgH/56/

1 Ответ

1 голос
/ 26 марта 2012

Ну, я изменил часть вашего кода на jsFiddle, но я не уверен, полностью ли это то, что вы ищете:

Добавив новый элемент с идентификатором "results" под вашимэлемент последнего шага, я добавил следующий код в ваш JavaScript ... 

$('#results').hide();
$('#last-step input').click(function() {
    $.ajax({
        url: 'http://fiddle.jshell.net/syyFV/show/light/',
        success: function(data) {
            $('#last-step').fadeOut(300, function() {
                $('#results').text(data).fadeIn(300);
            });
        }
    });
});

... ниже вашего следующего блока инициализации: 

// init
$('#t5_booking > div').hide().append(navHTML);
$('#first-step .prev').remove();
$('#last-step .next').remove();

Поэтому, когда кнопка нажатасодержимое URL-адреса загружается, а затем элемент «last-step» исчезает, и (в этом примере) данные помещаются в элемент «results», который затем исчезает. Обратите внимание, что вы можете захотетьизвлеките некоторый XML с помощью запроса AJAX, а затем отформатируйте его перед отображением, а не запрашивайте целую (стилизованную) страницу.

Пример: http://jsfiddle.net/ayypV/

Редактировать: на второй взгляд, японял;если результаты возвращались в качестве ответа для отправки формы, вы могли бы немного переместить часть кода анимации, который я вам дал.Анимацию и обработку данных можно также выполнить внутри вашей функции showResponse, используя responseText в качестве отображаемых данных.

Какой код вы выложили бы с чем-то вроде ... 

function showResponse(responseText, statusText, xhr, $form)  {
    $('#last-step').fadeOut(300, function() {
        $('#results').text(responseText).fadeIn(300);
    });
}
...