hack for jQuery to serialize values of <input> and <select> elements that are NOT inside a form

Question

I've been looking through a lot of posts on stackoverflow and elsewhere for this answer, but am still struggling to find something that will work with the boundaries of my application.

I am building off of an existing plugin (http://johnny.github.com/jquery-sortable/) to create a drag-and-drop html editor for elementary students. This plugin uses jQuery to serialize output into a format that resembles HTML source code, which consequently automatically updates a web page preview window. Contenteditable spans work well for allowing users to input values without accidentally editing the html tags themselves.

However, I cannot get the values of the input or select elements to be included in the serialized output. After looking at the jQuery API for serialize, it seems to indicate that <input> elements must be inside a form and also have a name attribute. This is not something that will work with the nature of my project, so I am seeking a hack/workaround.

If anyone is aware of a hack to make sure that input and select element values are included in serialized output, I would greatly appreciate it!

Edit: Here is a link to the most live demo-able state I could get it to: http://tinker.io/5bdab/5. After trying a few places to put my code (jsbin, tinkerbin, jsfiddle), it seems they all have issues displaying an iframe? So you can't see the awesome fact that dragging and dropping elements in the middle column ultimately results in a live html page preview being changed next to it... However, you can still see that the results in the generated source code below get changed by being serialized (the part that I need assistance in figuring out how to serialize input and select elements so that their values will show up in the textarea).

However, the entire file is just in the HTML section (for convenience for instances like this, not for standard practice), since I link to external js files and have an internal style defined - if you were so inclined, you could just save the html file to your computer and check it out. I am not aware of a better option for displaying a live demo with supported iframes :/

Answer 1

Try wrapping all of your contents inside a div

<div id="wrapper">
    <input type="text" value="text text" name="text"> <br> 
    <select name="single">
      <option>Single</option>
      <option>Single2</option>
    </select>
    <textarea name="textarea">textarea text</textarea>
</div>

and then serialize all of the elements inside this div

$("#wrapper").find("select,textarea, input").serialize();

Demo