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

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>

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.

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>

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

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.

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>

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

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; ">

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