CODEWITHSUNDEEP
phpjquery
CJS
CJS

Reputation: 351

jQuery ajax on multi-step form

Hi everyone I'm trying to incorporate jQuery AJAX on my multi-step form so that it updates a certain div to the one on the process.php page but it keeps loading the results on a new page. How can I get it to update the div without refreshing the page?

This is the jQuery code I'm using:

$.ajax({
    url: 'process.php',
    data: $('form[name="booking"]').serialize(),
    dataType: 'html',
    type: 'POST',
    success: function(data) {

        // this is the bit that needs to update the div

        $('#last-step').fadeOut(300, function() { $('#result').html(data).fadeIn(300);
    },
    complete: function (data) {
        // your code here
    },
    error: function (url, XMLHttpRequest, textStatus, errorThrown) {
        alert("Error: " + errorThrown);
    }
});

This is the code for my multistep form: http://jsfiddle.net/xSkgH/47/.

Many thanks in the advance

Upvotes: 0

Views: 3021

Answers (1)

Shyju
Shyju

Reputation: 218852

I dont see a div called result in your Markup. So probably you need to show your result in the last div you are showing. And you are missing }) also. the below code should work,

$.ajax({
    url: 'process.php',
    data: $('form[name="booking"]').serialize(),
    dataType: 'html',
    type: 'POST',
    success: function(data) {

        // this is the bit that needs to update the div

        $('#last-step').fadeOut(300, function() { 
              $('#last-step').html(data).fadeIn(300);
        });
    },
    complete: function (data) {
        // your code here
    },
    error: function (url, XMLHttpRequest, textStatus, errorThrown) {
        alert("Error: " + errorThrown);
    }
});

Upvotes: 1

Related Questions