Two issues at play here:
1. the HTML in most browsers doesn't reflect all recent changes done
via Javascript
2. the browser only saves form values after a submit
What you can do is save the values at the time of removal, and then re-
fill it when you put it back. Use the data() function:
// removal, store the values
var oldform = $('#form').children(':input').each(function(){
var t = $(this);
t.data('value', t.val() );
}).end().remove();
//append and fill
oldform.appendTo('body').children(':input').each(function(){
var t = $(this);
t.val( t.data('value') );
});
- ricardo
On Dec 30, 1:39 pm, the_woodsman <elwood.ca...@gmail.com> wrote:
> Hi all,
>
> I'm trying to save the content of a form into a hidden div, so I can
> bring it back later.
>
> However, I also want to save the user's progress on the form. I
> thought I could just dump $('#form').html() into the hidden div, but
> this seems to only remember the original html, no new value attributes
> exist even after I've entered some text.
>
> I tested with something like this:
>
> $('body').find(':input').each(
>
> function()
> {
> alert($(this).attr('name')+": "+$(this).val()+",
> "+$(this).attr
> ('value'));
> //.val() and .attr(val) are always up to date
> and consistent
>
> alert(""+$(this).parent().html());
> //inconsistent with .attr(val) above, seems to
> be the original only
>
> }
> );
>
> An obvious work around would be to iterate through the inputs
> explicitly setting the value atribute to .val(), which I assume would
> work, but it seems there must be a more elegant way...
>
> Is there something like .liveHtml()? Or another solution?
>
> Thanks in advance...
