How to avoid sending input fields which are hidden by display:none to a server?
HtmlHttpFieldHtml Problem Overview
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 handle this situation?
Html Solutions
Solution 1 - Html
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();
Solution 2 - Html
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.
Solution 3 - Html
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.
Solution 4 - Html
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
Solution 5 - Html
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.
Solution 6 - Html
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.
Solution 7 - Html
What I did was just remove the elements entirely when the form is submitted:
var myForm = document.getElementById('my-form')
myForm.addEventListener('submit', function (e) {
e.preventDefault()
var form = e.currentTarget
var hidden = form.getElementsByClassName('hidden')
while (hidden.length > 0) {
for (var i = 0; i < hidden.length; i++) {
hidden[i].remove()
}
}
form.submit()
})