Question

如何让我的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>

这是它与之并行的多阶段形式：

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

Answer 1

好吧，我在jsFiddle上修改了你的一些代码，但我不确定它是否完全是你想要的：

在您的最后一步元素下添加了一个id为“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”元素，这是然后逐渐淡入。请注意，您可能希望使用AJAX请求获取某些XML，然后在显示之前对其进行格式化，而不是请求整个（样式化的）页面。

示例：http://jsfiddle.net/ayypV/

编辑：乍一看，我意识到了;如果结果作为表单提交的响应返回，您可以移动我给你的一些动画代码。动画和数据处理也可以在showResponse函数内完成，使用responseText作为要显示的数据。

您发布的代码中包含哪些内容......

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

用户单击提交按钮时的jQuery多阶段表单动画

1 个答案: