Comment éviter d'envoyer des champs de saisie masqués par display: none à un serveur?

88

Imaginez que vous ayez un formulaire dans lequel vous permutez la visibilité de plusieurs champs. Et si le champ n'est pas affiché, vous ne voulez pas que sa valeur soit demandée.

Comment gérez-vous cette situation?

html http field glaz666
la source

Réponses:

128

Définir un élément de formulaire sur désactivé l'empêchera d'aller sur le serveur, par exemple:

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

En javascript, cela signifierait quelque chose comme ceci:

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

Dans jQuery:

   $('form > input:hidden').attr("disabled",true);
   $('form').submit();
karim79
la source
16
Avec le pseudo sélecteur de jQuery au :inputlieu de inputvous pouvez également désactiver facilement tous les éléments selectettextarea
Daniel Rikowski
8
Dans jQuery> = 1.6, au lieu de attr("disabled", true)vous devriez utiliser prop("disabled", true) api.jquery.com/prop
yorch
2
@ dominicbri7 - Depuis jQuery 1.6, .prop()il .attr()est recommandé d' utiliser à la place de pour obtenir ET définir à la fois les propriétés désactivées et vérifiées. La vérification et / ou le réglage en utilisant .attr()renverra dans certains cas des résultats indésirables. Veuillez lire la documentation de jQuery avant de commenter ce à quoi yorch faisait référence.
zgr024
@ zgr024 bien, a supprimé mon commentaire
dominicbri7
2
@DanielRikowski, Qu'est-ce que ce jQuery ici jQuery là un non-sens. Parlons Vanilla JS.
Pacerier
13

Vous pouvez utiliser javascript pour définir l'attribut désactivé. L'événement de clic sur le bouton «Soumettre» est probablement le meilleur endroit pour le faire.

Cependant, je déconseillerais du tout de faire cela. Si possible, vous devez filtrer votre requête sur le serveur. Ce sera plus fiable.

Benoît Cohen
la source
7

Si vous souhaitez désactiver tous les éléments ou certains éléments dans un élément parent masqué, vous pouvez utiliser

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

Cet exemple http://jsfiddle.net/gKsTS/ désactive toutes les zones de texte dans un div masqué

macio.Jun
la source
C'est une très bonne solution car elle itère à travers le div caché et désactive tout. il devrait obtenir plus de +1
yeppe
6

Qu'en est-il de:

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

et

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

Pour basculer toutes les entrées enfants (sélections, cases à cocher, entrées, zones de texte, etc.) à l'intérieur d'un div masqué.

Antonio Max
la source
C'est une excellente solution si vous souhaitez récupérer toutes les entrées. good work
doz87
3

Une solution très simple (mais pas toujours la plus pratique) consiste à supprimer l'attribut «nom» - la norme exige que les navigateurs n'envoient pas de valeurs sans nom, et tous les navigateurs que je connais respectent cette règle.

jsalvata
la source
4
Non recommandé car si vous changez d'état via JavaScript, vous pouvez difficilement réinitialiser les entrées sans mettre en cache tous les attributs de nom. Il est beaucoup plus facile de changer l'état désactivé.
Simon
1

Je supprimerais la valeur de l'entrée ou détacherais l'objet d'entrée du DOM afin qu'il n'existe pas pour être publié en premier lieu.

JMP
la source