Skip to content

How to serialize current div by using $(this).parent() with JQuery?

I am trying to serialize the current div by using a clickevent. See code for good explanation:

$("#createreview").live('click', function() {
    alert($(this).parent().serialize());
    $.post('/admin/home/review/create/', $(this).parent().serialize(), function(data){
       alert('Review successfully added to database.' +data);
    });
});

Alert will show nothing, which means the div is not being serialized. This is the html in question. It’s inside a dialog, which is also the reason why I have to use live().

<div id="reviewdiv">
            <input type="hidden" value="7" name="homeid">
            <label>Content</label><textarea name="reviewcontent" id="reviews" rows="3" cols="60"></textarea><br>
            <label>Author</label> <input type="text" name="reviewauthor"><button class="ui-state-default ui-corner-all" id="createreview">Save Review</button><button class="ui-state-default ui-corner-all" id="removereview">Remove Review</button><br>
        </div>

Also this code is working without a problem to remove the current div by using the clickevent and parent selector.

$("#removereview").live('click', function() {
  $(this).parent().slideUp();
});

Answer

You can serialize a <div>.

The serialize uses internally the param method. So to serialize input elements that do not belong to a form, use the param method. Example: http://jsfiddle.net/DdVqJ/

But remember, the correct (and semantic) way is to put your input elements inside a form.