Deaktivierte Formulareingaben werden in der Anforderung nicht angezeigt

339

Ich habe einige deaktivierte Eingaben in einem Formular und möchte sie an einen Server senden, aber Chrome schließt sie von der Anforderung aus.

Gibt es eine Problemumgehung dafür, ohne ein verstecktes Feld hinzuzufügen?

<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>
hazzik
quelle
2
@ Liam, es ist ein sehr seltsamer Versuch, zugunsten einer weniger besuchten Frage mit Antworten von geringerer Qualität zu schließen.
Hazzik
Eine ältere, weniger besuchte Frage. Technisch gesehen sollte diese Frage als Duplikat geschlossen werden, als sie gestellt wurde. Ich habe es mit einem Mod für eine mögliche Verschmelzung markiert, kann passieren oder nicht. Es liegt an Ihnen.
Liam
@ Liam in der Tat sind die Fragen unterschiedlich, auch wenn einige Antworten ähnlich aussehen. Ich frage, wie man ein "deaktiviertes" Feld macht, um Werte zu übermitteln, und eine andere Frage fragt nach "Gründen"
hazzik
Ich bin erst hierher gekommen, nachdem ich ein paar Stunden damit verbracht hatte, es zu lösen. Ehhh ..
Matcheek

Antworten:

728

Elemente mit dem disabledAttribut werden nicht übermittelt oder Sie können sagen, dass ihre Werte nicht veröffentlicht werden ( Informationen zum Erstellen des Formulardatensatzes finden Sie im zweiten Aufzählungspunkt unter Schritt 3 in der HTML 5-Spezifikation ).

Dh

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

Zu Ihrer Information , gemäß 17.12.1 in der HTML 4-Spezifikation:

  1. Deaktivierte Steuerelemente erhalten keinen Fokus.
  2. Deaktivierte Steuerelemente werden in der Tab-Navigation übersprungen.
  3. Deaktivierte Steuerelemente können nicht erfolgreich gebucht werden.

Sie können readonlyin Ihrem Fall ein Attribut verwenden. Auf diese Weise können Sie die Daten Ihres Feldes veröffentlichen.

Dh

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

Zu Ihrer Information , gemäß 17.12.2 in der HTML 4-Spezifikation:

  1. Schreibgeschützte Elemente erhalten den Fokus, können jedoch vom Benutzer nicht geändert werden.
  2. In der Tab-Navigation sind schreibgeschützte Elemente enthalten.
  3. Schreibgeschützte Elemente wurden erfolgreich gebucht.
Alphamännchen
quelle
8
Um meine eigene Frage zu beantworten: Nein, Readony funktioniert nur für <Eingabe /> Formularsteuerung von Typ = 'Text' und Typ = 'Passwort' und für <Textbereich />. Was schreibgeschützt ist, verhindert, dass der Benutzer den Steuerelementwert ändert. Es ist wenig sinnvoll zu verhindern, dass der Benutzer den Wert eines Kontrollkästchens (oder einer Eingabe vom Typ Radio) ändert ...
Muleskinner
3
@ danielson317 Sie können das Auswahlelement "deaktiviert" lassen, aber auch eine weitere versteckte Eingabe mit demselben Wert hinzufügen.
AlphaMale
1
@AlphaMale Aber das versteckte Element kann nicht denselben Namen haben (oder sollte nicht). Ich habe dies überwunden, indem ich zugelassen habe, dass das Element leer ist, und nur den ursprünglichen Wert aus dem gespeicherten Formularstatus gezogen habe. Es ist nur erwähnenswert, dass readonly bei ausgewählten Formularelementen nicht funktioniert.
Danielson317
2
Finden Sie jemals etwas heraus und denken Sie: "Was zum Teufel hat sie glauben lassen, dass dies offensichtlich ist?" Wenn ich mir die Mühe mache, ein Eingabefeld einzuschließen, das möglicherweise deaktiviert ist oder nicht, bedeutet dies, dass ich nicht möchte, dass der Benutzer es ändert, und nicht, dass es effektiv so funktioniert , als ob es überhaupt nicht deklariert worden wäre!
Nick Bedford
1
Vielen Dank, das war hilfreich und sowohl die Antwort als auch die Antwort.
user1449249
24

Mit Jquery und dem Senden der Daten mit Ajax können Sie Ihr Problem lösen:

<script>

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

    //Rest of code
    })
