Make array of data from $(this).serialize()

Question

Hello,

I have a product page wherein if the user clicks on edit, an overlay form window is populated to make it editable.

After the edit is completed and the user clicks submit I want to update the text() of each field of the product which was changed.

So instead of getting value of each input field and updating is there a way I can use $(this).serialize() as an array

Current solution I think of is:

var name = $("#input_name").val();
$("#name_id").innerhtml(name);

But the problem is that there are a lot of fields, and I wanted to use the power of jQuery, instead of grabbing each input field's value manually.

Answer 1

Check out the serializeArray method.

var array = $('#someForm').serializeArray();

Answer 2

Well, there's got to be some way of relating the input elements to the plain text elements (spans? divs?) you want to update. That could be by some naming convention, or by some explicit hook in the input field class names. Once you've got that convention established, it should be a pretty easy matter to iterate over the form fields and update the text.

So for example if the text areas are <span> tags whose "id" value is the name of the input field plus the suffix "_text", then you could do something like this:

$('#theFormId input:text').each(function() {
  $('span#' + $(this).attr('name') + '_text').text($(this).val());
});

There are approximately one billion possible variations of course.