How to avoid sending input fields that are hidden when displayed: none for the server?

Question

Imagine that you have a form in which you switch the visibility of several fields. And if the field is not displayed, you do not want its value to be in the request.

How do you deal with this situation?

Answer 1

Setting the form element to disable will stop it on the server, for example:

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

In javascript, this will 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

You can use javascript to set the disabled attribute. Probably the best place for this is when the submit button is clicked.

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

Answer 3

If you want to disable all elements or certain elements in a hidden parent element, you can use

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

In this example, http://jsfiddle.net/gKsTS/ disables all text fields in a hidden div

Answer 4

What about:

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

and

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

To switch all child inputs (selection, checkboxes, input, text fields, etc.) inside a hidden div.

Answer 5

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

Answer 6

I would either remove the value from the input or disconnect the input object from the DOM so that it does not exist for publication in the first place.