</script>
LipeTuga
quelle
+1 das Gute an dieser Lösung ist, dass Sie immer noch das rote Deaktivierungssymbol verwenden können, wenn Benutzer über die Eingabe =)
JMASTER B
5
@ArielMaduro Sie können das mit csscursor:not-allowed;
sricks
@sricks oh wirklich? Können Sie ein Beispiel geben?
JMASTER B
mag diese Lösung mehr als schreibgeschützt, weil deaktivierte Felder keinen Fokus erhalten können
Andreas
9

Um Werte von deaktivierten Eingaben zusätzlich zu aktivierten Eingaben zu veröffentlichen, können Sie einfach alle Eingaben des Formulars wieder aktivieren, während es gesendet wird.

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

Wenn Sie jQuery bevorzugen:

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

Für ASP.NET MVC C # Razor fügen Sie den Submit-Handler wie folgt hinzu:

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 -->
}
Tom Blodget
quelle
Es fehlt ein Zitat auf jquery Option
Cagcak
8

Wenn Sie das Feld unbedingt deaktivieren und die Daten übergeben müssen, können Sie ein Javascript verwenden, um dieselben Daten in ein verstecktes Feld einzugeben (oder einfach auch das versteckte Feld festlegen). Dies würde es Ihnen ermöglichen, es zu deaktivieren, aber die Daten trotzdem zu veröffentlichen, obwohl Sie auf einer anderen Seite veröffentlichen würden.

Chris Pierce
quelle
1
Diese Lösung habe ich auch verwendet - aber wie ich gerade erfahren habe - ist die schreibgeschützte Eigenschaft eine weitaus bessere Lösung
Muleskinner
4

Ich aktualisiere diese Antwort, da sie sehr nützlich ist. Fügen Sie einfach schreibgeschützt zur Eingabe hinzu.

Das Formular lautet also:

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

Semantisch fühlt sich das wie das richtige Verhalten an

Ich würde mich fragen: " Warum muss ich diesen Wert einreichen? "

Wenn Sie eine deaktivierte Eingabe in ein Formular haben, möchten Sie vermutlich nicht, dass der Benutzer den Wert direkt ändert

Jeder Wert, der in einer deaktivierten Eingabe angezeigt wird, sollte entweder sein

  1. Ausgabe von einem Wert auf dem Server, der das Formular erstellt hat, oder
  2. Wenn das Formular dynamisch ist, können Sie es anhand der anderen Eingaben im Formular berechnen

Unter der Annahme, dass der Server, der das Formular verarbeitet, mit dem Server identisch ist, der es bereitstellt, sollten alle Informationen zur Reproduktion der Werte der deaktivierten Eingaben bei der Verarbeitung verfügbar sein

Um die Datenintegrität zu gewährleisten - selbst wenn der Wert der deaktivierten Eingabe an den Verarbeitungsserver gesendet wurde, sollten Sie ihn wirklich validieren. Diese Validierung würde den gleichen Informationsstand erfordern, den Sie ohnehin benötigen würden, um die Werte zu reproduzieren!

Ich würde fast argumentieren, dass schreibgeschützte Eingaben auch nicht in der Anfrage gesendet werden sollten

Ich bin froh, korrigiert zu werden, aber alle Anwendungsfälle, die ich mir vorstellen kann, in denen schreibgeschützte / deaktivierte Eingaben eingereicht werden müssen, sind wirklich nur verschleierte Styling-Probleme

Arth
quelle
1
Nicht zu vergessen, dass sein Wert direkt mit den Chrome-Entwicklertools manipuliert werden kann
Jimjim
2

Ich finde das funktioniert einfacher. Lesen Sie nur das Eingabefeld und formatieren Sie es dann so, dass der Endbenutzer weiß, dass es schreibgeschützt ist. Hier platzierte Eingaben (z. B. von AJAX) können weiterhin ohne zusätzlichen Code gesendet werden.

<input readonly style="color: Grey; opacity: 1; ">
Erik Robinson
quelle
-6

Sie können das Deaktivieren vollständig vermeiden. Dies ist schmerzhaft, da das HTML-Formularformat nichts im Zusammenhang mit <p>oder einem anderen Label sendet .

So können Sie stattdessen regelmäßig setzen

<input text tag just before you have `/>

füge das hinzu readonly="readonly"

Ihr Text wird nicht deaktiviert, aber vom Benutzer nicht geändert, sodass er wie <p>folgt funktioniert und Wert über das Formular sendet. Entfernen Sie einfach den Rand, wenn Sie ihn eher wie ein <p>Tag gestalten möchten

Amin MyCard
quelle