Les entrées de formulaire désactivées n'apparaissent pas dans la demande


340

J'ai des entrées désactivées dans un formulaire et je souhaite les envoyer à un serveur, mais Chrome les exclut de la demande.

Existe-t-il une solution de contournement pour cela sans ajouter de champ masqué?

<form action="/Media/Add">
    <input type="hidden" name="Id" value="123" />

    <!-- this does not appear in request -->
    <input type="textbox" name="Percentage" value="100" disabled="disabled" /> 

</form>


2
@Liam, c'est une tentative très étrange de se tourner vers une question moins fréquentée avec des réponses de moindre qualité.
hazzik

Une question plus ancienne et moins fréquentée. Techniquement, cette question devrait être fermée en double lorsqu'elle a été posée. Je l'ai signalé avec un mod pour une fusion potentielle, peut ou non se produire. Cela dépend d'eux.
Liam

@Liam en fait les questions sont différentes même certaines réponses se ressemblent. Je demande comment faire un champ "désactivé" pour soumettre des valeurs, et une autre question demande des "raisons"
hazzik

Je ne suis arrivé ici qu'après avoir passé quelques heures à essayer de le résoudre. Ehhh ..
matcheek

Réponses:


730

Les éléments avec l' disabledattribut ne sont pas soumis ou vous pouvez dire que leurs valeurs ne sont pas publiées (voir la deuxième puce sous l'étape 3 dans la spécification HTML 5 pour la construction de l'ensemble de données de formulaire ).

C'est à dire,

<input type="textbox" name="Percentage" value="100" disabled="disabled" /> 

Pour info , par 17.12.1 dans la spécification HTML 4:

  1. Les contrôles désactivés ne reçoivent pas le focus.
  2. Les contrôles désactivés sont ignorés dans la navigation par tabulation.
  3. Les contrôles désactivés ne peuvent pas être publiés avec succès.

Vous pouvez utiliser l' readonlyattribut dans votre cas, ce faisant, vous pourrez publier les données de votre champ.

C'est à dire,

<input type="textbox" name="Percentage" value="100" readonly="readonly" />

Pour info , par 17.12.2 dans la spécification HTML 4:

  1. Les éléments en lecture seule reçoivent le focus mais ne peuvent pas être modifiés par l'utilisateur.
  2. Les éléments en lecture seule sont inclus dans la navigation par tabulation.
  3. Les éléments en lecture seule sont correctement publiés.

8
Pour répondre à ma propre question: Non, readony ne fonctionne que pour le contrôle de formulaire <input /> de type = 'text' et type = 'password' et pour <textarea />. Ce que fait en lecture seule empêche l'utilisateur de modifier la valeur des contrôles. Empêcher l'utilisateur de changer la valeur d'une case à cocher (ou d'une entrée de type radio) n'a pas beaucoup de sens ...
Muleskinner

3
@ danielson317 Vous pouvez garder l'élément de sélection "désactivé" mais également ajouter une autre entrée cachée avec la même valeur.
AlphaMale

1
@AlphaMale Mais l'élément caché ne peut pas avoir le même nom (ou ne devrait pas). J'ai dépassé cela en permettant à l'élément d'être vide et en affichant simplement la valeur d'origine à partir de l'état de formulaire enregistré. Il convient de noter que la lecture seule ne fonctionne pas sur certains éléments de formulaire.
danielson317

2
Avez-vous déjà découvert quelque chose et pensé: "Qu'est-ce qui leur a fait penser que ce serait évident?" Si je me donne la peine d'inclure un champ de saisie qui peut ou non être désactivé, cela signifie que je ne veux pas que l' utilisateur le modifie, pas qu'il doive effectivement agir comme s'il n'avait jamais été déclaré du tout!
Nick Bedford

1
Merci, cela a été utile et à la fois la réponse et la réponse.
user1449249

25

En utilisant Jquery et en envoyant les données avec ajax, vous pouvez résoudre votre problème:

<script>

$('#form_id').submit(function() {
    $("#input_disabled_id").prop('disabled', false);

    //Rest of code
    })
</script>

+1 la bonne chose à propos de cette solution est que vous pouvez toujours utiliser l'icône de désactivation rouge lorsque l'utilisateur passe sur l'entrée =)
JMASTER B

