Title: jQuery AJAX form how to get data
Tags: asp.net-mvc-3;jquery
Question: I have a form in my ASP.NET MVC 3 application that will use jquery to send it's data to the controller action instead of doing a normal postback:
$('.AjaxForm').live("submit", function (event) {
event.preventDefault();
$.validator.unobtrusive.parseDynamicContent('.uiModalContent input');
console.log($(this).attr('action'));
$.ajax({
type: 'POST',
url: $(this).attr('action'),
data: data,
success: function (responseHtml) {
alert(responseHtml);
},
error: function (responseHtml) {
alert('error');
},
statusCode:
{
404: function (responseHtml) {
alert('404');
},
500: function (responseHtml) {
alert('500');
}
}
});
});
However I get an error saying data is undefined... How do I get the data from the form and send it? Also does the built-in validation in ASP.NET MVC 3 work with my code or will I have issues? Thanks

Here is the accepted answer: You should use form.serialize() to make data value. Your code should be changed to:
url: $(this).attr('action'),
data: $('.AjaxForm').serialize(),

Here is another answer: you can use the serialize or serializeArray method with form to pass all parameters with the ajax call.
data: $('.AjaxForm').serialize(),
http://api.jquery.com/serialize/
http://api.jquery.com/serializeArray/

{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 2, 'CommentCount': 0, 'ContentLicense': 'CC BY-SA 3.0', 'CreationDate': '2011:00:10/07/11', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<asp.net-mvc-3><jquery>', 'Title': 'jQuery AJAX form how to get data', 'ViewCount': 890, 'id': 7685981, 'user_AboutMe': '', 'user_AccountId': 115185.0, 'user_DisplayName': 'Cameron', 'user_Reputation': 26976.0, 'user_Views': 2670.0, 'user_id': 302533.0}}