Wie kann sichergestellt werden, dass ein <select> Formularfeld gesendet wird, wenn es deaktiviert ist?

180

Ich habe ein selectFormularfeld, das ich als "schreibgeschützt" markieren möchte, da der Benutzer den Wert nicht ändern kann, der Wert jedoch weiterhin mit dem Formular gesendet wird. Die Verwendung des disabledAttributs verhindert, dass der Benutzer den Wert ändert, sendet den Wert jedoch nicht mit dem Formular.

Das readonlyAttribut ist nur für inputund textareaFelder verfügbar , aber genau das möchte ich. Gibt es eine Möglichkeit, das zum Laufen zu bringen?

Zwei Möglichkeiten, die ich in Betracht ziehe, sind:

  • Anstatt das zu deaktivieren select, deaktivieren Sie alle options und verwenden Sie CSS, um die Auswahl auszublenden, sodass sie wie deaktiviert aussieht.
  • Fügen Sie der Schaltfläche "Senden" einen Klickereignishandler hinzu, damit alle deaktivierten Dropdown-Menüs aktiviert werden, bevor Sie das Formular senden.
Marquis Wang
quelle
2
Es tut mir leid, dass Sie zu spät gekommen sind, aber die von @ trafalmadorianworkest angebotenen Lösungen sind die besten. Es deaktiviert alle Eingänge, die nicht ausgewählt sind. Es würde auch funktionieren, wenn für die Auswahl mehrere Optionen aktiviert sind. $('#toSelect')find(':not(:selected)').prop('disabled',true);
Abhishek Madhani
Alternativ können Sie das Steuerelement auf der Benutzeroberfläche deaktiviert lassen, aber den Wert in der Aktionsmethode abrufen: public ActionResult InsertRecord (MyType-Modell) {if (model.MyProperty == null) {model.MyProperty = Request ["MyProperty"]; }}
Beastieboy

Antworten:

118
<select disabled="disabled">
    ....
</select>
<input type="hidden" name="select_name" value="selected value" />

Wo select_nameist der Name, den Sie in der Regel die geben würde <select>.

Andere Option.

<select name="myselect" disabled="disabled">
    <option value="myselectedvalue" selected="selected">My Value</option>
    ....
</select>
<input type="hidden" name="myselect" value="myselectedvalue" />

Bei diesem habe ich festgestellt, dass Sie je nach verwendetem Webserver möglicherweise die hiddenEingabe entweder vor oder nach dem vornehmen müssen <select>.

Wenn mein Gedächtnis mir richtig dient, setzen Sie es mit IIS vor, mit Apache nach. Testen ist wie immer der Schlüssel.

Jordan S. Jones
quelle
3
Wie würde dies vom Webserver abhängen ? Ist es nicht der Client , der die Seite mit dem Auswahlfeld rendert, und im Falle eines solchen Konflikts entscheidet der Client , ob der Wert an den Server gesendet wird oder nicht?
Ilari Kajaste
8
Dies hängt davon ab, wie der Server mehrere Eingaben mit demselben Namen verarbeitet.
Jordan S. Jones
1
Sie sollten sich besser nicht auf einen bestimmten Servertyp verlassen, daher denke ich, dass der erste Ansatz sauberer und weniger fehleranfällig ist.
Luke
5
@Jordan: Browser senden keine Werte für deaktivierte Felder an den Server, weshalb sie leer sind, wenn Sie versuchen, sie serverseitig zu behandeln. Wenn Sie ein verstecktes Feld mit dem gewünschten Wert haben und die sichtbaren Felder deaktiviert sind, wird nur das versteckte Feld an den Server gesendet. Ergo sollte das ausgeblendete Feld nur erstellt werden (über JS oder serverseitigen Code), wenn die sichtbaren Felder deaktiviert sind und kein Prioritätsproblem vorliegt.
Matt van Andel
1
Dies ist nur möglich, wenn Sie ein Formular benötigen, das ohne Javascript funktioniert.
Andrew
223

Deaktivieren Sie die Felder und aktivieren Sie sie, bevor das Formular gesendet wird:

jQuery-Code:

jQuery(function ($) {        
  $('form').bind('submit', function () {
    $(this).find(':input').prop('disabled', false);
  });
});
Tres
quelle
14
Eine schöne Lösung!
Chris
2
Dies ist die, für die ich mich entschieden habe, hauptsächlich weil sie am wenigsten aufdringlich ist.
Jonathan
3
In jQuery-Dokumenten wird empfohlen, .prop und .removeProp für "markiert", "ausgewählt" und "deaktiviert" anstelle von .attr und .removeAttr zu verwenden. Siehe http://api.jquery.com/prop/
Jim Bergman,
2
Relevantes Bit von @ JimBergmans Kommentar - "Eigenschaften wirken sich im Allgemeinen auf den dynamischen Status eines DOM-Elements aus, ohne das serialisierte HTML-Attribut zu ändern. Beispiele sind die value-Eigenschaft von Eingabeelementen, die deaktivierte Eigenschaft von Eingaben und Schaltflächen oder die aktivierte Eigenschaft eines Kontrollkästchens. Die .prop () -Methode sollte verwendet werden, um deaktiviert und aktiviert zu setzen, anstelle der .attr () -Methode. Die .val () -Methode sollte zum Abrufen und Festlegen von Werten verwendet werden. " - von api.jquery.com/prop
Joshua Dance
2
Sie sind Genie eins (Y)
TommyDo
13

Ich habe nach einer Lösung dafür gesucht, und da ich in diesem Thread keine Lösung gefunden habe, habe ich meine eigene gemacht.

// With jQuery
$('#selectbox').focus(function(e) {
    $(this).blur();
});

Ganz einfach, Sie verwischen das Feld nur, wenn Sie sich darauf konzentrieren, so etwas wie das Deaktivieren, aber Sie senden tatsächlich seine Daten.

Jean Paul Rumeau
quelle
Wow Tolle und einfache Lösung. Danke .. +1 von mir :)
Naeem Ul Wahhab
Ich mag das sehr. Abhängig von den Interaktionen in meinem Formular werden Elemente hin und her aktiviert / deaktiviert. Wie kann ich in diesem Szenario ein "unscharfes" Feld wieder aktivieren?
bkwdesign
Beim Googeln sieht es aus wie $ ('# selectbox'). Off ('focus'); würde den Trick der erneuten Aktivierung tun
bkwdesign
2
funktioniert für Textfelder, funktioniert nicht für ausgewählte Felder und ist super einfach zu umgehen, indem Sie auf die Schaltfläche klicken und sie gedrückt halten
Andrew
7

Ich war mit einem etwas anderen Szenario konfrontiert, da ich dem Benutzer nur nicht erlauben wollte, den ausgewählten Wert basierend auf einem früheren Auswahlfeld zu ändern. Am Ende habe ich nur alle anderen nicht ausgewählten Optionen in der Auswahlbox mit deaktiviert

$('#toSelect')find(':not(:selected)').attr('disabled','disabled');
Trafalmadorianer
quelle
Danke, ich fand deine am logischsten. Sollte sich attrjedoch ändern mit prop, würde $('#toSelect')find(':not(:selected)').prop('disabled',true);
ungefähr
6

Dieselbe von Tres vorgeschlagene Lösung ohne Verwendung von jQuery

<form onsubmit="document.getElementById('mysel').disabled = false;" action="..." method="GET">

   <select id="mysel" disabled="disabled">....</select>

   <input name="submit" id="submit" type="submit" value="SEND FORM">
</form>

Dies könnte jemandem helfen, mehr zu verstehen, ist aber offensichtlich weniger flexibel als das jQuery.

Marco Demaio
quelle
Aber es ist nicht schön für mehrere Selektoren. Vielleicht können wir verwenden getElementsByTagName('select')?
Glücklicher
6

Es funktioniert nicht mit dem: Eingangswähler für ausgewählte Felder. Verwenden Sie Folgendes:

    jQuery(function() {

    jQuery('form').bind('submit', function() {
        jQuery(this).find(':disabled').removeAttr('disabled');
    });

    });
chhalpha
quelle
5

Ich verwende den nächsten Code, um Optionen in Auswahlen zu deaktivieren

<select class="sel big" id="form_code" name="code" readonly="readonly">
   <option value="user_played_game" selected="true">1 Game</option>
   <option value="coins" disabled="">2 Object</option>
   <option value="event" disabled="">3 Object</option>
   <option value="level" disabled="">4 Object</option>
   <option value="game" disabled="">5 Object</option>
</select>

// Disable selection for options
$('select option:not(:selected)').each(function(){
 $(this).attr('disabled', 'disabled');
});
Aleks
quelle
4

Der einfachste Weg, den ich gefunden habe, war, eine winzige Javascript-Funktion zu erstellen, die an Ihr Formular gebunden ist:

function enablePath() {
    document.getElementById('select_name').disabled= "";
}

und Sie nennen es in Ihrer Form hier:

<form action="act.php" method="POST" name="form_name" onSubmit="enablePath();">

