當用戶點擊提交按鈕時jQuery多階段表單動畫

如何讓我的jQuery多階段表單在成功提交時淡出並且結果淡入？我將它與jQuery表單插件（http://jquery.malsup.com/form/）一起使用。當用戶點擊提交按鈕時jQuery多階段表單動畫

這是我處理所有提交的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/

來源

2012-03-26 CJS

嗯，我修改了一些你的代碼上的jsfiddle，但我不知道這是否是完全是你」重新尋找：已經加入了新的元素與你的最後一步的元素下面的「結果」的ID

，我下面的代碼添加到您的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的內容加載，然後將「最後一步」元素淡出，並（在本例中）將數據放入「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-26 09:02:28 Spooky

如何將代碼看起來好像是圍繞移動到jQuery的形式showResponse方法？ – CJS 2012-03-26 10:04:48

我爲你添加了一些代碼。 – Spooky 2012-03-26 10:59:25

當用戶點擊提交按鈕時jQuery多階段表單動畫

回答

相關問題