95

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?

glaz666
  • 8,707
  • 19
  • 56
  • 75

7 Answers7

136

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();
karim79
  • 339,989
  • 67
  • 413
  • 406
  • 17
    With jQuery's pseudo selector `:input` instead of `input` you can also easily disable all `select` and `textarea` elements – Daniel Rikowski Dec 29 '12 at 11:17
  • 8
    In jQuery >= 1.6, instead of `attr("disabled", true)` you should use `prop("disabled", true)` http://api.jquery.com/prop/ – yorch Mar 07 '13 at 18:11
  • 2
    @dominicbri7 - As of jQuery 1.6, using `.prop()` instead of `.attr()` is recommended for getting AND setting both disabled and checked properties. Checking and or setting using `.attr()` will in some cases return undesired results. Please read the jQuery documentation before commenting on what yorch was referring to. – zgr024 Aug 14 '13 at 19:07
  • @zgr024 fine, deleted my comment – dominicbri7 Aug 15 '13 at 18:26
  • does the jquery method work for select menu as well? – alex Oct 01 '14 at 20:18
  • 2
    @DanielRikowski, What's with this jQuery here jQuery there nonsense. Let's talk Vanilla JS. – Pacerier Jan 27 '15 at 05:52
13

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.

Benedict Cohen
  • 11,912
  • 7
  • 55
  • 67
10

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.

Antonio Max
  • 8,627
  • 6
  • 43
  • 42
8

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

macio.Jun
  • 9,647
  • 1
  • 45
  • 41
  • This is a very good solution as is iterates through the hidden div and disables all. it should get more +1 – yeppe Nov 08 '16 at 07:06
3

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.

jsalvata
  • 2,155
  • 15
  • 32
  • 4
    Not recommendable because if you change states through javascript you can hardly reset the inputs without caching all the name attributes. It's way easier to switch disabled state. – Simon Dec 06 '13 at 10:42
1

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.

JMP
  • 7,734
  • 6
  • 33
  • 34
0

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()
})
Kodie Grantham
  • 1,963
  • 2
  • 17
  • 27