Sign up ×
Code Review Stack Exchange is a question and answer site for peer programmer code reviews. It's 100% free, no registration required.

I was using the jQuery form plugin to process form submission (found here) 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?

// 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);
    });
}
share|improve this question

1 Answer 1

up vote 3 down vote accepted

You can use jQuery's AJAX function for this directly and, you can pass object literals as parameters without using the form elements.

var params = {id : '1234'};
$.ajax({
  type: 'GET',
  url: url, // action attribute from form element 
  data: JSON.stringify(params),
  contentType: 'application/json; charset=utf-8',
  dataType: 'json', 
  success: function (result) {
      console.log(result);
  },
  error: errorFunc
});

Documentation can be found here.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.