jQuery mehrstufige Formularanimation, wenn der Benutzer auf "Senden" klickt

Question

Wie kann ich mein jQuery-Formular bei erfolgreicher Einreichung ausblenden und die Ergebnisse einblenden? Ich benutze es neben dem jQuery-Form-Plugin (http://jquery.malsup.com/form/).

Dies ist mein jQuery-Formularcode, der alle Eingaben verarbeitet.

<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> 

Dies ist der mehrstufiges bildet sie arbeiten mit:

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

Answer 1

Nun, ich einige Codes auf jsFiddle geändert, aber ich bin nicht sicher, ob es vollständig, was Sie‘ re suchen:

Nachdem ein neues Element mit der ID „Ergebnissen“ unter Ihrem letzten Schritt Element hinzugefügt, habe ich den folgenden Code zu Ihrem 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); 
      }); 
     } 
    }); 
}); 

... unter Ihrem folgenden Initialisierungsbaustein:

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

Deshalb wird, wenn die Taste gedrückt wird, wird der Inhalt der URL geladen wird, und dann das „letzten Schritt“ Element wird ausgeblendet, und (in diesem Beispiel) die Daten in das Element "results", das dann eingeblendet wird. Beachten Sie, dass Sie möglicherweise einige XML mit der AJAX-Anfrage abrufen und dann formatieren möchten, bevor Sie sie anzeigen, anstatt ein ganzes (styled) Seite.

Beispiel: http://jsfiddle.net/ayypV/

Edit: Auf den zweiten Blick erkannte ich,; Wenn die Ergebnisse als Antwort für die Formularübermittlung zurückkommen, können Sie etwas von dem Animationscode, den ich Ihnen gegeben habe, etwas verschieben. Die Animation und Datenverarbeitung könnte auch innerhalb Ihrer showResponse-Funktion erfolgen, wobei responseText als anzuzeigende Daten verwendet werden.

Welche würden Sie den Code der entlang der Linien mit etwas geschrieben ...

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