Comment éviter d'envoyer les champs de saisie qui sont cachés par display:none à un serveur?

Question

Imaginez que vous avez un formulaire où vous faites basculer la visibilité de plusieurs champs. Et si le champ n'est pas affiché, vous ne voulez pas que sa valeur soit dans la requête.

Comment gérez-vous cette situation?

Answer 1

Le fait de définir un élément de formulaire sur disabled empêchera qu'il soit envoyé vers le serveur, par exemple :

En JavaScript, cela voudrait dire 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();

En jQuery :

   $('form > input:hidden').attr("disabled",true);
   $('form').submit();

Answer 2

Vous pourriez utiliser JavaScript pour définir l'attribut désactivé. L'événement de clic sur le bouton 'submit' est probablement le meilleur endroit pour le faire.

Cependant, je vous conseillerais de ne pas le faire du tout. Si possible, vous devriez filtrer votre requête sur le serveur. Cela sera plus fiable.

Answer 3

Si vous souhaitez désactiver tous les éléments ou certains éléments à l'intérieur d'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 tous les champs de texte à l'intérieur d'une div cachée

Answer 4

Une solution très simple (mais pas toujours la plus pratique) est de supprimer l'attribut "name" -- la norme exige que les navigateurs ne renvoient pas de valeurs sans nom, et tous les navigateurs que je connais respectent cette règle.

Answer 5

Je supprimerais soit la valeur de l'entrée, soit je détacherais l'objet de l'entrée du DOM pour qu'il n'existe pas et ne soit pas posté en premier lieu.