How to take snap shot of a <form> in jQuery?

Question

There are multiple <input /> and <textarea> in the <form>,but none have their id or name.

Is it possible to take a snap shot of every thing inside the <form> and render it when need?

Answer 1

var formdata = $("#formid").serialize();

Answer 2

I'm not sure why you would have a bunch of inputs lacking names and id's, but you could cycle through and generate a name/id for each, and then serialize them using $.serialize();

// Give all a name (e0, e1, e2...)
$(":input").each(function(i){
  $(this).attr("name", "e"+i);
});

// Serialize the data
var data = $("#formid").serialize(); // ex: e0=zip&e1=foo&e2=bar

Answer 3

Updated This answer works for checkboxes, radio buttons, input and textareas. If you wanted select support, just add an additional test/type and parallel setter.

Store the values:

var values = $.map($("form :input"), function(n, i){ 
    if(n.is(':checkbox, :radio'))
      return [n.is(':checked'), "check"];
    else
      return [n.val() , "val"];
};

Restore the values:

$("form :input").each(function(i, el){
   var val = values[i];
   if(val[1] == "check"){
       if(val[0] == true) $(this).attr('checked', 'checked');
       else $(this).removeAttr('checked');
   } else {
       $(this).val(val[1]);
   }
});

This assumes the same order both times. It is (dare I say) impossible to store values without keys and then restore them in a different order, and still have the values match up to the correct fields. You need name or id to differentiate.. period.