Question

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 and then the .html() could capture it then? Is there a better way to do this?

Thanks!

Answer 1

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/