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
source

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
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
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
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
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
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
source