Serialize a Form but some Elements

Question

I have a form which has elements in a couple of divs.

Based on a drop down, some of these divs might be hidden and some will be displayed.

i want to Serialize the form with just the element which are visible and not the hidden divs.

Is there any way I can filter out those hidden divs.

tried this but doesn't work

$('<tr />').data($(this).find('form:not(.child:hidden)').serializeObject());

serializeObject is a plugin which converts serializeArray into an Object.

score 5 · Accepted Answer · answered Jun 27 '12 at 05:54

5

Assuming that in your context this is the <form> try the following:

var data = $(':input:visible', this).serialize();
$('<tr />').data(data);

And here's a live demo.

answered Jun 27 '12 at 05:54

Darin Dimitrov

994,864
265
3,241
2,902

it can be textarea, select, checkbox, radio (basically I dont want to check for each and every visible element, i want to select all elements and negate the elements in hidden div) – Atif Jun 27 '12 at 05:56
Oops sorry. In this case put `:` in front of `input`, like this `:input:visible`. I have updated my answer. – Darin Dimitrov Jun 27 '12 at 05:58

Tieson T. · Answer 2 · 2012-06-27T05:59:04.380

If you disable the unused form elements, they do not get submitted with the form. That may be the easiest/quickest solution.

From a previous question on SO, I have these defined in my local extensions:

/* 
    Extension methods to quickly enable/disable form elements 
    @@see http://stackoverflow.com/questions/625109/jquery-script-load-timing/625126#625126
*/
$.fn.disable = function() {
    return this.each(function() {
        if (typeof this.disabled != "undefined") this.disabled = true;
    });
}

$.fn.enable = function() {
    return this.each(function() {
        if (typeof this.disabled != "undefined") this.disabled = false;
    });
}

So, you could do something like:

$('.hidden-div-class').disable();

And then serialize the form.

Serialize a Form but some Elements

2 Answers2