CODEWITHSUNDEEP
jqueryjquery-forms-plugin
CJS
CJS

Reputation: 351

jQuery multi-stage form animation when user clicks submit button

How can I make my jQuery multi-stage form fade out on successful submission and the results fade in? I'm using it alongside the jQuery form plugin (http://jquery.malsup.com/form/).

This is my jQuery form code that handles all the submission.

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

This is the multi-stage form it works alongside:

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

Upvotes: 0

Views: 855

Answers (1)

Spooky
Spooky

Reputation: 2993

Well, I modified some of your code on jsFiddle, but I'm not sure if it's completely what you're looking for:

Having added a new element with the id of "results" below your last-step element, I added the following code to your 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);
            });
        }
    });
});

...below your following initialization block:

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

Therefore, when the button is pressed, the content of the URL is loaded, and then the "last-step" element is faded out, and (in this example) the data put into the "results" element, which is then faded in. Note that you may wish to fetch some XML with the AJAX request, and then format it before displaying it, rather than requesting a whole (styled) page.

Example: http://jsfiddle.net/ayypV/

Edit: On second glance, I realised; if the results were coming back as the response for the form submission, you could move some of the animation code I gave you around a bit. The animation and data handling could also be done inside your showResponse function, using the responseText as the data to be displayed.

Which would the code you posted with something along the lines of...

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

Upvotes: 1

Related Questions