0

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

4

1 回答 1

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);
    });
}
于 2012-03-26T09:02:28.150 回答