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

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.

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

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

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.

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');

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.

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');
    });

    });

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');
});

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

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

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

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.

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

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

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();
    });
});

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

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