How to avoid sending input fields which are hidden by display:none to a server?

Question

Imagine you have a form where you switch visibility of several fields. And if the field is not displayed you don\'t want its value to be in request.

How do you handl

Answer 1

Setting a form element to disabled will stop it going to the server, e.g.:

<input disabled="disabled" type="text" name="test"/>

In javascript it would mean something like this:

var inputs = document.getElementsByTagName('input');
for(var i = 0;i < inputs.length; i++) {
    if(inputs[i].style.display == 'none') {
        inputs[i].disabled = true;
    }
}
document.forms[0].submit();

In jQuery:

   $('form > input:hidden').attr("disabled",true);
   $('form').submit();

Answer 2

If you wanna disable all elements or certain elements within a hidden parent element, you can use

$("div").filter(":hidden").children("input[type='text']").attr("disabled", "disabled");

This example http://jsfiddle.net/gKsTS/ disables all textboxes within a hidden div

Answer 3

What about:

$('#divID').children(":input").prop("disabled", true); // disable

and

$('#divID').children(":input").prop("disabled", false); // enable

To toggle all children inputs (selects, checkboxes, input, textareas, etc) inside a hidden div.

Answer 4

I would either remove the value from the input or detach the input object from the DOM so it doesn't exist to be posted in the first place.

Answer 5

One very simple (but not always the most convenient) solution is to remove the "name" attribute -- the standard requires that browsers not send unnamed values, and all browsers I know abide to this rule.

Answer 6

You could use javascript to set the disabled attribute. The 'submit' button click event is probably the best place to do this.

However, I would advise against doing this at all. If possible you should filter your query on the server. This will be more reliable.