Question

Hi everyone I was using the jQuery form plugin to process form submission (found at http://malsup.github.com/jquery.form.js) on my page but now have to switch to using an purely jQuery AJAX based method (without using any the form plugin but I can use jQuery). What would be the best method of achieving this? I’m having difficulty translating it across. What would an ideal solution look like?

This is the code I’m using at the moment below:

// prepare the form when the DOM is ready 

$(document).ready(function() { 
var options = { 
    target:        '#result',  
    beforeSubmit:  showRequest,  
    success:       showResponse   
}; 

// bind to the form's submit event 

$('#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)  {
    $('#last-step').fadeOut(300, function() {
    $('#result').html(responseText).fadeIn(300);
    });
}

Answer 1

You can do something like this:

$.ajax({
    url: 'process.php',
    data: $('form[name="booking"]').serialize(),
    dataType: 'html',
    type: 'POST',
    success: function(data) {
        $('#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);
    }
});

• The data param, can be something like this: ‘param1=value1&param2=value2&param3=value3’
• type can be: POST or GET
• dataType can be: json, html, xml..

For more information, refer to this url: http://api.jquery.com/jQuery.ajax/