Question

I want to serialize my div section using jquery .serialize(). I know that we can only serialize the form with this function. So for this i created the clone of my div section and append it in the newly created form element and than serialize. The other input fields are serializing but the select list value are not ( the selected value is not in the serialized string). I have created a JSFIDDLE :

http://jsfiddle.net/mj6Eg/1/

Html

<div id="serializethis">
<label>Quantity</label>
<select id="quantity" name="Quantity" size="1">
  <option value="1">1</option>
  <option value="5">5</option>
  <option value="25">25</option>
  <option value="50">50</option>
</select>
</div>

<button id="serialize">Serialize</button>​

JS

$("#serialize").click(function(){

    var clone = $("#serializethis").clone();
    var form = $("<form />").append(clone);

    alert(form.serialize());

});​

What i am missing ?

Answer 1

When clone()-ing an element its selected value is lost. So your code won’t work. The easiest solution would be keeping a <form> around the elements the whole time (unless you use HTML5 that’s required anyway).

Another solution would be temporarily wrapping your elements in a form:

$("#serialize").click(function() {
    var data = $("#serializethis").wrap('<form>').parent().serialize();
    alert(data);
    $("#serializethis").unwrap('form');
});