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でコードの一部を変更しましたが、それが完全にあなたが探しているものであるかどうかはわかりません。

最後のステップの要素の下に「results」の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のコンテンツが読み込まれ、「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 に答える