如何避免发送显示隐藏的输入字段: 没有到服务器?

假设您有一个窗体,可以在其中切换几个字段的可见性。如果没有显示该字段,则不希望它的值出现在请求中。

你是怎么处理这种情况的?

80914 次浏览

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.

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();

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.

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

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.

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.

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()
})