Hack jQuery to serialize values ​​of <input> and <select> elements that are NOT inside the form

Question

I was looking through a lot of posts about stackoverflow and other places for this answer, but I'm still trying to find something that will work with the borders of my application.

I am creating 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 in a format that resembles the HTML source code, which therefore automatically updates the web page preview window. Contenteditable spanans work well, allowing users to enter values ​​without accidentally editing the html tags themselves.

However, I cannot get the values ​​of the input or selected elements to be included in the serialized output. Looking at the jQuery API for serialization, it seems that the <input> elements should be inside the form and also have a name attribute. This is not something that will work with the nature of my project, so I'm looking for a hack / workaround.

If someone knows about hacking, to make sure that the input and selection values ​​of an element are included in serialized output, I would really appreciate it!

Edit: here is a link to the liveliest demo state that I could get: http://tinker.io/5bdab/5 . Having tried a few places to put my code (jsbin, tinkerbin, jsfiddle), does everyone seem to have problems displaying the iframe? Thus, you cannot see the amazing fact that dragging and dropping elements in the middle column ultimately leads to a live view of the html page changing next to it ... However, you can still see that the results in the generated source code are lower modified by serialization (the part that I need help in determining how to serialize input and select elements so that their values ​​appear in the text box).

However, the whole file is only in the HTML section (for convenience for such cases, and not for standard practice), since I refer 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 do not know the best option for showing a live demo with supported iframes: /

Answer 1

Try to wrap all the 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 the elements inside this div

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

Demo