Howto "submit" part of a form using jQuery

Question

I have a form laid out as a spreadsheet. When the user leaves the line, I want to send the fields from this line to the server using jQuery Ajax. The page is one big form, so it’s actually not javascript that calls the submit button script - the form is huge, and I want to send a small part of the content because of speed.

I have written code that identifies a string and iterates through fields in a string. My problem is how to create a dat object to present something that is understandable. I can disassemble and store on the server.

At the moment, my code looks like this:

var dat=[]; $("#" + finalrow).find("input").each(function () { var o = $(this).attr("name"); var v = $(this).val(); dat.push({ o: v }); }); $.ajax({ url: 'UpdateRowAjax', dataType: 'json', type: 'POST', data: dat , success: function (data) { renderAjaxResponse(data); } }); 

Data collection does not work at all. So, how should I create this dat object so that it “looks” as much as the form representation as possible.

Answer 1

You can add elements containing the data that you want to send to the jQuery collection, and then call the serialize method on this object. It will return a parameter string that you can send to the server.

 var params = $("#" + finalrow).find("input").serialize(); $.ajax({ url: 'UpdateRowAjax', type: 'POST', data: params , success: function (data) { renderAjaxResponse(data); } }); 

Answer 2

You can use $. param () to serialize a list of items. For example, in your code:

 var dat= $.param($("input", "#finalrow")); $.ajax({ url: 'UpdateRowAjax', dataType: 'json', type: 'POST', data: dat , success: function (data) { renderAjaxResponse(data); } }); 

Example $ .param (): http://jsfiddle.net/2nsTr/

serialize () maps to this function, so calling this method should be a bit more efficient.

Answer 3

$.ajax The data parameter expects a map of key / value pairs (or a string), rather than an array of objects. Try the following:

 var dat = {}; $("#" + finalrow).find("input").each(function () { dat[$(this).attr('name')] = $(this).val(); });