Capturing all HTML in a form including text field values without posts

I'm working a form builder interface for users to add various input fields, and text areas that they add to categories and sub categories.

I've worked out the Javascript (JQuery) to generate the nested categories and input fields for the user to fill out.

I need to capture this exact generated HTML including the values in the input fields so that when they go back in to edit this form, it's as they last left off.

I had tried using $("#myForm").html() and saving it to a hidden text area which is saved to the database. This is fine except the .html() does NOT capture what has been entered in the input fields.

Later on, I need to parse out this generated HTML, filter out all the add/remove buttons and end up with the nested categories and form field values.

My thought was to bind keyup events on all the fields to update their own value field a开发者_C百科nd then the .html() could capture it then? Is there a better way to do this?

Thanks!

If you're going through the trouble of parsing your generated html to regenerate your form, it would probably be easier to use jQuery's built-in form serialization function to store form values:

http://api.jquery.com/serialize/

I don't know if this you're looking for. I had similar problem, and after some research, I found this can solve my problem (not too efficient, but it's enough):

        $('#form input:text').each(
            function(){
                $(this).attr('value', $(this).val());
            });

        $('#form input:radio').each(
            function(){
                if($(this).is(':checked')) {
                    $(this).attr('checked', 'checked');
                }
                else{
                    $(this).removeAttr('checked');
                }
            });
        // I only give sample for input text and input radio
        var html = $("#form ").html();
        console.log (html);

Could you not store these into the contents of an array and store it in the DB and then store the pointer to this in a Cookie, Session or return it when the user logs on?

You could populate the HTML generated using the method you mentioned above, but you would have to iterate the fields and write the data values entered at that instant to the array you are going to write back to the DB.

Why would you want to store the HTML of a form in database?
What if the form changes(new fields get added/removed as a part of a release)?
Instead store the field values using jQuery.serialize and then populate the fields on form based on the stored json string.