5
@ArielMaduro vous pouvez le faire avec csscursor:not-allowed;
sricks

@sricks oh vraiment ?? Pouvez vous donner un exemple?
JMASTER B

aime cette solution plus qu'utiliser en lecture seule, car les champs désactivés ne peuvent pas recevoir le focus
Andreas

9

Pour publier les valeurs des entrées désactivées en plus des entrées activées, vous pouvez simplement réactiver toutes les entrées du formulaire lors de sa soumission.

<form onsubmit="this.querySelectorAll('input').forEach(i => i.disabled = false)">
    <!-- Re-enable all input elements on submit so they are all posted, 
         even if currently disabled. -->

    <!-- form content with input elements -->
</form>

Si vous préférez jQuery:

<form onsubmit="$(this).find('input').prop('disabled', false)">
    <!-- Re-enable all input elements on submit so they are all posted, 
         even if currently disabled. -->

    <!-- form content with input elements -->
</form>

Pour ASP.NET MVC C # Razor, vous ajoutez le gestionnaire de soumission comme ceci:

using (Html.BeginForm("ActionName", "ControllerName", FormMethod.Post,
    // Re-enable all input elements on submit so they are all posted, even if currently disabled.
    new { onsubmit = "this.querySelectorAll('input').forEach(i => i.disabled = false)" } ))
{
    <!-- form content with input elements -->
}

il manque une des citations sur l'option jquery
cagcak

8

Si vous devez absolument désactiver le champ et transmettre les données, vous pouvez utiliser un javascript pour entrer les mêmes données dans un champ masqué (ou simplement définir le champ masqué également). Cela vous permettrait de le désactiver mais de publier les données même si vous publiez sur une autre page.


1
Cette solution est ce que j'utilise aussi - mais comme je viens de l'apprendre - la propriété en lecture seule est une bien meilleure solution
Muleskinner

4

Je mets à jour cette réponse car elle est très utile. Ajoutez simplement en lecture seule à l'entrée.

Le formulaire sera donc:

<form action="/Media/Add">
    <input type="hidden" name="Id" value="123" />
    <input type="textbox" name="Percentage" value="100" readonly/>
</form>

4

Sémantiquement, cela ressemble au comportement correct

Je me demanderais " Pourquoi dois-je soumettre cette valeur? "

Si vous avez une entrée désactivée sur un formulaire, vous ne voulez probablement pas que l'utilisateur modifie directement la valeur

Toute valeur affichée dans une entrée désactivée doit être soit

  1. sortie d'une valeur sur le serveur qui a produit le formulaire, ou
  2. si le formulaire est dynamique, être calculable à partir des autres entrées du formulaire

En supposant que le serveur traitant le formulaire est le même que le serveur qui le dessert, toutes les informations pour reproduire les valeurs des entrées désactivées doivent être disponibles au traitement

En fait, pour préserver l'intégrité des données - même si la valeur de l'entrée désactivée a été envoyée au serveur de traitement, vous devriez vraiment la valider. Cette validation nécessiterait le même niveau d'information que vous auriez quand même besoin de reproduire les valeurs!

Je dirais presque que les entrées en lecture seule ne devraient pas non plus être envoyées dans la demande

Heureux d'être corrigé, mais tous les cas d'utilisation auxquels je peux penser où les entrées en lecture seule / désactivées doivent être soumises ne sont vraiment que des problèmes de style déguisés


1
sans oublier que sa valeur peut être manipulée directement avec les outils de développement de chrome
jimjim

2

Je trouve que cela fonctionne plus facilement. en lecture seule le champ de saisie, puis stylisez-le pour que l'utilisateur final sache qu'il est en lecture seule. les entrées placées ici (depuis AJAX par exemple) peuvent toujours être soumises, sans code supplémentaire.

<input readonly style="color: Grey; opacity: 1; ">

-6

Vous pouvez éviter complètement de désactiver, c'est pénible car le format de formulaire html n'enverra rien de lié à <p>ou une autre étiquette.

Vous pouvez donc mettre régulièrement

<input text tag just before you have `/>

Ajoute ça readonly="readonly"

Il ne désactiverait pas votre texte mais ne changerait pas par utilisateur, il fonctionne donc comme <p>et enverra de la valeur via le formulaire. Supprimez simplement la bordure si vous souhaitez la rendre plus semblable à la <p>balise

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.