Oder Sie können es in der Funktion aufrufen, mit der Sie Ihr Formular überprüfen :)

Alex PARISOT
quelle
4

Fügen Sie einfach eine Zeile hinzu, bevor Sie sie senden.

$ ("# XYZ"). RemoveAttr ("disabled");

PPB
quelle
2

Oder verwenden Sie JavaScript, um den Namen der Auswahl zu ändern und auf deaktiviert zu setzen. Auf diese Weise wird die Auswahl weiterhin gesendet, aber unter Verwendung eines Namens, den Sie nicht überprüfen.

Byron Whitlock
quelle
2

Ich habe ein schnelles Plugin (nur Jquery) erstellt, das den Wert in einem Datenfeld speichert, während eine Eingabe deaktiviert ist. Dies bedeutet nur, solange das Feld programmgesteuert durch jquery mit .prop () oder .attr () deaktiviert wird. Wenn Sie dann mit .val (), .serialize () oder .serializeArra () auf den Wert zugreifen, wird immer das zurückgegeben Wert auch wenn deaktiviert :)

Schamloser Stecker: https://github.com/Jezternz/jq-disabled-inputs

Josh Mc
quelle
2

Basierend auf der Lösung des Jordan habe ich eine Funktion erstellt, die automatisch eine versteckte Eingabe mit demselben Namen und demselben Wert der Auswahl erstellt, die ungültig werden soll. Der erste Parameter kann eine ID oder ein jquery-Element sein. Der zweite ist ein optionaler boolescher Parameter, bei dem "true" deaktiviert und "false" die Eingabe aktiviert. Wenn nicht angegeben, wechselt der zweite Parameter die Auswahl zwischen "aktiviert" und "deaktiviert".

function changeSelectUserManipulation(obj, disable){
    var $obj = ( typeof obj === 'string' )? $('#'+obj) : obj;
    disable = disable? !!disable : !$obj.is(':disabled');

    if(disable){
        $obj.prop('disabled', true)
            .after("<input type='hidden' id='select_user_manipulation_hidden_"+$obj.attr('id')+"' name='"+$obj.attr('name')+"' value='"+$obj.val()+"'>");
    }else{
        $obj.prop('disabled', false)
            .next("#select_user_manipulation_hidden_"+$obj.attr('id')).remove();
    }
}

changeSelectUserManipulation("select_id");
Doglas
quelle
Der Parameter 'obj' muss ein Abfrageobjekt sein
Doglas
1

Ich habe eine praktikable Lösung gefunden: Entfernen Sie alle Elemente außer dem ausgewählten. Sie können den Stil dann in einen Stil ändern, der ebenfalls deaktiviert aussieht. Verwenden von jQuery:

jQuery(function($) {
    $('form').submit(function(){
        $('select option:not(:selected)', this).remove();
    });
});
Alftheo
quelle
0
<select id="example">
    <option value="">please select</option>
    <option value="0" >one</option>
    <option value="1">two</option>
</select>



if (condition){
    //you can't select
    $("#example").find("option").css("display","none");
}else{
   //you can select
   $("#example").find("option").css("display","block");
}
Thxopen
quelle
-8

Eine weitere Option ist die Verwendung des Attributs readonly.

<select readonly="readonly">
    ....
</select>

Wenn schreibgeschützt der Wert weiterhin gesendet wird, ist das Eingabefeld ausgegraut und der Benutzer kann es nicht bearbeiten.

Bearbeiten:

Zitiert von http://www.w3.org/TR/html401/interact/forms.html#adef-readonly :

  • Schreibgeschützte Elemente erhalten den Fokus, können jedoch vom Benutzer nicht geändert werden.
  • In der Tab-Navigation sind schreibgeschützte Elemente enthalten.
  • Schreibgeschützte Elemente sind möglicherweise erfolgreich.

Wenn er sagt , das Element erfolgreich sein kann, bedeutet dies , es kann eingereicht werden, wie hier angegeben: http://www.w3.org/TR/html401/interact/forms.html#successful-controls

Phillip Whelan
quelle
6
Das Steuerelement ist NICHT ausgegraut und der Benutzer kann es bearbeiten. Sie haben den gesamten Abschnitt nicht gelesen und ich zitiere: "Die folgenden Elemente unterstützen das schreibgeschützte Attribut: INPUT und TEXTAREA."
Carlos Rendon
3
Ich weiß, dass dies eine alte Antwort ist, aber das funktioniert tatsächlich. Ich kenne den Grund für viele Abstimmungen nicht.
Ze Luis