Menu
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 :/
808
jQuery serialize() Method The serialize() method creates a URL encoded text string by serializing form values. You can select one or more form elements (like input and/or text area), or the form element itself. The serialized values can be used in the URL query string when making an AJAX request.
Data serialization is the process of converting an object into a stream of bytes to more easily save or transmit it. The reverse process—constructing a data structure or object from a series of bytes—is deserialization.
In JavaScript, for example, you can serialize an object to a JSON string by calling the function JSON. stringify() . CSS values are serialized by calling the function CSSStyleDeclaration. getPropertyValue() .
To serialize a FormData object into a query string, pass it into the new URLSearchParams() constructor. This will create a URLSearchParams object of encoded query string values. Then, call the URLSearchParams. toString() method on it to convert it into a query string.
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
113
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
